Filament•5mo ago

variable sending from livewire component to js code is not working

Hello, I am trying to send variable from livewire component to javascript code. I have a page with js code and @livewire component with it own class. I am using

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\LearningUserStudyRecord;

class UserActivityForm extends Component
{
    public $record;

    public $video_start; // get data from db to set video start

public function mount(int | string $record): void
    {
        $this->record = LearningResource::findOrFail($record);
        $this->sendVideoTime();
    }

public function render()
    {
        return view('livewire.user-activity-form');
    }

public function sendVideoTime(): void
    {
        $user = auth()->user()->id;
        $userActivities = LearningUserStudyRecord::where('user_id', $user)
            ->where('resource_id', $this->record->id)
            ->get();

        if ($userActivities->isEmpty()) {
            $this->video_start = 0;
        }

        $latest_point = 20;
        foreach ($userActivities as $activity) {
            if ($activity->video_progress > $latest_point) {
                $latest_point = $activity->video_progress;
            }
        }

        $this->video_start = $latest_point;

        $this->dispatch('video-start', latestPoint: $this->video_start);
    }
}

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\LearningUserStudyRecord;

class UserActivityForm extends Component
{
    public $record;

    public $video_start; // get data from db to set video start

public function mount(int | string $record): void
    {
        $this->record = LearningResource::findOrFail($record);
        $this->sendVideoTime();
    }

public function render()
    {
        return view('livewire.user-activity-form');
    }

public function sendVideoTime(): void
    {
        $user = auth()->user()->id;
        $userActivities = LearningUserStudyRecord::where('user_id', $user)
            ->where('resource_id', $this->record->id)
            ->get();

        if ($userActivities->isEmpty()) {
            $this->video_start = 0;
        }

        $latest_point = 20;
        foreach ($userActivities as $activity) {
            if ($activity->video_progress > $latest_point) {
                $latest_point = $activity->video_progress;
            }
        }

        $this->video_start = $latest_point;

        $this->dispatch('video-start', latestPoint: $this->video_start);
    }
}

in one of the last code lines I am sending data ( I think here is the problem). Javascript code:

 
@script
    <script>
        document.addEventListener("livewire:initialized", function() {

            $wire.on('video-start', (latestPoint) => {
                latestWatchedTime = latestPoint;
                console.log("Latest watched time:", latestWatchedTime);
            });
        })
    </script>
@endscript

 
@script
    <script>
        document.addEventListener("livewire:initialized", function() {

            $wire.on('video-start', (latestPoint) => {
                latestWatchedTime = latestPoint;
                console.log("Latest watched time:", latestWatchedTime);
            });
        })
    </script>
@endscript

I thought that i catched data correctly, but i cant see even a console.log message. Can someone help, please?

Solution:

I understand that I sent variable correctly, but i can access it via js only in livewire.user-activity-form (livewire class view), but not the blade view

Jump to solution

13 Replies

LeandroFerreira•5mo ago

where is the js?

GlebkaOP•5mo ago

in a blade file also in this blade file I included livewire class:

@livewire('user-activity-form', ['record' => $record->id])

@livewire('user-activity-form', ['record' => $record->id])

LeandroFerreira•5mo ago

if you want to access video_start in the LW component view, you don't need to dispatch it. Just use $wire

<div x-data="{ init() {console.log($wire.video_start) } }">
</div>

<div x-data="{ init() {console.log($wire.video_start) } }">
</div>

GlebkaOP•5mo ago

i want to access it in javascript which is inside a blade view. This blade view contains @livewire component from where i am trying to get variable and a javascript code, where i want to use it

LeandroFerreira•5mo ago

could you share the whole code on Gist? you are missing ) in the document.addEventListener..

GlebkaOP•5mo ago

https://gist.github.com/re-glebsdimitrijevs/93f0a8097ccdaf42317bb0d3afa47298 i hope this works

Gist

UserActivityForm.php

GitHub Gist: instantly share code, notes, and snippets.

LeandroFerreira•5mo ago

remove livewire:initialized and try only $wire.on

@script
  <script>
    $wire.on('video-start', (latestPoint) => {
        latestWatchedTime = latestPoint;
        console.log("Latest watched time:", latestWatchedTime);
    });
    </script>
  @endscript

@script
  <script>
    $wire.on('video-start', (latestPoint) => {
        latestWatchedTime = latestPoint;
        console.log("Latest watched time:", latestWatchedTime);
    });
    </script>
  @endscript

GlebkaOP•5mo ago

1 min still the same problem

LeandroFerreira•5mo ago

maybe you could create a mini repo on Github only to reproduce this issue, without unrelated code, and I can take a look

GlebkaOP•5mo ago

thank you for your help, i really appreciate it, but not today, it is very late in my country

Solution

Glebka•5mo ago

I understand that I sent variable correctly, but i can access it via js only in livewire.user-activity-form (livewire class view), but not the blade view

LeandroFerreira•5mo ago

hum, custom-learning-resource isn't a lw component? Is it a Filament page?

GlebkaOP•5mo ago

yes, it is not a livewire

Gaming

Programming

variable sending from livewire component to js code is not working