Laravel - Checkbox Filter if Null AJAX jQuery

Question

I have a column called decay. Either in the column there will be a past date or NULL. If there is a date, it means the object has left orbit or if its NULL the object is still in orbit.

What I am trying to do is to create a checkbox that allows me to filter my database to either display the object that is in orbit (NULL in column) or the object that has decayed (date in column).

I have already created a simple checkbox for my Laravel Blade file, my route and the controller for the page. I just need help with the Javascript and the Controller statement to filter it.

Blade:

<span><input type="checkbox" name="in-orbit" value="in-orbit">In Orbit</span>
<span><input type="checkbox" name="decayed" value="decayed">Decayed</span>

Javascript:

$('#decayed').on('change', function() {
  $value = $(this).val();
  $.ajax({
    type: 'get',
    url: '{{$launchsitename->site_code}}',
    data: {
      'search': $value
    },
    success: function(data) {
      $('#launchsatdisplay').html(data);
    }
  });
});

Please post the relevant Blade, HTML, and JS that you're using. Most likely you'll just need a simple arrayOfObjects.filter ((o) => o.decayed == null) in javascript or an equivalent in php — erapert
– erapert, Commented Aug 4, 2017 at 22:53
@erapert I have posted the Blade file. I just require help in creating the Javascript. — D. 777KLM
– D. 777KLM, Commented Aug 4, 2017 at 23:00
Could you post some more of the surrounding code? Are those spans being rendered in a blade loop or is it all javascript? — erapert
– erapert, Commented Aug 4, 2017 at 23:07

erapert · Accepted Answer · 2017-11-01 16:59:17Z

1

Try this:

<div>
    <label for="search">Search:</label>
    <input type="text" id="search" name="search"><br>
    <label for="decayed">Decayed:</label>
    <input type="checkbox" id="filter-for-decayed" name="decayed"><br>
    <div id="launchsatdisplay">
        <!-- javascript will put the results here -->
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
    var searchTerm = '', // keyup on #search fills this in
        updateData = function () {
            // called after ajax has completed successfully
            var displayData = function (searchData) {
                var $display = $('#launchsatdisplay'),
                    checkbox = document.getElementById ('filter-for-decayed'),
                    dataToDisplay = searchData;

                // if the checkbox is checked then we'll filter for
                // any items that are decayed
                // (decayed == null means the object has NOT decayed)
                if (checkbox.checked) {
                    dataToDisplay = dataToDisplay.filter (function (d) {
                        return d.decayed != null;
                    });
                }

                // clear the display area
                $display.html ('');

                // insert spans that hold the raw data
                // notice that "d" here is each data item
                // you can get fancy with how d is displayed
                dataToDisplay.forEach (function (d, i) {
                    $display.append (`<span>${d}</span>`);
                });
            };

            // now to actually fetch the data from the server
            $.ajax ({
                type: 'GET',
                url: '{{$launchsitename->site_code}}',
                data: { 'search': searchTerm }
            }).success (function (data) {
                displayData (data);
            });
        };

    // called when the checkbox is changed
    $('#filter-for-decayed').on ('change', function () {
        updateData ();
    });

    // called when the search field is typed into
    $('#search').on ('keyup', function () {
        searchTerm = $(this).val();
        updateData ();
    });
});
</script>

edited Nov 1, 2017 at 16:59

answered Aug 4, 2017 at 23:10

erapert

1,42312 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

D. 777KLM Over a year ago

I am trying to filter my database using AJAX. I don't think I would be able to do it with a blade foreach statement?

erapert Over a year ago

Correct, if you're using AJAX then you must use javascript, a php/blade foreach won't work.

D. 777KLM Over a year ago

I tried your code and the input part of it works. Unfortunately I am not able to filter using checkbox. From the code you provided my I can see that the function is wrapped in the input. What I want is for the input and the checkbox to be separate. So when I click on the checkbox, it filters the column in the database, not relaying on anything else. I think once you modify the JS a bit, it will be correct. I basically need a simple AJAX call for a checkbox.

erapert Over a year ago

Sorry I misunderstood. This latest edit should be closer to what you're looking for.

D. 777KLM Over a year ago

Thanks for your answer! That should work. One thing - do I need to do anything in my controller to make the filter work?

|

Collectives™ on Stack Overflow

Laravel - Checkbox Filter if Null AJAX jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related