Очистка вызова БД после закрытия мода

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 и не удаляет его, поэтому вы постоянно добавляете его каждый раз. Если элемент пуст, не имеет значения, какой метод вставки используется

ПРИМЕЧАНИЕ: переключился на 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); 
      } 
      }); 
    }); 
});