Jquery class attribute navigation

Question

I'm trying to build a very simple VPS control panel; i have the following code that lists every VPS i have on a particular server :

($active variable is a BOOLEAN giving the current state of the VPS)

<ul id="vps">
<li <? if ($active): ?>class="active"<? endif;?> >
<? if ($active): ?>
   <div class="status">running</div>
   <?else:?>
   <div class="status">halted</div>
<? endif; ?>

<div class="sub">
  <div class="activity">
  <? if ($active): ?>
      <a href="#" id="<?=$vpsid?>" class="activevps"><img src="stop.png" /></a>
  <? else: ?>
    <a href="#" id="<?=$vpsid?>" class="desactivevps"><img src="start.png"/></a>
  <? endif; ?>
  </div>
</div>

And the following JQuery actions :

<script>
    $('.activevps').click(function(e){ 
        var target = $(this).attr('id');
        $(this).html ('<img src="ajax-loader.gif" />');
        var source = $(this);
        var tt = new Date().getTime();
        $.ajax({
          type: "POST",
          url: '/vpsadmin/stop/' + tt,
          data: 'vps='+target,
          dataType: "html", 
          timeout: (60 * 1000), 
          success: function(data) {
          $('.vps_'+target).html ('<a href="#" id="'+target+'" class="desactivevps"><img src="play.png" /></a>');
        },
          error: function(objAJAXRequest, strError){alert(strError);
    }
    });

and same code for STOP action

<script>
    $('.desactivevps').click(function(e){ 
        var target = $(this).attr('id');
        $(this).html ('<img src="ajax-loader.gif" />');
        var source = $(this);
        var tt = new Date().getTime();
        $.ajax({
          type: "POST",
          url: '/vpsadmin/start/' + tt,
          data: 'vps='+target,
          dataType: "html", 
          timeout: (60 * 1000), 
          success: function(data) {
          $('.vps_'+target).html ('<a href="#" id="'+target+'" class="activevps"><img src="stop.png" /></a>');
        },
          error: function(objAJAXRequest, strError){alert(strError);
    }
    });

I'm looking forward to do some actions here (but lost in jquery actions).

• When clicking on the start/stop icon; it should trigger the ajax post and :
• Change the 'li' class to 'inactive'
• Change the 'status' class to 'halted' or 'running'
• Change the 'a' class to activevps/desactivevps and also change the img src associated.

I'm quite new to Jquery; how to do all this using the simple click function ?

Answer 1

I threw a sample together on jsFiddle that I think helps you out. Here's the link.

Basically, the code you posted is pretty close - I just had to make a few adjustments.

HTML Markup

<ul id="vps">
<li class="active" >
   <div class="status">running</div>

  <div class="sub">
    <div class="activity">
      <a href="#" id="100" class="activevps"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5a/Icons-mini-action_stop.gif" /></a>
    </div>
  </div>
</li>
</ul>

The only change I made here was cosmetic (changed the image URL to something I could read on jsFiddle) and I also closed the <li> and <ul> tags.

jQuery Code

$(document).ready(function() {
    $('.activevps').click(function(e){         
        var target = $(this).attr('id');
        var source = $(this);
        var tt = new Date().getTime();
        $.ajax({
          type: "POST",
          url: '/ajax_json_echo/?q=' + tt,
          data: 'vps='+target,
          dataType: "html",
          timeout: (60 * 1000),
          context: $(this),  //set the context so the callback function knows where to do work
                            // the context will be the clicked <a> element
          success: function(data) {
              alert(data);
              //set the parent li to inactive
              var parentListItem = $(this).parents("li"),
                  statusDiv = $(this).parents("li").find("div.status");
              if (parentListItem.hasClass("active")) {
                  parentListItem.removeClass("active").addClass("inactive");
                  statusDiv.text("halted");
                  $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/d/de/Icons-mini-action_go.gif");
              } else {
                  parentListItem.removeClass("inactive").addClass("active");
                  statusDiv.text("running");
                  $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/5/5a/Icons-mini-action_stop.gif");
              }
          },
          error: function(objAJAXRequest, strError){alert(strError);
    }
    });
    });
});

There were a few changes here. - I set the context in your $.ajax call to the <a> being clicked so we could work with the <li> item in order to modify the contents. I'm assuming that you may have multiple <li> elements, so we need to make sure to modify only the one that's clicked -- not all at once. :) In the linked jsFiddle script, I have several <li> items, and only the one that gets clicked will get updated. - I don't have separate scripts based on class -- I set the class based upon what the class currently is, assuming there's only 2 states (running/halted). If you have more, the logic will change, but hopefully this gets you started. - I don't rebuild the image link -- I just adjust the src attribute and other classes based on the click.

Other than those changes, that should do it. Let me know if there are questions and I'll update my answer accordingly.

I hope this helps!

BTW - the jsFiddle script calls a jsFiddle test ajax service. It waits 2 seconds before returning, and basically just sends back what you sent it. I did this just to simulate an ajax call. It's just a junk call that I put in. Just wanted to mention that in case you were wondering about that. Thx.