New Ajax Request On Drop Down Selection

I have three tables and I'm displaying each one of them using a select list element and have ajax and jquery to return the tables. I want whenever I choose a new table from the lis

Solution 1:

Declare the variable htmlData before for loop and write $("#periodTable").html(htmlData); after for loop.

 $(document).ready(function() {
        $('#term').on('change', function() {
          /* Act on the event */var term = $('#term').val();

            if (term != '') {
              $.ajax({
                url:"findGrades.php",
                type:"post",
                data:{"term":term},
                dataType:"json",
                success:function(data){
                   var htmlData="";
                   for (var count = 0; count < data.length; count++) {
                        htmlData += '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';

                        htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';

                        htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';

                        if (data[count].score <= 69 ) {
                            htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                        } else {
                            htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                        }



                    }

                       $("#periodTable").html(htmlData);
                }
              });
            } else {
              $("#periodTable").html('');

            }

         });
        });

Solution 2:

Without seeing the HTML for your page, I can only guess that you start with an empty table. Your first AJAX call appends the first set of data. Your second call appends its data, because that's what you've asked it to do.

To fix this, you have to replace the empty table at the start of your success() function. You can then safely append the new data, whether it's the first time you call it or the n-th time.

Solution 3:

I think you should simply clear the html of $("#periodTable") before to populate it:

$(document).ready(function() {
$('#term').on('change', function() {
  /* Act on the event */var term = $('#term').val();

    //---> HERE BLANK THE periodTable <--- 
    $("#periodTable").html("");

    if (term != '') {
      $.ajax({
        url:"findGrades.php",
        type:"post",
        data:{"term":term},
        dataType:"json",
        success:function(data){
           for (var count = 0; count < data.length; count++) {
                var htmlData = '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>';

                htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>';

                htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>';

                if (data[count].score <= 69 ) {
                    htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                } else {
                    htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>';
                }

               //I feel this is where my problem lies
               $("#periodTable").append(htmlData);

            }
        }
      });
    } /* ELSE COULD BE REMOVED
      else {
      $("#periodTable").html('');

    }*/

 });
});