How to show and hide from function if the data is empty it show the text else it dont?

Question

Hi i got some problem now that if the user select a type from drop down in the ajax it display the data given, where if the user select a type that contain no data value it will display no records found, how can i do it?

Some new update i have hide and show when my function is being call but is kind of bug as some type when select is show with the recyclables not found any fix?

Here the image below is not showing which is correct

Bug as there is data is still show the recyclable types not found

Correct as there is no data

 $("#recyclable-type").change(function(){
    var type = $(this).val();

    //show only checkbox having the  data-type attribute
    if ($(this).val()!="" && $(this).val()!=null) {
        // hide all checkbox
        $("#checkbox").find("li").hide();

        // filters by recyclable type
       if($("#checkbox").find("li[data-type='" + type + "']").show()){
                toggleRecord("noRecords");

       }

    } else {
        $("#checkbox").find("li").show();
        toggleRecord("success");
    }

        // console.log($(this).find("li[data-type='" + type + "']"));
    })


    function toggleRecord(state) {
        // The 'No Records' section toggles in case there are no records to be found when using the filter functions
        if (state=="success") {
            // Hides when there's at least one record being displayed
            $("#no-recyclable-records").hide();
        }else if (state=="noRecords") {
            $("#no-recyclable-records").show();
        }
    }

Here below is the snippet for html

 .container-body { border: 1px solid black; border-radius: 1px; margin-top: 20px; margin-left: 10px; } fieldset.Field { margin-top: 10px; padding: 0; height: 100%; } ul.checkbox { margin: 0; padding: 0; margin-left: 20px; list-style: none; } ul.checkbox li input { margin-right: .25em; }.container-body ul.checkbox li { float: left; min-width: 350px; } #no-recyclable-records { border: 1px solid rgb(0, 0, 0); padding: 5px; border: hidden; text-align: center; height: 120; justify-content: center; align-items: center;

 <div class="container position"> <div class="row"> <label for="recyclable-type" class="col-form-label"> <b>Recyclable Type:</b> </label> &nbsp;&nbsp; <select id="recyclable-type" name="recyclable-type" class=" custom-select col-4"> <option selected value="">All</option> </select> </div> </div> <div class="container-body "> <fieldset class="Field"> <ul id="checkbox" class="checkbox"> </fieldset> </ul> <div id="no-recyclable-records"> <h4>No Recyclable Records Found</h4> </div> </div>

Here is my ajax code

$.ajax({
                url: 'https://ecoexchange.dscloud.me:8090/api/get',
                method:"GET",
                },
                success:function(data,textStatus,xhr) {
                    // console.log(data);
                    for (let i = 0;i<data.length;i++) {
                        $("#recyclable-type").append(
                            `
                            <option value = "${data[i]["RecyclableType"]}">${data[i]["RecyclableType"]}</option>
                            `
                        );
                    
                    }
                },
                error:function(xhr,textStatus,err) {
                    console.log(err);
                }
            });


            $.ajax( {
            url: 'https://ecoexchange.dscloud.me:8090/api/get',
            type: 'GET',
            dataType: 'json',
            headers:{
                query: "RecyclableGet(0)",
                // Gets the apikey from the sessionStorage
                apikey: sessionStorage.getItem("apikey")
            },
            success: function(data) {
            //console.log(data);
            var html='';
            $.each(data, function(key, value) {
                var type = value.RecyclableType
                //console.log(type)
                html +='<li data-type="'+ type + '"><input type="checkbox" name="recyclable_id[]" value="'+value.RecyclableID+'"><label style="padding-left: 10px;">'+value.Name+'</label><br></li>';
                //console.log(value)
            });
            $('#checkbox').html(html);

            }
        });

        $("#recyclable-type").change(function(){
        var type = $(this).val();

        //show only checkbox having the  data-type attribute
        if ($(this).val()!="" && $(this).val()!=null) {
            // hide all checkbox
            $("#checkbox").find("li").hide();

            // filters by recyclable type
            $("#checkbox").find("li[data-type='" + type + "']").show();
        } else {
            $("#checkbox").find("li").show();
        }
            // console.log($(this).find("li[data-type='" + type + "']"));
        })

This is my ajax response

[
    {
        "RecyclableID": 1,
        "Name": "recyclable",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 3,
        "Name": "test recyclable 2",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 129,
        "Name": "test recyclable 4",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 131,
        "Name": "test recyclable 6",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 132,
        "Name": "test recyclable 7",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 133,
        "Name": "test recyclable 8",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 134,
        "Name": "test recyclable 34",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 138,
        "Name": "recyclable thing",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 139,
        "Name": "recyclable thing 2",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 153,
        "Name": "test recyclable 10",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 154,
        "Name": "test recyclable 11",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 155,
        "Name": "test recyclable 123",
        "RecyclableType": "test recyclable type 2"
    },
    {
        "RecyclableID": 159,
        "Name": "some recyclable name",
        "RecyclableType": "CC"
    },
    {
        "RecyclableID": 161,
        "Name": "some recyclable name 2",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 162,
        "Name": "recyclable 2",
        "RecyclableType": "test recyclable type 2"
    },
    {
        "RecyclableID": 165,
        "Name": "test recyclable 15",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 166,
        "Name": "test recyclable 18",
        "RecyclableType": "testing type"
    },
    {
        "RecyclableID": 167,
        "Name": "some recyclable name 23",
        "RecyclableType": "Ewaster"
    },
    {
        "RecyclableID": 168,
        "Name": "Lorem ipsum dolor sit amet, consectetur",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 169,
        "Name": "Copper",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 170,
        "Name": "Choking Bar",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 171,
        "Name": "Cabinet",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 172,
        "Name": "Cash Box",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 173,
        "Name": "Copper Telephone Cable",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 174,
        "Name": "Rope",
        "RecyclableType": "CC"
    },
    {
        "RecyclableID": 175,
        "Name": "Silver",
        "RecyclableType": "test recyclable type"
    }
]

This is how my website look like

So if user select Gold / Metal I should see No Recyclables Records Found as there no are value in it

How can i write my code for it?

Answer 1

your first AJAX have an additional square bracket under the method and you are using the $('#recyclable-type').change(function(){}); twice with two different behaviors, try to use only one and don't forget to mention the case of all records with an else if statement instead of else and this should do the work

Answer 2

 success: function(data) { 

here you have to read the data and if length is 0 then add li with no data found text inside otherwise do your list of items...