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 .

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.