How to add class dynamically using ajax.?

Question

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.

<ul id="orglistingid">
    <li> 
        <a>Sales </a> <!--Deparemtn Name -->
        <ul id="dId">
           <li> 
              <a>Rahul </a> <!--User -->
          </li>
           <li> 
              <a>Nitin </a>
          </li>
        </ul>
    </li>
</ul>
<ul id="orglistingid">
    <li> 
        <a class="active">Development</a>
        <ul>
           <li id="dId"> 
              <a class="active">Rokesh </a>
          </li>
           <li> 
              <a>Preeti</a>
          </li>
        </ul>
    </li>
</ul>

I am using below code, can anyone tell what correction i need to do..?

if (orgID != null && orgID == 'dId') {
    $("#dId li a").removeClass("orglistactive");
    $(this).attr("class","orglistactive");

    var parentID = $(e.target).parent().parent().parent().attr("id");
    alert($(e.target).parent().parent().parent().attr("id"));

    $("#"+parentID+" a").attr("class","orglistactive");
}

Can we have all your JS code?

FBHY
– FBHY

2013-11-24 09:40:53 +00:00
Commented Nov 24, 2013 at 9:40 — FBHY
– FBHY, Commented Nov 24, 2013 at 9:40

Ashok Kumar Gupta · Accepted Answer · 2013-11-24 09:55:59Z

1

Looks like you are trying to achieve something as shown below:

<script type="text/javascript">
var orgID = $('#dId');

if(orgID.attr('id') == 'dId'){
     orgID.find('>li>a').addClass("orglistactive"); 
     var parentID = orgID.attr("id");
     alert(orgID.attr("id"));
} 
</script>

But couple of things are found, are not correct from html and jquery perspective.

Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target

Hope this helps! :)

answered Nov 24, 2013 at 9:55

Ashok Kumar Gupta

9747 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yury Tarabanko Over a year ago

orgID != null is redundant. jQuery instance can't be null.

Ashok Kumar Gupta Over a year ago

true missed to remove

Augusto · Accepted Answer · 2013-11-24 12:56:24Z

This can be quickly achieved with a little of jQuery.

First Approach

$('ul a').click(function(){
    $(this).addClass('orglistactive');
    $(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});

Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/

Second Approach

One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.

$('#orglistingid li ul li a').click(function(){
    $(this).addClass('orglistactive');
    $(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});

Example: http://jsfiddle.net/augusto1982/GXcvD/

Third Approach

I would also recommend you to add a class to each user anchor, to make it easier.

HTML

<ul id="orglistingid">
    <li> 
        <a>Sales </a> <!--Deparemtn Name -->
        <ul id="dId">
           <li> 
              <a class='user'>Rahul </a> <!--User -->
          </li>
           <li> 
              <a class='user'>Nitin </a>
          </li>
        </ul>
    </li>
</ul>
<ul id="orglistingid">
    <li> 
        <a class="active">Development</a>
        <ul>
           <li id="dId"> 
              <a class="active user">Rokesh </a>
          </li>
           <li> 
              <a class='user'>Preeti</a>
          </li>
        </ul>
    </li>
</ul>

jQuery

$('.user').click(function(){
    $(this).addClass('orglistactive');
    $(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});

Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/

Final Approach

In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.

HTML

<ul id="orglistingid">
    <li class='department'> 
        <a>Sales </a> <!--Deparemtn Name -->
        <ul id="dId">
           <li> 
              <a class='user'>Rahul </a> <!--User -->
          </li>
           <li> 
              <a class='user'>Nitin </a>
          </li>
        </ul>
    </li>
</ul>
<ul id="orglistingid">
    <li class='department'> 
        <a class="active">Development</a>
        <ul>
           <li id="dId"> 
              <a class="active user">Rokesh </a>
          </li>
           <li> 
              <a class='user'>Preeti</a>
          </li>
        </ul>
    </li>
</ul>

jQuery

  $('.user').click(function(){
    $(this).addClass('orglistactive');
    $(this).closest('.department').find('a:first').addClass('orglistactive');
    });

Demo: http://jsfiddle.net/augusto1982/e7PVF/

Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

Collectives™ on Stack Overflow

How to add class dynamically using ajax.?

2 Answers 2

2 Comments

First Approach

Second Approach

Third Approach

Final Approach

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

First Approach

Second Approach

Third Approach

Final Approach

Comments

Your Answer

Sign up or log in

Post as a guest

Related