动态php id JQuery ajax输出不会改变

时间:2017-07-18 01:29:12

标签: javascript php jquery ajax

在新页面上选择了一个按钮后,所有信息都在那里,但是无论何时点击另一个,第一个信息仍然存在,并且在页面刷新之前不会改变。

帮助我通过这个会吗?

按钮

<?php while($b = mysqli_fetch_assoc($equery)): ?>
                <button  type="button" onclick="modal(<?=$b['id'];?>)" class="w3-btn w3-border" style="width: 260px; display: inline-block; margin: 9px">
                    <img src="">
                    <h3><?php echo $b['product'];?></h3>
                    <h5>Descritopm</h5>
                    <h6></h6>
                </button>
            <?php endwhile;?>

js:

 function modal(id){
                var data = {"id" : id};
                jQuery.ajax({
                    url : <?=BASEURL;?>+'includes/modal.php',
                    method : "post",
                    data : data,
                    success: function(data){
                        jQuery('body').append(data);
                        jQuery('#mod').modal('show');
                    },
                    error: function(){
                        alert("IDK")
                    }
                });
            }

模态:

    <?php
require_once '../core/init.php';
$id = $_POST['id'];
$id =(int)$id;
$sql = "SELECT * FROM aisle WHERE id = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);

?>

<!-- Modal -->
<?php ob_start();?>
<div id="mod" class="modal fade" role="dialog" tabindex="-1">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title w3-center"><?=$product['product'];?></h3>
      </div>
      <div class="modal-body">
        <p><?=$product['aisle'];?></p>
        <p>$<?=$product['price'];?></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<?php echo ob_get_clean();?>

1 个答案:

答案 0 :(得分:1)

问题出在这里

jQuery('body').append(data);

此行将append更多模态,许多模式将显示在您的页面上。你应该这样做。在body标签内创建一个名为contents_from_ajax的div标签,然后使用它。

jQuery('#contents_from_ajax').html(data);

此代码将删除所有旧模态并创建一个新模态而不是追加,然后它将正常工作。

希望这个帮助