How to make search work in javascript in laravel

Question

I have a problem in how to make table search working in the javascript code. I have a different scenario. I am getting data through ajax So I need to add table thread in the javascript rather than in the html. But now I want a search for the table. I write also code for that to search but that's only working when my thread is in the html. Below is my code and it will give you a clear view. Try to read it in the editor because its a more complicated :). It is a search for each column

//Javascript

$(document).ready(function() {

  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
  });

  $('select[name="class_id"]').on('change', function() {
    var classID = $(this).val();
    if (classID) {

      $.ajax({

        url: '/attendance/ajax/' + classID,
        type: "GET",
        dataType: "json",
        success: function(data) {

          var markup = '';
          markup += '<tr><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 2%" class="align-middle text-center">#</th> <th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Attendance<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Date<input type="text" class="form-control" disabled></th> <th style="width: 15%;" class="align-middle text-center">Actions</th> <tr>';

          $.each(data, function(key, value) {

            markup += '<tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]"></td> <td><input type="hidden" value="' + value.id + '" name="id[]">' + value.id + '</td> <td><input type="hidden" value="' + value.student_id + '" name="student_id[]">' + value.student_id + '</td> <td><input type="hidden" value="' + value.first_name + '" name="first_name[]"><input type="hidden" value="' + value.last_name + '" name="last_name[]">' + value.first_name + ' ' + value.last_name + '<td><input type="hidden" value="' + value.attendance + '" name="attendance[]">' + value.attendance + '</td>' + '<td><input type="hidden" value="' + value.created_at + '" name="created_at[]">' + value.created_at + '</td>' + '<td style=" width=12%" class="text-center"> <a><button title="Edit" class="btn btn-outline-primary"><span class="fas fa-pencil-alt"></span></button></a> </td>' + '</td> <tr>';

          });
          $('table[id="studentsData"]').html(markup);
        }
      });
    }
  });
});

//Code for search

 $('body').on('click', '.filterable .btn-filter', function() {
                var $panel = $(this).parents('.filterable'),
                        $filters = $panel.find('.filters input'),
                        $tbody = $panel.find('.table tbody');
                if ($filters.prop('disabled') == true) {
                    $filters.prop('disabled', false);
                    $filters.first().focus();
                } else {
                    $filters.val('').prop('disabled', true);
                    $tbody.find('.no-result').remove();
                    $tbody.find('tr').show();
                }
            });

        $('body').on('input', '.filterable .filters input', function(e) {
                /* Ignore tab key */
                var code = e.keyCode || e.which;
                if (code == '9') return;
                /* Useful DOM data and selectors */
                var $input = $(this),
                        inputContent = $input.val().toLowerCase(),
                        $panel = $input.parents('.filterable'),
                        column = $panel.find('.filters th').index($input.parents('th')),
                        $table = $panel.find('.table'),
                        $rows = $table.find('tbody tr');
                /* Dirtiest filter function ever ;) */
                var $filteredRows = $rows.filter(function () {
                    var value = $(this).find('td').eq(column).text().toLowerCase();
                    return value.indexOf(inputContent) === -1;
                });
                /* Clean previous no-result if exist */
                $table.find('tbody .no-result').remove();
                /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
                $rows.show();
                $filteredRows.hide();
                /* Prepend no-result row if all rows are filtered */
                if ($filteredRows.length === $rows.length) {
                    $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="' + $table.find('.filters th').length + '">No Result Found</td></tr>'));
                }
            });

//Error

see this:https://stackoverflow.com/questions/43597336/how-create-search-filter-with-laravel-javascript — I_Al-thamary, Apr 07 '19 at 09:27
Not that's totally a different scenario. He has a problem with values. And i have problem in javascript search which is not working becuase my table thead is in javascript. And i did that because I used ajax for fetching data as you can see — Hasnain Kahn, Apr 07 '19 at 09:30

Zakaria Acharki · Answer 1 · 2019-04-08T16:41:07.627

0

Working sample.

Try to use event delegation on() instead like :

var body = $('body');

body.on('click', '.filterable .btn-filter', function() {
    alert('----1');
});

body.on('input', '.filterable .filters input', function(e) {
    alert('----2');
});

edited Apr 08 '19 at 16:41

answered Apr 08 '19 at 09:39

Zakaria Acharki

66,747
15
75
101

Sir it is giving me the duplicated Jquery selector – Hasnain Kahn Apr 08 '19 at 10:13
It is giving me that error in the editor and same result in the browser – Hasnain Kahn Apr 08 '19 at 10:18
update the question with the last version of your JS code and the screenshot of the error. – Zakaria Acharki Apr 08 '19 at 10:21
It's not an error, it's just a warning, could be bypassed by declaring the body at the top check my updated answer. – Zakaria Acharki Apr 08 '19 at 10:39
same result. And let me clear that my search button is in the html – Hasnain Kahn Apr 08 '19 at 10:42
I need more information about this, try to add just alerts inside the events as my updated answer do, to check if the code is reached or not. – Zakaria Acharki Apr 08 '19 at 13:44
Yes the alert is working. It showing me that 1 alert – Hasnain Kahn Apr 08 '19 at 13:52
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191455/discussion-between-zakaria-acharki-and-hasnain-kahn). – Zakaria Acharki Apr 08 '19 at 13:56

How to make search work in javascript in laravel

1 Answers1

Linked