I'm really new here. Hopefully this title makes sense.
My problem is: after I clicked either good.png or bad.png as a button, the js works well, but after I click the OK in the alert window, the image will disappear. It will show up again after I refreshed the page.
Here is real page for code: http://bit.ly/1iUjnlW
How could I fix this? Thank you very much !
(sorry for my bad language)
This is part of my code:
=========js function========
<script type="text/javascript">
$(function() {
$(".rate").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up'){
//$(this).fadeIn(200);
$.ajax({
type: "POST",
url: "../data/rate_up.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
else
{
//$(this).fadeIn(200);
$.ajax({
type: "POST",
url: "../data/rate_down.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
return false;
});
});
</script>
========img buttons in a table===========
<p class="p1">
<fieldset>
<legend>Sighting Detail</legend>
<div id="scroll_detail" style="overflow-y:auto; height:600px;">
<table>
<td>Rate this sighting: </td>
<td>
<div class="box">
<a href="" class="rate" id="<?php echo $sighting_id; ?>" name="up"><img src="../images/rating/good.png"><?php echo $up; ?></a>
</div>
<div class="box">
<a href="" class="rate" id="<?php echo $sighting_id; ?>" name="down"><img src="../images/rating/bad.png"><?php echo $down; ?></a>
</div>
</td>
</tr>
</table>
</div>
</fieldset>
</p>
</div>
</div>
<!-- Above is the website main files -->
<?php include ('../footer.php');
You are replacing your anchor tag's (which holds yiur image) inner html with html from AJAX response
parent.html(html);try to alert the html returned from your AJAX before you replace the content and see what it contains
try appending the html returned
parent.append(html);