v3 Upgrade dispatchBrowserEvent

Hey guys, I am fairly new at Laravel. I was doing my project in livewire 2 and now I wanna upgrade it to 3. Did almost everything except for this part.

public function loadCurrentData($id)
{
    $record = Purchases::find($id);
    if ($record) {
        $this->newBol = $record->bill_of_landing_date;
        $this->newVesselName = $record->vessel_id;;
        $this->dispatch('dataLoaded', 
            ['newVesselName' => $this->newVesselName,
             'newCommodity' => $this->newCommodity, 
             'newStatus' => $this->newStatus, 
             'newPurchasedon' => $this->newPurchasedon, 
             'newCosignee' => $this->newCosignee, 
             'newSender' => $this->newSender, 
             'newPol' => $this->newPol, 
             'newFinal' => $this->newFinal, 
             'newBerth' => $this->newBerth, 
             'newDisoperator' => $this->newDisoperator,  
        ]);    
    } else {
    }
}  I changed dispatchBrowserEvent to dispatch.

JS part looks like this document.addEventListener('DOMContentLoaded', function () { $('#kt_modal_edit_cost').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var id = button.data('kt-cost-id') @this.set('variableId', id); @this.call('loadCurrentData', id);

    // Listen for the Livewire event
    window.addEventListener('dataLoaded', event => {
        $('#commodityselect2edit').val(event.detail.newCommodity);
        $('#commodityselect2edit').trigger('change');
        $('#vesselselect2edit').val(event.detail.newVesselName);
        $('#vesselselect2edit').trigger('change');
        $('#statusselect2edit').val(event.detail.newStatus);
        $('#statusselect2edit').trigger('change');
        $('#purchasedonselect2edit').val(event.detail.newPurchasedon);
        $('#purchasedonselect2edit').trigger('change');
        $('#cosigneeselect2edit').val(event.detail.newCosignee);
        $('#cosigneeselect2edit').trigger('change');
        $('#senderselect2edit').val(event.detail.newSender);
        $('#senderselect2edit').trigger('change');
        $('#polselect2edit').val(event.detail.newPol);
        $('#polselect2edit').trigger('change');
        $('#finalselect2edit').val(event.detail.newFinal);
        $('#finalselect2edit').trigger('change');
        $('#berthselect2edit').val(event.detail.newBerth);
        $('#berthselect2edit').trigger('change');
        $('#disopelect2edit').val(event.detail.newDisoperator);
        $('#disopelect2edit').trigger('change');
    });
});

I am using dispatch to populate dropdown with actual names of the IDs sent by the livewire. Ex. when dispatching newStatus, livewire sends 3 (id=3) to dropdown which then is mapped to the name of status that has that id.

My problem is that dispatched events are not loaded in my blade modal everything else is actually working fine. I dd-ed dispatch and it sends data to blade.

ramonrietdijk

2 years ago

Best Answer

Level 30

The data is not passed correctly because you have not named the parameter in your dispatch. If you do, you can retrieve it's value as expected, using that same name.

Example:

// Notice "data: "
$this->dispatch('dataLoaded', data: [
    'newVesselName' => $this->newVesselName,
    // ...
]);

// Notice "event.detail.data.x" instead of "event.detail.x"
window.addEventListener('dataLoaded', event => {
    $('#vesselselect2edit').val(event.detail.data.newVesselName);
});

Please or to participate in this conversation.