Help Needed can send a variable in Render component in Livewire.

@RayC yes declared it

@emilpapelas4@gmail.com Try

$this->dispatchBrowserEvent('show-editsqmodal', ['editsq' => $this->editsq]);

@RayC what i want is to send $this->editsq to Render function because on there have the $this->editsq but not found it and once i want to send the $surv variable to the home view give a null.

public function render()
    { 
      $surv = Survey::where('id',$this->editsq)->first();
      return view('livewire.home',compact(''surv'))->extends('layouts.app');
    }

@Snapey i open the modal from blade using wire:click="editsurveyq({{$survey->id}})"

@emilpapelas4@gmail.com no you don't. That just sends a message to the component

@Snapey do you mean this

public function editsurveyq($id)
    {
      $this->editsq = $id;
      
      $this->dispatchBrowserEvent('show-editsqmodal');
    }

@emilpapelas4@gmail.com no. how are you including the modal in the view, and what makes it appear?

Is it rendered by this component?

@Snapey on my home.blade have

<button class="w-4 mr-2 transform text-blue-700 hover:text-yellow-500 hover:scale-110" role="button" wire:click="editsurveyq({{$survey->id}})">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                                </svg>
                                            </button>

<div wire:ignore.self class="modal" id="editsvqModalToggle" aria-hidden="true" aria-labelledby="editsvqModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="editsvqModalToggleLabel">Delete Survey</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="px-1 space-y-2">
                    
                    <div class="container p-4 bg-white rounded">
                        <div class="flex justify-between">
                          <div class="flex-col bg-white rounded shadow px-1">
                          <span class="text-gray-700 font-semibold"> {{ $surv->title }}</span>
                          <p class="text-gray-700 font-normal">{{ $surv->description }}</p>
                          </div>
                      </div>
                          <div class="border border-gray-100" style="margin:10px 0px;"></div>
                          <p class="flex items-center justify-center font-bold mb-3">Questions</p>
                          
                              @forelse ($surv->questions as $question)
                    
                              <div x-data="{ opened_tab: null }" class="flex flex-col">
                                <div class="flex flex-col border rounded shadow mb-2">
                                  <div @click="opened_tab = opened_tab == 0 ? null : 0 " class="cursor-pointer px-5 py-3 bg-gray-300 text-gray-700 text-center inline-block shadow hover:-mb-3 rounded-t"> {{ $question->title }} <a href="/question/{{ $question->id }}/edit"  class="bg-yellow-700 text-white rounded px-2 py-1 float-right">Edit</a></div>
                                  <div x-show="opened_tab==0" class="px-4 pb-4 bg-gray-200">
                    
                                    {!! Form::open() !!}
                                    @if($question->question_type === 'text')
                                      {{ Form::text('title')}}
                                    @elseif($question->question_type === 'textarea')
                                    <div class="row">
                                      <div class="input-field col s12">
                                        <label for="textarea1" class="text-gray-700">Provide answer</label>
                                        <textarea id="textarea1" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded border border-gray-300 placeholder-gray-400 focus:outline-none" placeholder="Add your Question"></textarea>
                                      </div>
                                    </div>
                                    @elseif($question->question_type === 'radio')
                                      @foreach($question->option_name as $key=>$value)
                                        <p style="margin:0px; padding:0px;">
                                          <input type="radio" id="{{ $key }}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300" />
                                          <label for="{{ $key }}">{{ $value }}</label>
                                        </p>
                                      @endforeach
                                    @elseif($question->question_type === 'checkbox')
                                      @foreach((array)$question->option_name as $key=>$value)
                                      <p style="margin:0px; padding:0px;">
                                        <input type="checkbox" id="{{ $key }}" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300"/>
                                        <label for="{{$key}}">{{ $value }}</label>
                                      </p>
                                      @endforeach
                                    @endif 
                                  {!! Form::close() !!}
                                  </div>
                                </div>
                              @empty
                                <span style="padding:10px;">Nothing to show. Add questions below.</span>
                              @endforelse
                          
                          <h2 class="text-white font-bold flex items-center justify-center">Add Question</h2>
                          <div class="bg-white rounded shadow p-2">
                          <form method="POST" wire:submit.prevent="editsurveyqdata" id="boolean">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="row">
                              <div class="input-field col s12">
                                <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:outline-none block w-full p-2.5" name="question_type" id="question_type">
                                  <option value="" disabled selected>Choose your option</option>
                                  <option value="text">Text</option>
                                  <option value="textarea">Textarea</option>
                                  <option value="checkbox">Checkbox</option>
                                  <option value="radio">Radio Buttons</option>
                                </select>
                              </div>                
                              <div class="p-1 mb-2">
                                <label for="title" class="text-gray-700 font-semibold">Question</label>
                                <input name="title" id="title" type="text" class="bg-gray-50 border border-gray-300 text-gray-700 text-sm rounded focus:outline-none block w-full p-1" required>
                              </div>  
                              <!-- this part will be chewed by script in init.js -->
                              <span class="form-g"></span>
                    
                              <div class="input-field col s12">
                              <button type="submit" class="px-2 py-1 rounded bg-green-700 text-white">Submit</button>
                              </div>
                            </div>
                            </form>
                          </div>
                      </div>

            </div>
          </div>
            </div>
          </div>
        </div>
      </div>

and use java script to open it

window.addEventListener('show-editsqmodal', event=>{
     $('#editsvqModalToggle').modal('show');
	});

@emilpapelas4@gmail.com So you realise that this wire:ignore.self means that any changes to content will be ignored?

@Snapey no i dont know about that

@Snapey back to my question. How i can use the $this->editsq variable in render() function because currently not working in my query.

public function render()
    { 
      $surv = Survey::where('id',$this->editsq)->first();
      
      return view('livewire.home',compact('surv'))->extends('layouts.app');
    }

@emilpapelas4@gmail.com because you set the view to wire:ignore

@Snapey need to remove wire:ignore to work?

@emilpapelas4@gmail.com Do you want me to hold your hand whilst you try it incase it goes wrong?

@Snapey Removed wire:ignore.self but still same issue

Issue is $this->editsq because not getting the id

@emilpapelas4@gmail.com so you are saying in this function

public function render()
{ 
  $surv = Survey::where('id',$this->editsq)->first();
  return view('livewire.home',compact('surv'))->extends('layouts.app');
}

that $this->editsq is null ?

why not dd it and check ?

@Snapey dd them but getting null

@Snapey check image getting null on dd https://imgur.com/mZbjSWd

and after that

Attempt to read property "title" on null (View: C:\xampp\htdocs\LaravelSurvey\resources\views\livewire\home.blade.php) because want to get the

{{$surv->title}}
{{$surv->description}}

@emilpapelas4@gmail.com ok, so work your way back.

You have a function that sets that $editsq, Yes?

What happens on the VERY FIRST load of the page? The first time render is called for your component.

Did you give it a default value, or check in the view if it is actually set?

@Snapey May did u know what was the error?

@emilpapelas4@gmail.com I'm asking you a question? What happens on the first render of the view? before you click to open the modal?

@emilpapelas4@gmail.com

Just change your code like this

public function render()
    { 
      $surv = Survey::where('id',$this->editsq)->firstOrNew();
      return view('livewire.home',compact('surv'))->extends('layouts.app');
    }

@Snapey this works for me

@emilpapelas4@gmail.com But do you know WHY?

@Snapey i cant open the modal beacuse get an error Attempt to read property "title" on null (View: C:\xampp\htdocs\LaravelSurvey\resources\views\livewire\home.blade.php)

@emilpapelas4@gmail.com Do you know WHY my change works?

@Snapey i think because will call the function only when click the button

@Snapey found errors that dont let my pagination works. if i open first Survey edit modal and close them i cant use the pagination and cant open any new modals like delete modal etc

@emilpapelas4@gmail.com

i think because will call the function only when click the button

No. It is because your modal is rendered even if it is not displayed. So on the first load of the page, if the Survey is not loaded then you get the error. My workaround provides an empty model for use in the modal until the user clicks a button.

@Snapey good may can u check the above reply with pagination issue.

@emilpapelas4@gmail.com yes, looking now into my crystal ball

@Snapey issue happen when I open the modal once closed pagination not work and also can't open other modal like delete or edit. Inside the modal have an forelse loop that show the $survey->questions. In case if I remove this forelse loop all works correctly. At morning I can provide you the code if u want.

@Snapey Here is my code

<p class="flex items-center justify-center font-bold mb-3">Questions</p>
                          
                        @forelse($survb->questions as $question)

                        <div x-data="{ opened_tab: null }" class="flex flex-col">
                        <div class="flex flex-col border rounded shadow mb-2">
                          <div @click="opened_tab = opened_tab == 0 ? null : 0 " class="cursor-pointer px-5 py-3 bg-gray-300 text-gray-700 text-center inline-block shadow hover:-mb-3 rounded-t"> {{ $question->title }} <a href="/question/{{ $question->id }}/edit"  class="bg-yellow-700 text-white rounded px-2 py-1 float-right">Edit</a></div>
                          <div x-show="opened_tab==0" class="px-4 pb-4 bg-gray-200">
            
                            <form>
                            @if($question->question_type === 'text')
                              <input type="text" id="title" class="block p-2.5 mb-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:outline-none">  
                            @elseif($question->question_type === 'textarea')
                            <div class="row">
                              <div class="input-field col s12">
                                <label for="textarea1" class="text-gray-700">Provide answer</label>
                                <textarea id="textarea1" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded border border-gray-300 placeholder-gray-400 focus:outline-none" placeholder="Add your Question"></textarea>
                              </div>
                            </div>
                            @elseif($question->question_type === 'radio')
                              @foreach($question->option_name as $key=>$value)
                                <p style="margin:0px; padding:0px;">
                                  <input type="radio" id="{{ $key }}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300" />
                                  <label for="{{ $key }}">{{ $value }}</label>
                                </p>
                              @endforeach
                            @elseif($question->question_type === 'checkbox')
                              @foreach((array)$question->option_name as $key=>$value)
                              <p style="margin:0px; padding:0px;">
                                <input type="checkbox" id="{{ $key }}" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300"/>
                                <label for="{{$key}}">{{ $value }}</label>
                              </p>
                              @endforeach
                            @endif 
                          
                          </form>
                          </div>
                        </div>
                      </div>
                      
                      @empty
                      <p> No Question Found , Please add questions below.</p>
                    
                              @endforelse

Once open the modal and close it all page will blocked , i cant use paginate or open other modals until refresh it.

@emilpapelas4@gmail.com how does blade code affect pagination?

@Snapey i dont know , and not only pagination affected also buttons will be affected. I cant do anything until refresh the page.

@Snapey Found the issue , this will come from the alpine js accordion once removed it will working. Now need to found other accordion to work with it.