関数は最初のドロップダウン選択後にのみ実行されます

Question

私は現在、rebates.phpでドロップダウン選択を受け取り、update.phpに送るAjax関数を使用して、ドロップダウン選択を使って実行されるクエリに基づいてテーブルデータを表示するフォームを持っています。フォームにaction=""があるため、ページが実際にリロードされません。

私のウェブページには複数のテーブルが表示されます。ただし、一部のテーブルtdsが空の場合がありますので、これらのテーブルを非表示にしたい場合があります。現在、ページに空のtdテーブルを隠す機能があります。ただし、これは最初のドロップダウン選択でのみ機能します。空のtdテーブルを含む別のアイテムをドロップダウンリストから選択すると、2番目の選択肢として非表示になります。どのように最初の選択または2番目、3番目などの選択に関係なく、すべての空のtdテーブルが非表示になるようにこれを変更できますか？

フォーム/ドロップダウン（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をupdate.phpでheadタグ内：

<script> 
    $('table').each(function() { 
     if($(this).find('tr').children("td").length < 1) { 
     $(this).hide(); 
     } 
    }); 
</script> 

私はクエリを残しています私はそうではないので、テーブル自体をこの質問に答える必要があると思います。しかし、もし彼らが役に立ったら私はそれらを掲示することができます。私は関数内で一般的なtable識別子を使用することができ、特定のclassまたはidではないと仮定します。

Answer 1

私が正しく理解していれば、AJAXコールの後にビューを更新する必要があります。つまり、AJAX呼び出しが成功するたびに$('table').each(function() {...}コードを実行する必要があります。あなたのAJAX成功の呼び出しで$(".table_div").html(data)行の後にそれを含めてみてください。