0

I want to create a searching filters and display the output using ajax.

This is the button for submit the data:

   {!! Form::open(['method' => 'POST', 'action' => 'Modul\CarianAnugerahController@search']) !!}

   //Form for filter here...

   {{ Form::submit('Cari', ['class' => 'btn btn-primary', 'id' =>'search']) }}
    {!! Form::close() !!}

This is the output table under the form:

  <div class="panel panel-default">
                  <div class="panel-heading">Senarai Calon Anugerah</div>
                     <div class="panel-body">
                            @if (session('status'))
                                <div class="alert alert-success">
                                    {{ session('status') }}
                                </div>
                            @endif


                             @if(Auth::check())
                                <div class="container table-responsive col-lg-12">
                                    <!-- <div class="container text-center"> -->      
                                        <table class="table table-striped table-bordered" id="calon_table" >
                                            <thead>
                                              <tr>
                                                <td class="text-center col-lg-3"><strong>Name</strong></td>
                                                <td class="text-center"><strong>Action</strong></td>
                                                <!-- <td class="text-center"><strong>Lihat Rekod</strong></td> -->
                                              </tr>
                                            </thead>

                                        <tbody id="calon_anugerah">

                                        </tbody>
                                        </table>
                                    <!-- </div> -->

                                </div>
                            @endif
                            @if(Auth::guest())
                                <a href="/login" class="btn btn-info"> Anda perlu log masuk.</a>
                            @endif
                     </div>
                  </div>
    </div>

The ajax code to get the data is:

 <script type="text/javascript">
  $('#search').on('click', function(){

    $.get("{{ URL::to('search-calon') }}",function(data){

        $.each(data, function(i, value){
            // alert(value.name);
            var tr =$("<tr/>");
              tr.append($("<td/>",{
                  text : value.name
              }))
              $('#calon_anugerah').append(tr);
        });
    })
  })
</script>

I had queried the data using the code in CarianAnugerahController@search:

 $query = DB::table('itemregistrations')
    ->select('itemregistrations.ItemRegistrationID','itemregistrations.name', 'itemregistrations.Nobadan');

    if(request('umur')) {
        $query->whereRaw('YEAR(CURDATE()) - lahir_yy >= ?', [request('umur')]);  
    }

    if(request('negeri_lahir')) {
        $query->where('NegeriID', request('negeri_lahir'));
    }

    if(request('kategori')) {
        $query->where('CategoryID', request('kategori'));
    }

    if(request('pangkat')) {
        $query->where('OperasiID', request('pangkat'));
    }

$newitem = $query->get();

return response($newitem);

This is the route:

 Route::resource('carian_anugerah', 'Modul\CarianAnugerahController');
 Route::post('/search-calon', 'Modul\CarianAnugerahController@search');

I can get the value but it doesn't display in table..it shows the output in json format in a white page..

example output..in browser.

example output in browser

What is missing in the ajax code?

joun
  • 656
  • 1
  • 8
  • 25
  • 1
    ```it shows the output in json format in a white page``` . Did not get what are you saying? Where you get that response in ```browser``` or in ```network tab```. Post screenshot if possible. – Prashant Deshmukh..... Jan 03 '19 at 11:11
  • I had insert the image in the updated question..thank you – joun Jan 04 '19 at 00:36
  • Let me guess... the element with `id` "search" is a submit button in a `
    `. If so, I swear I've closed four or five questions with this problem in the last couple of days. Is there some bad tutorial going around?
    – Phil Jan 04 '19 at 01:10
  • 1
    Possible duplicate of [prevent refresh of page when button inside form clicked](https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) / [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) – Phil Jan 04 '19 at 01:12
  • yes phil, search is the submit button..i am following this tutorial https://www.youtube.com/watch?v=ZkGNY07aZh0 – joun Jan 04 '19 at 01:13
  • Hi @Jaun, is it that when you click `#search` it redirects to `/search-calon`? if yes, could you show us the button html markup? possibly Phil is correct about your problem if its a submit button or a link that points to the `/search-calon`. quick solution: use [`preventDefault()`](https://api.jquery.com/event.preventdefault/) on your click event. – Bagus Tesa Jan 04 '19 at 01:22
  • I just updated the question with the submit button code – joun Jan 04 '19 at 01:27
  • the tutorial is not submitting any data to retrieve the data in database..so maybe there is some conflicts in my code.. – joun Jan 04 '19 at 01:35
  • anyone have idea to fix the problem? thanks – joun Jan 07 '19 at 01:13

0 Answers0