Laravel Livewire component not refreshing/reloading automatically after refreshing it

13
votes

So, I'm currently using Laravel Livewire in one of my projects. But when I try emit an event from one component to another component by magic mathod $refresh , its refreshing (got the dom in xhr request ) the total component but the Front end is not updating realtime.

ProductReviewForm.php Component:

public function save()
{
    //some functionalities .... 
    $this->emit('reviewSectionRefresh');
}

ProductReviewSection.php Component:

protected $listeners = [
    'reviewSectionRefresh' => '$refresh',
];

public function render()
{
    $this->review_lists = ProductReview::orderBy('id', 'DESC')->get();

    return view('livewire.desktop.product-review-section');
}

So I want to emit the reviewSectionRefresh event to be emitted whenever I call save() function from First component, That should be listened by $listeners from other component. This is working fine. also in xhr I'm getting the refreshed dom but the component in frontend is not updating. Hoping anyone working with Livewire may help with that.

2
phplaravellaravel-livewire
I am not sure, but can you try '$refresh' without quotes. – KPK
Have you tried to pass the objects to the view() as the second param? `return view('template-name', ['review_lists' => $review_lists]); – Chemaclass
@KPK , no that would give error, undefined $refresh , because that will expect $refresh variable. you can see calebporzio.com/video-realtime-livewire-w-laravel-echo-pusher this. ( Second video at 2.54 min ) Livewire is completely a new thing coming out some while ago, thats why I couldn't find any help so far. – fahim152
Do you have trigger action in view? Something like <button wire:click="save"> – Wahyu Kristianto
@Chemaclass it doesn't work like that way bro :( see about Livewire here: youtu.be/fX1aOWWt2nQ – fahim152

2 Answers

37
votes

So it seems I've write my component blade view in wrong way.

all things on refreshed component should be wrapped in one div element like this: 

<div> 
{{-- Anything you want to do --}}

</div>

previously my blade file was like. Which is Wrong

<div class=""> 
 {{ -- some dom elements -- }}
</div>

<div class=""> 
{{ -- some other dom elements -- }}
</div>

but that should be like. 

<div>
    <div class=""> 
       {{ -- some dom elements -- }}
    </div>

    <div class=""> 
    {{ -- some other dom elements -- }}
    </div>
</div>

So Whatever you write, that should be inside ONE PARENT DIV ELEMENT

2
votes

I am curious. I have a single element at the top of my livewire component. I too see the event being emitted. and my front end is not updating.

Does the single root element have to be void of any classes, etc? My single root element reads:

<div class="mt-10 sm:mt-0">

Should it only be a div with no attributes?

<div>

Actually I tried this and it did not make a difference.  
The front end is still not refreshing. Unless I refresh 
the entire page.

I am issuing this from a sibling component (I have tried it both ways seen below:

 $this->emitTo('address','refreshAddressComponent');

or

$this->emitTo('Address','refreshAddressComponent');

[Address.php] contains:

protected $listeners = ['refreshAddressComponent' => '$refresh'];

component front end is [address.blade.php].

I am wondering how I hydrate the component is at issue:


 public $userId;
    public $firstName ;
    public $lastName;

    public $mobilePhone;
....
Public function mount(){

        $user = auth()->user()->only(['id','firstname','lastname','mobile_phone','receive_texts','home_phone',
            'work_phone','alt_phone','dob','age_today','sex','address_1','address_2','address_3','city','state',
            'zip_code']);

        $this->userId = $user['id'];
        $this->firstName = ucWordsSpace($user['firstname']);
        $this->lastName = ucWordsSpace($user['lastname']);
        $this->mobilePhone = save_phone_number($user['mobile_phone']);

.....
}

I am not passing in the model directly. Is this the cause?