Add class to element using jQuery after successfull ajax call

Question

I am attempting to add an 'active' class to an <li> when the <li> is clicked. This is what the structure of the <li><a> looks like:

<li onclick="paginationChange(2)" id="2" class="page-item">
    <a class="page-link" href="#">2</a>
</li>

As each <li> has an id attached to it I thought it would be as simple as:

$('#' + page).addClass('active');

Where page is the number passed into the onclick method. What complicates this however is that I am using a PartialView which is loaded on success of an ajax call. So the entire onclick method looks like this:

function paginationChange(page) {
    $.ajax({
        type: 'GET',
        url: '/Projects/ProjectTable/CountProjects',
        data: { searchString: $('#searchBox').val() },
        success: function(result) {
            $('#table-container').load('/Projects/ProjectTable/TestPartialView',
                {
                    searchString: $('#searchBox').val(),
                    currentPage: page,
                    projectCount: result
                }); 
            $('#' + page).addClass('active');
        }
    });
}

I have tried moving around the addClass call as I thought the issue could be that the PartialView is being rendered after I have added the class therefore rendering the element without the class on it.

Is there a way I can wait until the TestPartialView has loaded in its entirety and then add the class to the correct <li>?

EDIT:

<ul id="paginationList" class="pagination">
   <li id="1" class="page-item">
      <a class="page-link" href="#">1</a>
   </li>
</ul>

New js:

$('#paginationList li.page-item').click(function () {
    console.log('test');
    var $li = $(this);
    $.ajax({
        type: 'GET',
        url: '/Projects/ProjectTable/CountProjects',
        data: { searchString: $('#searchBox').val() },
        success: function(result) {
            $('#table-container').load('/Projects/ProjectTable/TestPartialView',
                {
                    searchString: $('#searchBox').val(),
                    currentPage: page,
                    projectCount: result
                }, function() {
                    $li.addClass('active');
                }); 
        }
    });
});

Answer 1

Is there a way I can wait until the TestPartialView has loaded in its entirety and then add the class to the correct <li>

Yes you've just to use the load() callback that will be called after the partial is fully loaded :

$('#table-container').load('/Projects/ProjectTable/TestPartialView',
{
    searchString: $('#searchBox').val(),
    currentPage: page,
    projectCount: result
}, function(){
    $('#' + page).addClass('active');
}); 

Answer 2

Is there a way I can wait until the TestPartialView has loaded in its entirety and then add the class to the correct <li>?

Yes, you can put the addClass() call in the callback of the load() call.

Also note that using on* event handlers are very outdated. As you're using jQuery you can use that to add unobtrusive event handlers to the li which then save the need to pass around hard-coded arguments as you will already have a reference to the element which raised the event. Try this:

<ul>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
</ul>

$(function() {
  $('li.page-item').click(function() {
    var $li = $(this);

    $.ajax({  
      type: 'GET',
      url: '/Projects/ProjectTable/CountProjects',
      data: { 
        searchString: $('#searchBox').val() 
      },
      success: function(result) {
        $('#table-container').load('/Projects/ProjectTable/TestPartialView', {
          searchString: $('#searchBox').val(),
          currentPage: page,
          projectCount: result
        }, function() {   
          // this argument is a function to be executed once the content has been loaded,
          // similar to the success handler of $.ajax
          $li.addClass('active');
        });             
      }
    });
  });
});