Clearing a DB call after you close modal - php

Question

On my about the artist page when you click on the words button, and the will open a modal that gets information from a DB. Right now when you click on one artist button, close the modal, and then click on another artist both artist information will pop up. What I am trying to do is make sure the information only shows one artist at a time. I'm not sure if there is an issue with my ajax, or my model.
Here is a link to my live site now
Model
<?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 Artist Page
<?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">×</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);
}});
});
});
Modal
<?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

It's in your button click event:
$(".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);
}
});
});
});

Answer 2

lets empty it first since ajax can have a time lag...that way any time it takes to get new data it won't be displaying old data:
$(".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() adds to existing html and does not remove it thus you kept adding each time. If element is empty it won't matter what insertion method is used
NOTE: switched to on() instead of one() which is only intended to be used for a single event