Ajax polling to only update data
https://stackoverflow.com/questions/11809933
-
24-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm needing my users stream to update every 10 seconds to update such things as newly inserted status from other users, the timestamp and the latest amount of added comments.
Now I can use the below, but the problem I face is when I post into the textarea, it takes 10 seconds for the status a user posts to be inserted followed by the same status being added every ten seconds after that..Just under a different id.
All I need the polling to do is select the data that I echo out in the insert.php page and not actually add a new comment every 10 seconds. Is it possible to go about this a different way to just select the response data?
<script>
$(document).ready(function(){
$("form#myform").submit(function(event) {
event.preventDefault();
var content = $("#toid").val();
var newmsg = $("#newmsg").val();
setInterval(function(){
$.ajax({
type: "POST",
url: "insert.php",
cache: false,
dataType: "json",
data: { toid: content, newmsg: newmsg },
success: function(response){
$("#homestatusid").prepend("<div id='divider-"+response['streamitem_id']+"'><div class='userinfo'><a href='/profile.php?username="+response['username']+"'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><div style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('"+response['streamitem_id']+"');\">X</div><a href='/profile.php?username="+response['username']+"'>"+response['first']+" "+ response['middle']+" "+response['last']+"</a><span class='subtleLink'> said</span><br/><a class='subtleLink' style='font-weight:normal;'>"+response['streamitem_timestamp']+"</a><hr>"+newmsg+"<div style='height:20px;' class='post_contextoptions'><div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_"+response['streamitem_id']+"' onclick=\"toggle_comments('comment_holder_"+response['streamitem_id']+"');clearTimeout(streamloop);swapcommentlabel(this.id);\">Write a comment...</a></div><div id='streamlike'><a id='likecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"likestatus("+response['streamitem_id']+",this.id);\"><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'>Like</div></a><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'></div></div><div id='streamdislike'><a id='dislikecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"dislikestatus("+response['streamitem_id']+",this.id);\"><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'>Dislike</div></a><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'></div></div></div><div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'><div id='comment_list_"+response['streamitem_id']+"'><table width=100%><tr><td valign=top width=30px><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><td valign=top align=left><div class='stream_comment_inputarea'><input type='text' name='content' style='width:100%;' class='input_comment' placeholder='Write a comment...' onkeyup='growcommentinput(this);' autocomplete='off' onkeypress=\"if(event.keyCode==13){addcomment("+response['streamitem_id']+",this.value,'comment_list_"+response['streamitem_id']+"',"+response['id']+",'"+response['first']+" "+ response['middle']+" "+response['last']+"');this.value='';}\"><br/></div></div>");
}
});
}, 10000);
return false
});
});
</script>
<?php
session_start();
require"include/rawfeeds_load.php";
$user1_id=$_SESSION['id'];
if(isset($_POST['toid'])){
if($_POST['toid']==""){$_POST['toid']=$_SESSION['id'];}
if(isset($_POST['newmsg'])&isset($_POST['toid'])){
if($_POST['toid']==$_SESSION['id']){
rawfeeds_user_core::create_streamitem("1",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);
}else{
rawfeeds_user_core::create_streamitem("3",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);
}
}
}
$json = array();
$check = "SELECT streamitem_id FROM streamdata WHERE streamitem_creator='$user1_id' ORDER BY streamitem_id DESC";
$check1 = mysql_query($check);
$resultArr = mysql_fetch_array($check1);
$json['streamitem_id'] = $resultArr['streamitem_id'];
mysql_free_result($check1);
$check = "SELECT streamitem_timestamp FROM streamdata WHERE streamitem_creator='$user1_id' ORDER BY streamitem_timestamp DESC";
$check1 = mysql_query($check);
$resultArr = mysql_fetch_array($check1);
$json['streamitem_timestamp'] = Agotime($resultArr['streamitem_timestamp']);
mysql_free_result($check1);
$check = "SELECT username, id, first, middle, last FROM users";
$check1 = mysql_query($check);
$resultArr = mysql_fetch_array($check1);
$json['username'] = $resultArr['username'];
$json['id'] = $resultArr['id'];
$json['first'] = $resultArr['first'];
$json['middle'] = $resultArr['middle'];
$json['last'] = $resultArr['last'];
mysql_free_result($check1);
echo json_encode($json);
?>
HTML/PHP page
<?php
if(isset($_SESSION['id']))
{
echo "<strong>Welcome ".$data['fullusersname']." </strong>";
}
else
{
echo "You don't belong here Please log in to your account <br/><a href=\"index.php\">Log in</a>!";
}
?>
</div>
<body>
<div id="responsecontainer"></div>
<?php
if(!isset($_SESSION['id'])){
}else{
?>
<? $user1_id=$_SESSION['id']; ?>
<link href="js/dependencies/screen.css" type="text/css" rel="stylesheet" />
<div class="userinfo"><div id="divider">
<div class="form">
<form id="myform" method="POST" class="form_statusinput">
<input type="hidden" name="toid" id="toid" value="<?php echo $user1_id; ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed">
</form>
</div></div></div></div></body>
<div id="homestatusid"></div>
<?php
//FRIENDSHIPS
$following_string=$_SESSION['id'];
$sql_follows="SELECT * FROM friends WHERE user1_id=".$_SESSION['id']." AND status=2 OR user2_id=".$_SESSION['id']." AND status=2";
$query_follows=mysql_query($sql_follows) or die("Error finding friendships");
if($query_follows>0){
$friendlist="(".$_SESSION['id'].",";
$t=0;
while($follow=mysql_fetch_array($query_follows))
{
if($follow['user1_id']==$_SESSION['id']){
if($t>0){
$friendlist=$friendlist.",";
}
$friendlist=$friendlist. $follow['user2_id'];
}else{
if($t>0){
$friendlist=$friendlist.",";
}
$friendlist=$friendlist. $follow['user1_id'];
}
$t=$t+1;
}
$friendlist=$friendlist.")";
}
//STREAMDATA
$badcall = "(".$_SESSION['id'].",)";
if($friendlist==$badcall){
$friendlist="(".$_SESSION['id'].")";
}
if(isset($_GET['limit'])){
$sqllimit = $_GET['limit'];
}else{
$sqllimit = 20;
}
$call="SELECT * FROM streamdata WHERE streamitem_target= $following_string OR streamitem_creator = $following_string OR streamitem_creator IN $friendlist AND streamitem_target IN $friendlist ORDER BY streamitem_timestamp DESC LIMIT 20";
$chant= mysql_query($call) or die(mysql_error());
$num = mysql_num_rows($chant);
if($num>0){
while($streamitem_data = mysql_fetch_array($chant)){
echo"<body><div id='divider-".$streamitem_data['streamitem_id']."'><div class='userinfo'>";
if($streamitem_data['streamitem_type_id'] == 1||$streamitem_data['streamitem_type_id'] == 3){
echo "";
}else{
echo "";
}
$poster_name = rawfeeds_user_core::getuser($streamitem_data['streamitem_creator']);
$target_name = rawfeeds_user_core::getuser($streamitem_data['streamitem_target']);
if($streamitem_data['streamitem_creator']==$_SESSION['id']){
echo "<div style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('".$streamitem_data['streamitem_id']."');\">X</div>";}
if($streamitem_data['streamitem_type_id'] == 1||$streamitem_data['streamitem_type_id'] == 3){
if(!($streamitem_data['streamitem_type_id']==1)){
echo "<a href='/profile.php?username=".$poster_name['username']."'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped".$streamitem_data['streamitem_creator'].".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>";
echo "<a href='/profile.php?username=".$target_name['username']."'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped".$streamitem_data['streamitem_target'].".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>";}
if(!($streamitem_data['streamitem_type_id']==3)){
echo "<a href='/profile.php?username=".$poster_name['username']."'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped".$streamitem_data['streamitem_target'].".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>";}
$cont = stripslashes($streamitem_data['streamitem_content']);
if(!($streamitem_data['streamitem_type_id']==1)){
//$cont = htmlentities($cont);
$cont = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a class='user_link' href=\"\\0\">\\0</a>", $cont);
$cont = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)',
'<a href="\\1">\\1</a>', $cont);
$cont = eregi_replace('(((f|ht){1}tps://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)',
'<a href="\\1">\\1</a>', $cont);
$cont = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_\+.~#?&//=]+)',
'\\1<a href="http://\\2">\\2</a>', $cont);
$cont = eregi_replace('([_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3})',
'<a href="mailto:\\1">\\1</a>', $cont);}
if($streamitem_data['streamitem_creator']==$streamitem_data['streamitem_target']){
echo "<a href='/profile.php?username=".$poster_name['id']."'>" . $poster_name['fullusersname']."</a><span class='subtleLink'> said </span>";
}else{
echo "<a href='profile.php?username=".$poster_name['username']."'>" .$poster_name['fullusersname']."</a>
<span class='subtleLink'>wrote on</span>
<a href='profile.php?username=".$poster_name['username']."'>" .$target_name['fullusersname']." 's</a> stream";}
echo "<br/><a href='#' class='subtleLink' style='font-weight:normal;'>".Agotime($streamitem_data['streamitem_timestamp'])."</a><hr>
<div style='padding-left:10px;padding-right:10px;'>";
if($streamitem_data['streamitem_type_id']==1){
$cont = nl2br($cont);
echo "<span class='subtleLink'>".$cont."</span>";
}else{
if($streamitem_data['streamitem_creator']==$streamitem_data['streamitem_target']){
$cont = nl2br($cont);
echo "<div>".$cont."</div>";
}else{
$cont = nl2br($cont);
echo "<div>'".$cont."</div>";
}
}
echo "<div style='height:20px;' class='post_contextoptions'>"; ?>
<?
//COMMENTS
$sql="SELECT * FROM streamdata_comments WHERE comment_streamitem = '".$streamitem_data['streamitem_id']."' ORDER BY comment_datetime ASC";
$query= mysql_query($sql) or die(mysql_error());
$num2= mysql_num_rows($query);
if($num2==0){
echo "<div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_".$streamitem_data['streamitem_id']."' onclick=\"toggle_comments('comment_holder_".$streamitem_data['streamitem_id']."');clearTimeout(streamloop);swapcommentlabel(this.id);\"> Write a comment...</a></div>";
}else{
echo "<div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_".$streamitem_data['streamitem_id']."' onclick=\"toggle_comments('comment_holder_".$streamitem_data['streamitem_id']."');clearTimeout(streamloop);swapcommentlabel(this.id);\"> Show Comments (".$num2.")</a></div>";
}
$streamid=$streamitem_data['streamitem_id'];
$check = "SELECT feedback_id FROM streamdata_feedback WHERE feedback_streamid='$streamid' AND feedback_rating=1";
$check1 = mysql_query($check);
$check2 = mysql_num_rows($check1);
$check = rawfeeds_user_core::check_liked($_SESSION['id'],$streamitem_data['streamitem_id'],1);
echo "<div id='streamlike'><a id='likecontext_".$streamitem_data['streamitem_id']."' style='cursor:pointer;' onClick=\"likestatus(".$streamitem_data['streamitem_id'].",this.id);\">";
if($check==0){
echo "<div style='width:50px;' id='likesprint".$streamitem_data['streamitem_id']."'>Like</div></a>";
}else{
echo "<div style='width:50px;' id='likesprint".$streamitem_data['streamitem_id']."'>Liked (".$check2.")</div>";
}
echo"</div></form>";
$streamid=$streamitem_data['streamitem_id'];
$check = "SELECT feedback_id FROM streamdata_feedback WHERE feedback_streamid='$streamid' AND feedback_rating=2";
$check1 = mysql_query($check);
$check2 = mysql_num_rows($check1);
$checkdislikes = rawfeeds_user_core::check_liked($_SESSION['id'],$streamitem_data['streamitem_id'],2);
echo "<div id='streamdislike'><a id='dislikecontext_".$streamitem_data['streamitem_id']."' style='cursor:pointer;' onClick=\"dislikestatus(".$streamitem_data['streamitem_id'].",this.id);\">";
if($checkdislikes==0){
echo "<div style='width:70px;' id='dislikesprint".$streamitem_data['streamitem_id']."'>Dislike</div></a>";
}else{
echo "<div style='width:70px;' id='dislikesprint".$streamitem_data['streamitem_id']."'>Disiked (".$check2.")</div>";
}
echo"</div></form>";
echo"</div></div></body>";
echo "<div class='stream_comment_holder' style='display:none;' id='comment_holder_".$streamitem_data['streamitem_id']."'><div id='comment_list_".$streamitem_data['streamitem_id']."'>";
$isfirst = 1;
if($num2>0){
while($comment = mysql_fetch_array($query)){
$poster = rawfeeds_user_core::getuser($comment['comment_poster']);
$post = stripslashes($comment['comment_content']);
echo "<div class='stream_comment' id='comment_".$comment['comment_id']."' ";
if($isfirst==1){
echo "style='margin-top:0px;' ";}
echo "><table width=100%><tr>";
echo "<td valign=top width=30px>
<img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped".$comment['comment_poster'].".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>";
echo "<td valign=top align=left><a href='/profile.php?username=".$poster['username']."'>". $poster['fullusersname'] ."</a> <div class='commentholder'>".$post."</div><br/>";
$isfirst=2;
if($comment['comment_poster']==$_SESSION['id']){
echo"<div id='commentactivitycontainer'>";
echo "<a style='cursor:pointer;' onClick=\"deletecomment('".$comment['comment_id']."','comment_".$comment['comment_id']."');\">Delete</a>";
$streamid=$comment['comment_id'];
$check = "SELECT feedback_id FROM streamdata_feedback WHERE feedback_streamid=$streamid AND feedback_rating=3";
$check1 = mysql_query($check);
$check2 = mysql_num_rows($check1);
$checklikes = rawfeeds_user_core::check_liked($_SESSION['id'],$comment['comment_id'],3);
echo "<a id='likecontext_".$comment['comment_id']."' style='cursor:pointer;' onClick=\"likestatuscomment(".$comment['comment_id'].",this.id);\">";
if($checklikes==0){
echo "<div style='width:80px; position:relative; float:left; left:40px' id='likescommentprint".$comment['comment_id']."'>Like</div></a>";
}else{
echo "<div style='width:80px; position:relative; float:left; left:40px' id='likescommentprint".$comment['comment_id']."'>Liked (".$check2.")</div>";
}
echo"</form>";
$streamid=$comment['comment_id'];
$check = "SELECT feedback_id FROM streamdata_feedback WHERE feedback_streamid=$streamid AND feedback_rating=4";
$check1 = mysql_query($check);
$check2 = mysql_num_rows($check1);
$checkdislikes = rawfeeds_user_core::check_liked($_SESSION['id'],$comment['comment_id'],4);
echo "<a id='dislikecontext_".$comment['comment_id']."' style='cursor:pointer;' onClick=\"dislikestatuscomment(".$comment['comment_id'].",this.id);\">";
if($checkdislikes==0){
echo "<div style='width:90px; position:relative;top:-0px; float:left; left:200px' id='dislikescommentprint".$comment['comment_id']."'>Dislike</div></a>";
}else{
echo "<div style='width:90px; position:relative; top:-0px; float:left; left:200px ' id='dislikescommentprint".$comment['comment_id']."'>Disliked (".$check2.")</div>";
}
echo"</form>";
}
echo "</div></div></table></div>";}
}
echo "</div><div class='stream_comment_inputarea'><input type='text' name='content' style='width:100%;' class='input_comment' placeholder='Write a comment...' onclick='growcommentinput(this);' autocomplete='off' onkeypress=\"if(event.keyCode==13){addcomment(".$streamitem_data['streamitem_id'].",this.value,'comment_list_".$streamitem_data['streamitem_id']."',".$_SESSION['id'].",'". $poster_name['fullusersname'] ."');this.value='';}\">";
}else{
// It's just a general update of some form. Comes here:
echo "<img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped".$streamitem_data['streamitem_creator'].".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a>";
$poster_name = rawfeeds_user_core::getuser($streamitem_data['streamitem_creator']);
$target_name = rawfeeds_user_core::getuser($streamitem_data['streamitem_target']);
$cont = stripslashes($streamitem_data['streamitem_content']);
if(!($streamitem_data['streamitem_type_id']==2)){
$cont = htmlentities($cont);
$cont = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a class='user_link' href=\"\\0\">\\0</a>", $cont);
}
if($streamitem_data['streamitem_creator']==$streamitem_data['streamitem_target']){
echo "<a href='/profile.php?username=".$poster_name['username']."'>" . $poster_name['fullusersname']."</a>";
}else{
echo "<a href='/profile.php?username=".$poster_name['username']."'>" .$poster_name['fullusersname']."</a>
<span class='subtleLink'>wrote on </span>
<a href='/profile.php?username=".$target_name['username']."'>" .$target_name['fullusersname']."'s</a> feed";
}
if($streamitem_data['streamitem_type_id']==2){
$cont = nl2br($cont);
echo "<div style='display:inline;' class='subtleLink'> ".$cont." </div>";
}else{
$cont = nl2br($cont);
echo "<span class='subtleLink'>".$cont."</span>";
}
echo "<br/><a href='#' class='subtleLink' style='font-weight:normal;'>".Agotime($streamitem_data['streamitem_timestamp'])."</a>";
}
//FINISH COMMENTS
echo "</div></div></div></div><iframe name='ifr2' id='ifr2' style='display:none;'></iframe>";
}
echo "</div></div>";
?>
<div class="stream_show_posts" onClick="global_streamcount=global_streamcount+10;refreshstream();">Show More Posts</div>
<?php
}else{
echo "<div class='alert_noposts'>It looks like there are no posts yet. <p> Add some friends, or create a status yourself.</div>";
}
}
?>
CREATE STREAMITEM FUNCTION
public function create_streamitem($typeid,$creatorid,$content,$ispublic,$targetuser){
$content = mysql_real_escape_string($content);
// $content = strip_tags($content);
if(strlen($content)>0){
$insert = "INSERT INTO streamdata(streamitem_type_id,streamitem_creator,streamitem_target,streamitem_timestamp,streamitem_content,streamitem_public) VALUES ($typeid,$creatorid,$targetuser,UTC_TIMESTAMP(),'$content',$ispublic)";
$add_post = mysql_query($insert) or die(mysql_error());
$last_id = mysql_insert_id();
if(!($creatorid==$targetuser)){
$fromuser=$creatorid;
$_SESSION['lastpost']==$content;
}
return;
}else{
return false;
}
}
Solution
If you use prepend(), it actually adds the text to the top of the HTML Content. So, it is better to use .html() as Preli said.
You can just replace the .prepend() with .html() as shown:
$("#homestatusid").html("<div id='divider-"+response['streamitem_id']+"'><div class='userinfo'><a href='/profile.php?username="+response['username']+"'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><div style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('"+response['streamitem_id']+"');\">X</div><a href='/profile.php?username="+response['username']+"'>"+response['first']+" "+ response['middle']+" "+response['last']+"</a><span class='subtleLink'> said</span><br/><a class='subtleLink' style='font-weight:normal;'>"+response['streamitem_timestamp']+"</a><hr>"+newmsg+"<div style='height:20px;' class='post_contextoptions'><div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_"+response['streamitem_id']+"' onclick=\"toggle_comments('comment_holder_"+response['streamitem_id']+"');clearTimeout(streamloop);swapcommentlabel(this.id);\">Write a comment...</a></div><div id='streamlike'><a id='likecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"likestatus("+response['streamitem_id']+",this.id);\"><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'>Like</div></a><div style='width:50px;' id='likesprint"+response['streamitem_id']+"'></div></div><div id='streamdislike'><a id='dislikecontext_"+response['streamitem_id']+"' style='cursor:pointer;' onClick=\"dislikestatus("+response['streamitem_id']+",this.id);\"><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'>Dislike</div></a><div style='width:70px;' id='dislikesprint"+response['streamitem_id']+"'></div></div></div><div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'><div id='comment_list_"+response['streamitem_id']+"'><table width=100%><tr><td valign=top width=30px><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+response['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><td valign=top align=left><div class='stream_comment_inputarea'><input type='text' name='content' style='width:100%;' class='input_comment' placeholder='Write a comment...' onkeyup='growcommentinput(this);' autocomplete='off' onkeypress=\"if(event.keyCode==13){addcomment("+response['streamitem_id']+",this.value,'comment_list_"+response['streamitem_id']+"',"+response['id']+",'"+response['first']+" "+ response['middle']+" "+response['last']+"');this.value='';}\"><br/></div></div>");
OTHER TIPS
If you don't want the content you load via ajax to be added, but replace your current content then you shouldn't use prepend.
replace the following code :
$("#homestatusid").prepend( ...
with this
$("#homestatusid").html( ...
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
