Question

So I have a table with multiple publish and unpublish buttons.

Simple buttons:

<button id="publish"
    <?php
        if ($singleBlog->isPublished())
            echo ' class="green small"';
        else
            echo ' class="green red small"';
    ?>
    value="<?php echo $singleBlog->getBlogId(); ?>">publish</button>

to add the buttons.

Then I do the ajax call that return something and changes toggle the button class and name.
It used to work before I added the ajax but I cant seem to be able to make it work with the ajax call.

I suspect it is cause the this in the ajax call is refering to it and I cant seem to figure out how to get the parent of that!

Any help would be appreciated on this one.

<script>
      $(document).ready(function() {
          $("button#publish").click(function() {
            //alert($(this).attr("value"));
            var id = $(this).attr("value");
            $.ajax({
                type: "POST",
                url: "ajax/blogPublishUnpublish.php",
                data: "id="+ id ,
                success:function(result){
                    var button = this;
                    if (result == '0' || result == '1' ){
                        alert("in");
                        $(button).toggleClass("red");

                        if( $(this).is('.green') )
                            $(this).text('publish');

                        if( $(this).is('.red') )
                            $(this).text('unpublish');
                        alert("done");
                    }

                }
            });
            // alert(index);


      });
      });
      </script>

Answer 1

I would select the button again, or if you’re worried about switching the ids, make a variable.

 $(document).ready(function() {
      $("button#publish").click(function() {
        var myID = "#" + (this).attr("id");
        var id = $(this).attr("value");
        $.ajax({
            type: "POST",
            url: "ajax/blogPublishUnpublish.php",
            data: "id="+ id ,
            success:function(result){

                if (result == '0' || result == '1' ){
                    alert("in");
                    $(myID).toggleClass("red");

                    if( $(myID).is('.green') )
                        $(myID).text('publish');

                    if( $(myID).is('.red') )
                        $(myID).text('unpublish');
                    alert("done");
                }

            }
        });
        // alert(index);


  });
  });