html, js, php - Image disappear after click

510 views Asked by At

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');
1

There are 1 answers

2
Mithun Sreedharan On

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);