Question

I have the following jQuery code which does not work as I expect it. I am sure I am doing something wrong, but I dont see it. Basically if a blog is not publish, when I click on the image, it accesses my DB and updates it accordingly. All of that is fine.

1. I click on .not_published
2. The content of .not_published is changed with an image tag that display ajax-loader.gif
3. When the server returns a success message, I update the html of #not_published parent with a new content which includes replacing .not_published with .published.

All I get when I click on the .not_published is the ajax image loading and it stays there. If I add an alert("message'); inside the success function it works fine.

List point 3 does not work. I cant figure out why. Please see code below:

jQuery Code:

$(document).on('click','.not_published', function(){
       var ID = $(this).siblings("p").text();
        $(this).html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");
        $.ajax({
            url: "/posts/publish/"+ID,
            type: "post",
            data: '',
            success: function(responseText, statusText, xhr, $form){
                $(this).parent().html("<span class=\"published\"><img style=\"width:20px;\" src=\"/img/admin/checkmark_green.png\"></span><p style=\"display: none\">ID</p>");
            },
            error: function(responseText){
                alert(responseText);
            }   
        });
});

HTML Code

<div id="publish">
    <span id="not_published">
        <img style="width:20px"  src="/img/admin/checkmark_red.png">
    </span>"
    <p style="display: none">1</p>
</div>

Answer 1

Store the element in variable outside of the AJAX request but before you do… inside success handler log this to console. It’s not what you think it is.

ALso changing ID to class as noted in comments

$(document).on('click','.not_published', function(){
       var ID = $(this).siblings("p").text();
        var $el=$(this).html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");

        $.ajax({
            url: "/posts/publish/"+ID,
            type: "post",
            data: '',
            success: function(responseText, statusText, xhr, $form){
                 /* change $(this) to $el defined above*/
                $el.parent().html("<span class=\"published\"><img style=\"width:20px;\" src=\"/img/admin/checkmark_green.png\"></span><p style=\"display: none\">ID</p>");
            },
            error: function(responseText){
                alert(responseText);
            }   
        });
});