CODEWITHSUNDEEP
javascriptjqueryajax
CodeG
CodeG

Reputation: 467

Tabs do not work after ajax call

I have a page in tabs that works fine, but it has a paging, I created an ajax to load the other tabs. But after I click the button, the tabs do not work

This is my function to create my tabs.

    var tabContainers = $('.messages');
    var navTab = $('div.list ul.nav li');

    function loadPage() {

        $(document).on('click', navTab, function(){
          var the_hash = $(this).children().attr('href');
          tabContainers.hide().filter(the_hash).show();

          $('div.list ul.nav li').removeClass('active');
          $(this).addClass('active');

          return false;
      }).filter(':first').click();

    };

This is my ajax call

  //button
  var moreConversations = $('.btn-more-conversations');

  // more conversations
  moreConversations.click(function(){
    var currentPage = $(this).attr('current-page'),
        totalPages = parseInt($(this).attr('total-pages')),
        nextPage = parseInt(currentPage) + 1;


          $.ajax({
            type: "GET",
            url: "/inbox/" + nextPage
          }).done( function(data){
            if (nextPage == totalPages) {
              moreConversations.remove();
            }else{
              moreConversations.attr('current-page', nextPage);
            }
            insertConversations(data);
          }).fail( function(){
            sweetAlert("Oops...", "Erro ao aplicar a paginação", "error");
          });

        });

  function insertConversations(page) {
    var content_nav = $(page).find('div.menu-conversations').html();
    var content_conv = $(page).find('div.content-conversations').html();
    $('div.menu-conversations').append(content_nav);
    $('div.content-conversations').append(content_conv);

 }

What am I forgetting? Thanks!!!

Upvotes: 0

Views: 879

Answers (2)

Carlos Vara Gil
Carlos Vara Gil

Reputation: 1

I had the same problem some days ago. The solution is related with the fact that the AJAX call doesn't load the Javascript after your fail/success. In your done function add this code: 

$.getScript('js/thenameofyourfile.js');

More info in:

https://api.jquery.com/jquery.getscript/

Upvotes: 0

Samir
Samir

Reputation: 1368

Use .on() method instead of .click(). Since you are appending your li at run time, it will not attach .click() event to the future li. Hence in this case you can use .on() method. 

function loadPage() {

  $(document).on('click', 'div.list ul.nav li' function () {
      var the_hash = $(this).children().attr('href');
      tabContainers.hide().filter(the_hash).show();

      $('div.list ul.nav li').removeClass('active');
      $(this).addClass('active');

      return false;
  }).filter(':first').click();

};

Upvotes: 1

Related Questions