下拉选择上的新ajax请求 [英] new ajax request on drop down selection

问题描述

我有三个表，并使用选择列表元素显示每个表，并使用ajax和jquery返回表.我希望每当我从列表中选择一个新表时，ajax都应仅从该表中获取数据.

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 list ajax should bring me data only from that table.

这是我的表格:

<div class="panel">
                <div class="panel-heading">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Term</span>
                            <!-- I passed the tables name as values for a specific period -->
                            <select name="term" class="form-control" id="term">
                                <option value="">Select Period</option>
                                <option value="period_one">1st Period</option>
                                <option value="period_two">2nd Period</option>
                            </select>
                        </div>
                </div>
                <div class="panel-body">
                    <table class="table table-responsive table-bordered table-condensed table-striped table-hover" id="dataTable">
                        <thead>
                            <tr>
                                <th>Student Name</th>
                                <th>Subject</th>
                                <th>Class</th>
                                <th>Score</th>
                            </tr>
                        </thead>
                        <tbody id="periodTable">

                        </tbody>
                    </table>
                </div>
            </div>

问题不是我没有得到理想的结果.我得到的结果是我想要的，这就是为什么我觉得不需要从findGrades.php添加代码的原因.

The problem is not that I'm not getting the desired result. I'm getting the result that I want that's why I feel that there's no need for me to add codes from findGrades.php.

这是我的脚本:

$(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){
            // Lfrankie solution
            $("#periodTable").replaceWith('<tbody id="periodTable"></tbody>');

           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);

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

    }

 });
});

我遇到的问题是，每当我选择一个表时，它都会使结果很好，但是当我选择一个新表时，它将新结果添加到旧结果中.

The problem I'm having is whenever I select a table it brings the result fine, but when I select a new table it adds the new result to the old result.

例如:表1:

1. 猫
2. 老鼠

表2 1.猫 2.老鼠 3.狗 3.山羊

table 2 1. cat 2. rat 3. dog 3. goat

结果2应该只显示"dog"和"goat".我意识到这是因为我添加数据 $(#periodTable").append(htmlData); 的方式.我尝试将其更改为此 $(#periodTable").html(htmlData); ，它仅返回表1中的"cat"和表2中的"rat"之类的表中的一项

Whereas result 2 should only show 'dog' and 'goat'. I realize it's because of the way I'm adding data $("#periodTable").append(htmlData);. I have tried changing it to this $("#periodTable").html(htmlData); which only returns a single item from a table like 'cat' from table 1 and 'rat' from table 2

我如何有效地使它工作.让我知道是否需要更多信息.

How can I effectively get this working. Let me know if more information is needed.

更新:根据某些人的要求，我刚刚添加了我的html.另外，我还提到了一个重要方面，我忘记提及"Datables"了.

Update: Just added my html as requested by some. Also I included a essential aspect I forget to mention 'Datables', which I added also.

推荐答案

在没有看到页面的 HTML 的情况下，我只能猜测您是从一个空表开始的.您的第一个AJAX调用将追加第一组数据.您的第二个呼叫附加了它的数据，因为这就是您要它执行的操作.

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.

要解决此问题，您必须在success()函数开始时替换空表.然后，无论是第一次调用还是第 n 次，您都可以安全地附加新数据.

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.

这篇关于下拉选择上的新ajax请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！