CODEWITHSUNDEEP
javascriptjquery
RBP
RBP

Reputation: 485

How to add class dynamically using ajax.?

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");
}

Upvotes: 0

Views: 1358

Answers (2)

Augusto
Augusto

Reputation: 819

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.

Upvotes: 1

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

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.

  1. Id are unique but you have used 'dId' for more than one time.
  2. 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! :)

Upvotes: 1

Related Questions