Function only runs after first dropdown selection

Question

I currently have a form that will take the dropdown selection in

rebates.php

and use an Ajax function that sends it to

update.php

which will display table data based on queries that are run using the dropdown selection. The form has an

action=""

so the page does not actually reload.

I will be having multiple tables displayed on my webpage. However, some table

tds

may be empty so I want to hide those tables. Currently, I have a function in my

update.php

page that will hide any empty

td

tables. However, that only works on the first dropdown selection. If I select another item from my dropdown that contains empty

td

tables, then those will not be hidden as this would be a second selection. How can I change this so that all empty

td

tables will be hidden no matter if it is the first selection or a second, third, etc selection?

Form/Dropdown (

rebates.php

):

<form name="myForm" action="">



<!-- Dropdown List -->

    <select name="master_dropdown" id="mr_id">



    <script>

    document.querySelector('#mr_id').addEventListener('change', updateSelection, false);

    document.querySelector('#mr_id').addEventListener('change', updateSelection, false);



    function updateSelection(event) {



    updatetable(this.form);

    }

    </script>



    <option selected value="select">Choose a Master Supplier Title</option>

        <?php foreach($master_supp->fetchAll() as $master) { ?>

            <option data-name="<?php echo $master['Supplier_Group_Name'];?>">

                <?php echo $master ['Supplier_Group_Name'];?>

            </option>

        <?php } ?>

    </select>

</form>

Javascript (

rebates.js

):

// Reads what the user selects from the drop down list and displays table when a selection is made

function updatetable(myForm) {   



    var selIndex = myForm.selectedIndex;

    console.log();

    var selName = $( "#mr_id option:selected" ).text().trim();

    console.log(selName);



$.ajax ({

    url: "update.php",

    method: "POST",

    data: {

        mr_id : selName

    },

    beforeSend: function () {

    },

    success: function(data){

        $(".table_div").html(data);

    }

 });



}

Javascript inside

head

tag in

update.php

:

<script>

    $('table').each(function() {

        if($(this).find('tr').children("td").length < 1) {

        $(this).hide();

      }

    });

</script>

I have left out the queries and tables themselves as I don't think they should be needed to answer this question. However, if they would be helpful I can post them. I assume I can just use the general

table

identifier in the function and not a specific

class

or

id

.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

If I understood correctly, you need to refresh your view after the AJAX call. In other words, you have to run your $('table').each(function() {...} code every time the AJAX call is a success. Try including that after the $(".table_div").html(data) line in your AJAX success call.

Function only runs after first dropdown selection

Sign up