Rataiczak24 Rataiczak24 - 1 year ago 100
HTML Question

Function only runs after first dropdown selection

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download