Question

所以我有一个选择框，该选择框触发AJAX调用，以从显示引导程序选项卡的MYSQL检索信息。我正在尝试再次调用AJAX，以根据其值在每个选项卡中显示内容，但似乎无法返回结果。

以下是生成标签的代码的一部分：

$result= $conn->query($sql);
if ($result->num_rows > 0) {
echo"
<div id=\"tabs\">
    <ul class=\"nav nav-tabs\">";
    while($row = $result->fetch_assoc()) {
    echo"
        <li class=\"nav-item\">
        <a class=\"nav-link\" id=\"gruppo\" value=\"".$row["id_gruppo"]."\" data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
        <div id=\"show1\"></div>
        </li>";
      }
    echo"</ul></div>";
}

这是我随附的AJAX代码：

<script type="text/javascript">
  $(document).ready(function(){ 
    $("#gruppo").change(function(){ 
      var id_gruppo = $(this).val(); 
      var dataString = "id_gruppo="+id_gruppo; 

      $.ajax({ 
        type: "POST",
        url: "getData.php",
        data: dataString,
        success: function(result){
          $("#show1").html(result);
        }
      });

    });
  });
</script>

为了测试是否发生任何事情，这是getData.php页面的代码

 if(!empty($_POST["id_gruppo"]))
 {
  $id_gruppo=$_POST["id_gruppo"];
  echo"Gruppo:".$id_gruppo;
 }

Answer 1

您对多个标签使用了相同的ID，因此不会触发该事件：

... <a class=\"nav-link\" id=\"gruppo\"> ...

尝试一下：首先像这样定义您的函数：

function doThisOnChange(id){ 
  var id_gruppo = id; 
  var dataString = "id_gruppo="+id_gruppo; 

  $.ajax({ 
    type: "POST",
    url: "getData.php",
    data: dataString,
    success: function(result){
      $("#show1").html(result);
    }
  });

}

然后您的PHP部分变为：

...
  while($row = $result->fetch_assoc()) {
    echo"
            <li class=\"nav-item\">
                <a class=\"nav-link\" id=\"gruppo-".$row["id_gruppo"]."\" value=\"".$row["id_gruppo"]."\" onChange=\"doThisOnChange(".$row["id_gruppo"].") \"
data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
                <div id=\"show1\"></div>
            </li>";
  }

...

Answer 2

这是因为引导程序不知道有新的tab元素进入。通过调用tab('show)

启用选项卡

.ajax({ 
    type: "POST",
    url: "getData.php",
    data: dataString,
    success: function(result){
      $("#show1").html(result);
      $('.nav-item).tab('show');
    }
});

Answer 3

感谢@Mabrouki Fakhri，我找到了解决方案。

每个标签都调用的功能：

<script>
   function GetDataFromDB(id_gruppo){
        $.ajax({ /* THEN THE AJAX CALL */
            type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
            url: "getData.php", /* PAGE WHERE WE WILL PASS THE DATA */
            data: "id_gruppo="+id_gruppo, /* THE DATA WE WILL BE PASSING */
            success: function(result1){ /* GET THE TO BE RETURNED DATA */
            $("#home").html(result1); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
        }
    });
}
</script>

生成每个标签的代码：

  if ($result->num_rows > 0) {
        echo"
        <div id=\"tabs\">
            <ul class=\"nav nav-tabs\">";
        while($row = $result->fetch_assoc()) {
        echo"
                <li class=\"nav-item\">
                    <a class=\"nav-link\" id=\"gruppo\" onclick=\"GetDataFromDB(".$row["id_gruppo"].");\" value=\"".$row["id_gruppo"]."\" data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
                </li>";
      }
            echo"
                </ul>
            </div>";
    }

无法使用PHP生成的Bootstrap选项卡使用AJAX检索数据

3 个答案: