skip to Main Content

I making search function with ajax.
After fetch data with foreach loop , the result component did not support livewire (wire:click.prevent). Other tag that outside of the looping is working fine .
I need solution pls help .

contact-search.blade.php


<div>
    <input type="text" class="form-controller" id="search" name="search"></input>
    <main>
    </main>
    <a href="#" wire:click="test">Click</a>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $('#search').on('keyup',function(){
                $value=$(this).val();
                $.ajax({
                    type : 'get',
                    url : '{{URL::to('search')}}',
                    data:{'search':$value},
                    success:function(data){
                        $('main').html(data);
                    }
                });
            });
        </script>
        <script type="text/javascript">
        $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
        </script>
</div>

SearchController.php

      public function search(Request $request)
    {
        if($request->ajax())
        {
            $output="";
            // $users= DB::table('users')->where('name','LIKE','%'.$request->search."%")->get();
            // $users= User::where('name','LIKE','%'.$request->search."%")->get();
            $users= User::where('name',$request->search)->get();
            if($users)
            {
                foreach ($users as $key => $user) {
                    $output.='<a href="#" wire:click="test" >'.
                                    'click'.
                             '</a>';
                }
                return Response($output);
            }
        }   
    }

ContactSearch.php

    public function test()
    {
        dd('HEllo');
   }

web.php

Route::get('/search',[SearchController::class,'search'])->name('search');


2

Answers


  1. Chosen as BEST ANSWER

    I making search function with ajax. After fetch data with foreach loop , the result component did not support livewire (wire:click.prevent). One of the tag that outside of the looping is working fine . I need solution pls help .


  2. Livewire is serverside. Implementing a client side request means that the server is already done loading. At this point, Livewire will no longer check if it needs to bind anything. Also, Livewire is designed to perform client-to-server requests and vice versa, so using $.ajax with Livewire is totally not adviced. I really advice reading the docs on how to get started with Livewire.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search