ajax search function in laravel -page load

Question

I am new to Laravel. I am using ajax for a search function. The scripts and function work well but when it displays the search result it reload the whole page and displays not with div. It reloads the whole page.

I have given only the table id to display but it loads the whole page. Why is this happening? where is the mistake done? Can anyone find it and give the solution to this problem.

My page loads like this :

<script>
  $(document).ready(function(){
  $("button").on('click',function(e){
  e.preventDefault();
   var str=  $("#search").val();
   if(str == "") {
  $( "#tabledata" ).html( data );   
  } else {
  $.get( "{{ url('create?id=') }}"+str, 
  function( data ) {
   $( "#tabledata" ).html( data );   
   });
    }
     });  
      }); 
    </script>

Search function:

<div class="panel">
  <br>
    <div>
      <h2 style="font-family:Garamond;color:black;font-weight:bold;margin-left:5%; font-size:40px;"> 
    </div>
    <div class="col-lg-12" >
      <form class="navbar-form navbar-right" method="get">
        <div class="form-group">
          <input type="text"  class="form-control" id="search" placeholder="Search Here.." value="{{ request('search') }}">
        </div>
        <button type="submit" id="search" class="btn btn-default">Submit</button>
      </form>
    </div>

    <div class="container"  style=" max-width: 1150px;" >
      <table class="table table-bordered" style=" margin-top: 60px; font-family:timesnewroman">
        <thead class="text-justify">
        <tbody class="table-striped" id="tabledata">
          <tr class="table-info" style="font-weight:bold;font-size:20px;">
            <th class="text-justify"><strong> Name </strong></th>
            <th class="text-justify"><strong> Email</strong></th>
            <th class="text-justify"><strong> PhoneNumber</strong></th>
            <th class="text-justify"><strong> Action </strong></th>
          </tr>
          @foreach($users as $user)
          <tr class="table-info" style="font-weight: bold ;font-size:15;font-family:timesnewroman;background-color:#f9f9f9">
            <td>{{$user->name}}</td>
            <td>{{$user->email}}</td>
            <td>{{$user->phno}}</td>
            <td>
              <a href="{{ route('show',$user->id) }}">
                <span class="glyphicon glyphicon-eye-open" style=" color:#00a0df"></span>
              </a> &nbsp;
              <a href="{{ route('edit',$user->id)}}">
                <span class="glyphicon glyphicon-pencil" style=" color:green">
              </a>&nbsp;
              <a href="{{ route('delete',$user->id) }}"  onclick="return confirm('Are you sure to delete?')">
                <span class="glyphicon glyphicon-trash" style=" color:red"></span>
              </a>
            </td>
          </form>  
        </tr>
        @endforeach
      </tbody>
      </thead>
    </table>

Controller search function:

public function search(Request $request)
{
  $search = $request->id;
  if (is_null($search)) {
    return view('admin.datas.create');        
  } else {   
    $users = data::where('name','LIKE',"%{$search}%")
                   ->get();
    return view('admin.datas.create',compact('users'));
        // return view('demos.livesearchajax')->withPosts($posts);
  }
}

Answer 1

OK. so problem is in you jquery

Solution 1 :

First add id to your form :

<form id="search-form" class="navbar-form navbar-right" method="get"> 

       // id is added on above line

      <div class="form-group">
       <input type="text"  class="form-control" id="search" placeholder="Search Here.." 
             value="{{ request('search') }}">
     </div>
     <button type="submit" id="search" class="btn btn-default">Submit</button>
  </form>

and for jquery use :

<script>
    $(document).ready(function(){
    $("#search-form").on('submit',function(e){  // Use form submit event
      e.preventDefault();
      var str=  $("#search").val();
      if(str == "") {
         $( "#tabledata" ).html( data );   
       } else {
          $.get( "{{ url('create?id=') }}"+str, 
          function( data ) {
             $( "#tabledata" ).html( data );   
         });
        }
     });  
  }); 
</script>

Solution 2 :

Change your button type from submit to button so, that it doesn't submit the form

<form class="navbar-form navbar-right" method="get">
 <div class="form-group">
   <input type="text"  class="form-control" id="search" placeholder="Search Here.." 
         value="{{ request('search') }}">
 </div>
 <button type="button" id="search" class="btn btn-default">Submit</button>

 // type changed on above line

And don't use click event on button element it will bind to all buttons on current page use "#search" id to bind click event

<script>
$(document).ready(function(){
   $("#search").on('click',function(e){  // Use button id to bind event