关闭模式后清除数据库调用答案

【问题标题】：Clearing a DB call after you close modal关闭模式后清除数据库调用
【发布时间】：2015-10-18 07:15:11
【问题描述】：

在我的关于艺术家页面上，当您单击单词按钮时，将打开一个从数据库获取信息的模式。现在，当您单击一个艺术家按钮，关闭模式，然后单击另一位艺术家时，两个艺术家信息都会弹出。我要做的是确保信息一次只显示一位艺术家。我不确定我的 ajax 或我的模型是否有问题。

Here 现在是我的实时网站的链接

型号

    <?php 


class Artist_get_model extends CI_Model {
    function getData() {
        // $query = $this->db->get_where("artist_content", array(" " => $page));
        $query = $this->db->query("SELECT * from artist_content");
        return $query;
    }
// FIRST LAST NAME 
// MODEL CHANGES 
// SELECT * from artist_content" where lastname = 
    function modalData($lastname) {

        $query = $this->db->query("SELECT * FROM artist_content WHERE last_name = '$lastname'");
        return $query;
        // return $lastname;
    }
}
?>

PHP 艺术家页面

               <?php  
           // echo $query->num_rows();
           echo '<div class="container">';
           echo '<div style="margin-top: 13%;" class=" artistHeader page-header">';
           echo '<h1>Meet the artist</h1>';
           echo '</div>';
           echo '</div>';

           echo '<div class="panel panel-default profile">';
           echo ' <div class="panel-body">';
           echo '<div class="container-fluid">';
           echo '<div class="row">';
           for( $i = 0 ; $i < $query->num_rows() ; $i++ ){
          $row = $query->row_array($i);
           // echo $row['workLink_img2'];



           // for()
          // echo '<div class="row"';
          echo '<div id="noPadding" class="col-md-4">';
          echo '<div class="thumbnail noPadding">';
          //    PROFILE IMG 
          echo '<img src="'.$row['profile_img'].'" alt=""></img>';

          echo '<div class="caption">';
          //  NAME 
          echo '<h3 class="artistName">'.$row['first_name'].' '.$row['last_name'].'</h3>';

          echo '<p><a class="button btn btn-primary " id="hello" role="button" data-toggle="modal" data-target="#myModal" data-artist="'.$row['last_name'].'">Words</a>';
          echo '</div>';

          echo '</div>';
          echo "</div>";
          // echo "</div>";
          // Modal
          // Modal content

          echo '<div id="myModal" class="modal fade" role="dialog">';
          echo '<div class="modal-dialog modal-lg">'; 

          echo '<div class="modal-content">';
          echo '<div class="modal-header">';
          echo '<button type="button" class="close" data-dismiss="modal">&times;</button>';
          // GET NAME FROM DB
          echo '<h4 class="modal-title">'.$row['first_name'].' '.$row['last_name'].'  </h4>';
          echo '</div>';
          echo '<div class="modal-body">';
          echo '<div class=" artistInfo containter-fluid">';
          // LOAD PHP FILE
          echo '</div>';
          echo '</div>';
          echo '<div class="modal-footer">';
          echo '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
          echo '</div>';
          echo '</div>';

          echo '</div>';
          echo '</div>';

<script>
$(document).ready(function(){


$(".button").one("click", function(){
    $.ajax({
      type: "POST",
      url: "/Artists/modal",
      data: ({lastname: $(this).attr("data-artist") }),
      success: function(result){
        $(".artistInfo").append(result);
    }});
});
});

模态

 <?php  


 for( $i = 0 ; $i < $artist->num_rows() ; $i++ ){
$row = $artist->row_array($i);

echo '<img  class="pull-left img-responsive col-md-8" src=" '.$row['profile_img'].' ">';

echo '<div class="row">';
//    SIDE IMG 
echo '<a href="'.$row['workLink_img1'].'">';
echo '<img id="partsIm "class=" col-sm-4 pull-left img-thumbnail" src="'.$row['work_img1'].'"></img>';
echo '</a>';
//    SIDE IMG 
echo '<a href="'.$row['workLink_img2'].'">';
echo '<img id="partsIm" class="col-sm-4 pull-left img-thumbnail" src="'.$row['work_img2'].'"></img>';
echo '</a>';

//    TEXT
echo '<p style="clear:both">'.$row['text'].'</p> ';
echo '</div>'; 
echo '</div>'; 
}

?>

【问题讨论】：

您使用 jquery 添加/附加到模态，因此您需要在关闭时将其清除。
为什么不用.html(result) 而不是追加
@frz3993 jQuery 对我来说还是很新，我不明白两者之间的区别。一个加载速度会比另一个快。
我不认为一个加载速度会比另一个快，至少它不明显。但是ajax需要一些时间。当您追加到一个空类时，它会向它添加一个元素，下一个 ajax 调用将在它下面添加另一个元素，依此类推。但是.html() 将替换类中的任何内容。我希望你能明白我在说什么。

标签： php jquery ajax twitter-bootstrap codeigniter

【解决方案1】：

在你的按钮点击事件中：

$(".button").one("click", function(){
        $.ajax({
          type: "POST",
          url: "/Artists/modal",
          data: ({lastname: $(this).attr("data-artist") }),
          success: function(result){
              //you're appending multiple data here
              // $(".artistInfo").append(result);
              // this instead:
              $(".artistInfo").html(result);
          }
          });
    });
});

【讨论】：

【解决方案2】：

让我们先清空它，因为 ajax 可能会有时间延迟...这样任何时候获取新数据都不会显示旧数据：

$(".button").on("click", function(){
    $(".artistInfo").empty();// clear old html out
    $.ajax({
      type: "POST",
      url: "/Artists/modal",
      data: ({lastname: $(this).attr("data-artist") }),
      success: function(result){
        $(".artistInfo").append(result);
    }});
});

append() 添加到现有的 html 并且不会删除它，因此您每次都不断添加。如果元素为空，则使用哪种插入方法无关紧要

注意：切换到 on() 而不是 one()，后者仅用于单个事件

【讨论】：