Question

** EDIT **

Image showing what I needed done. When an admin clicks on an unapproved (x) comment it automatically approves it and the image is changed to a check mark and vice versa.

I am using the following jQuery code, but I am having problems loading new image src on click.

<script>
$(document).ready(function(){   
$(".disapproveComment").click(function() {
    var ID = $(this).children("p").text();
    $.ajax({        
        type: "POST",
        url: "/comments/disapproveComment/"+ID,
        async:false,
        success: function(msg){
            //Using $(this).(".disapprove")... does not work
            $(".disapprove").attr("src","/img/icons/approve.png");
        }
    });
});
});
</script>

this is my view file

<?php
    if($comment['Comment']['approved'] == 1){
        echo '<div class="disapproveComment"><p style="display:none">';
        echo $comment['Comment']['id'];
        echo '</p><img class="disapprove" src="/img/icons/approve.png" border="0">';
        echo '</div>';
    }else{
        echo '<div class="approveComment"><p class="idAnchor" style="display:none">';           
        echo $comment['Comment']['id'];
        echo '</p><img class="approve" src="/img/icons/disapprove.png">';
        echo '</div>';
    }       
?>
</td>

If I say $(this).(".disapprove").attr... Nothing is updated. If I leave as is in the code, all element with images in with that class names gets updated. Your help is appreciated…

Answer 1

In ajax callback you have another context so you need to hold context ealier in a varaible.

<script>
$(document).ready(function(){   
$(".disapproveComment").click(function() {
    var comment = $(this);
    var ID = $(this).children("p").text();
    $.ajax({        
        type: "POST",
        url: "/comments/disapproveComment/"+ID,
        async:false,
        success: function(msg){
            //Using $(this).(".disapprove")... does not work
            comment.find(".disapprove").attr("src","/img/icons/approve.png");
        }
    });
});
});
</script>