Prevent refreshing the page

#1

What seems to be the problem:
The main problem is that when I am sending data from the child livewire component to the parent livewire component and put in a public model then the page will refreshing. I would like to have not refreshed the page.

Steps to Reproduce:
Making 2 livewire components and one of them is parent component and second is child component. The child component sending data to the parent component. The parent component will put in a public model and then saving in the database after clicking to the save button.

Are you using the latest version of Livewire:
Yes

Do you have any screenshots or code examples:

Parent.php

public $timelimit_hetfoenabled;
    public $timelimit_hetfoblocked;
    public $timelimit_hetfostart;
    public $timelimit_hetfosend;

protected $listeners = [
        'timelimitsetup' => 'timelimitsettings'
    ];

public function timelimitsettings($enabled, $nap, $blocked, $kezdoido, $vegsoido){
        if($nap == 'hetfo'){
        $this->timelimit_hetfoenabled = $enabled;
        $this->timelimit_hetfoblocked = $blocked;
        $this->timelimit_hetfostart = $kezdoido;
        $this->timelimit_hetfosend = $vegsoido;
        }
    }

Child.php:

public $timelimit_hetfoenabled;

public function mondayclick(){
        $this->emit('timelimitsetup', $this->timelimit_hetfoenabled, 'hetfo', false, null, null);
    }

So how I can prevent to update the page after sent the data to the parent component? I know there is “defer” but that is in the blade part and not in the backend part.
Thanks for answers in advance.

#2

So when the mondayclick function runs your entire page is reloading or just the bits that have changed?

#3

If I use the mondayclick without emit then the page will not refresh which is good but if I emit the data to the Parent.php then the page will refresh which is not good. I don’t know why refreshing the page. I just pass the data from child to parent without showing on the parent blade the data but saving that.

#4

That is definitely not the expected behaviour. Are you returning a redirect anywhere, that would cause a whole page refresh? What results do you get with the counter example from the docs?

#5

No redirecting. Just rendering the design part and put in model the checkbox if something is checked or not and then emit from backend to the parent.php. I am not re rendering or redirect.
I noticed that if I don’t emit then it will work but then I can’t save in the database the values from the children. I did otherwise the this but ehh it is unfortunate that I can’t pass parameters from child to parent without refreshing.

How I did solve?
Well I did give to checkbox and for other stuffs an id in html and retrieve with jquery and emit to the parent backend. This way working. So I needed to go around and then use the values. Unfortunately I couldn’t solve by sending with child to parent directly.

Thank you for the answers btw.

#6

Hi,
Another way to reduce components refreshing when you need to share data, is using sessions variables , that way in any component you can manipulate the data without emiting an event

#7

Hi, oh I didn’t think about this. Dang, you have right. In the next project, I will do that way. Thanks for the advice. :+1: