关闭模态

Question

当我点击单词按钮时，关于艺术家页面，将打开一个从数据库获取信息的模态。现在，当您单击一个艺术家按钮，关闭模式，然后单击另一个艺术家时，将弹出两个艺术家信息。我要做的是确保信息一次只显示一位艺术家。我不确定我的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>'; 
}

?>

Answer 1

首先清空它，因为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中，并且不会将其删除，因此您每次都会添加。如果element为空，那么使用什么插入方法无关紧要

注意：切换为on()而非one()，仅用于单个活动

Answer 2

它出现在您的按钮点击事件中：

$(".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);
          }
          });
    });
});