How to take input value with Livewire pass from JQuery

I have a problem where my order always returns the default value of 1 from the input text. I want to return dynamically based on the data I sent with Ajax, the data is not always one but can be 2, 3, 4, and so on. Can anyone tell me what's wrong with my code? Why always return 1. This is my controller:

<?php

namespace App\Livewire;

use Livewire\Component;

class Question extends Component
{
    public $lecture_number;

    public function order()
    {
        dd($this->lecture_number);
    }
}

Here is my HTML input:

<input type="text" value="1" class="form-control" name="lecture_number" wire:click="order" wire:model.fill="lecture_number">

And the last one is my JQuery code:

$(document).on('click', '.lecture-title', function(){
        $('input[name=lecture_number]').val($(this).attr('data-lecture-number'));
    })

MohamedTammam

1 year ago

Level 51

Firstly, why are you using AJAX? With Livewire you don't AJAX.

If you want you property updates live use .live

class Question extends Component
{
    public $lecture_number = 1;

    public function order()
    {
        dd($this->lecture_number);
    }
}

<input
  type="text"
  class="form-control"
  name="lecture_number"
  wire:click="order"
  wire:model.live="lecture_number"
>

nurularifin

1 year ago

Level 1

@MohamedTammam I use ajax to sent lecture number to <input type="text" name="lecture_number"> when eveytime I click on lecture row. So, input text will receive the lecture number based on the lecture I click. on your answer, the number will always be 1 and never change based on the lecture I click. I hope you understand what I mean. The lecture number comes from this attribute

@foreach($lectures as $item)
<button class="lecture-title" data-lecture-number="{{$item->lecture_number}}">Lecture</button>`
@endforeach

MohamedTammam

1 year ago

Level 51

@nurularifin You can just use Livewire and AlpineJS for that.

@foreach($lectures as $item)
<button
	class="lecture-title"
	x-on:click="$wire.set('lecture_number', {{$item->lecture_number}})"
>
	Lecture
</button>
@endforeach

1 like

nurularifin

1 year ago

Level 1

@MohamedTammam Thank you so much @mohamedtammam. I need to dive into AlpineJS first.

Please or to participate in this conversation.