jQuery UI Buttons Toggle

Question

I'm trying to toggle a UI Button from a callback of a POST operation. The jquery UI Button would either need to have "ui-icon ui-icon-minus" or "ui-icon ui-icon-checked" as a span.class

I tried to toggle - but toggle only removes and adds back a part of the class - it doesn't exchange the whole class. This is where I'm stuck at right now:

$('#toggle-page, a.toggle-page').click(function() {
pageID = $(this).parent('div').attr('id');
$.post(
    "webadmin/pages.toggle.serialize.php", 
    {id : pageID },
    function(data, textStatus, xhr) {
      if ($("#"+pageID+" a#toggle-page span").hasClass('ui-icon ui-icon-minus')) {
            $("#"+pageID+" a#toggle-page span").removeClass('ui-icon ui-icon-minus');
            $("#"+pageID+" a#toggle-page span").addClass('ui-icon ui-icon-check');
          }
      if ($("#"+pageID+" a#toggle-page span").hasClass('ui-icon ui-icon-check')) {
            $("#"+pageID+" a#toggle-page span").removeClass('ui-icon ui-icon-check');
            $("#"+pageID+" a#toggle-page span").addClass('ui-icon ui-icon-minus');
          }
    }
);
});

I know the code above is not the right way... but can someone point me in the right direction? The Id etc. are a bit nested because theres multiple entries that can be edited - hence the pageID stuff.

Answer 1

This should be closer to what you want. Always cache the return from a jQuery selector if you plan to use it again:

$('#toggle-page, a.toggle-page').click(function() {
  var  $page = $(this).parent('div'),
      pageID = $page.attr('id');
  $.post(
      "webadmin/pages.toggle.serialize.php", 
      {id : pageID },
      function(data, textStatus, xhr) {
        var $span = $page.find('a#toggle-page span');
        if($span.hasClass('ui-icon-minus')) {
          $span.removeClass('ui-icon-minus').addClass('ui-icon-check')
        } else {
          $span.removeClass('ui-icon-check').addClass('ui-icon-minus')
        }
      }
  );
});

Answer 2

I would do it like this:

$('#toggle-page, a.toggle-page').click(function() {
pageID = $(this).parent('div').attr('id');
$.post(
    "webadmin/pages.toggle.serialize.php", 
    {id : pageID },
    function(data, textStatus, xhr) {
      var node = $("#"+pageID+" a#toggle-page span");
      node.toggleClass('ui-icon-minus');
      node.toggleClass('ui-icon-check');
    }
);
});