skip to Main Content

I have a function that is working correctly on page load:

$(window).on("load", function() {
    OnloadFunction();
});

Although when I rerun the query via ajax and load in the new content, OnloadFunction does not work.

$('.submenu li').click(function(e) {
      e.preventDefault();
      var sortSelect = $(this).find('div').text();
      var categorySelect = $(this).parent().attr('class').replace('submenu ', '');
        $('.all-songs').html('<h2 class="result">Loading...</h2>');
      $.ajax({
        type: 'post',
        dataType: 'text',
        url: sortAjax.ajaxurl,
        data: {
            action: 'my_ajax_sort',
            categorySelect: categorySelect,
            sortSelect: sortSelect
        },
        success: function(response) {
            $('.all-songs').html(response);
        }
      })
   });
$(window).on("load", function() {
    OnloadFunction();

    $(document).ajaxComplete(function() {
            OnloadFunction();
    });
});

or

$(document).ready(function() {
    $(document).ajaxComplete(function() {
        OnloadFunction();
    });
});

ajax updated Html is here:

$(document).ready(function(){
  $(document).ajaxComplete(function(){
     xxxxxx
  });
});

Here is the function that needs to run:

function OnloadFunction () {

        $('.sc-trackslist li').each(function() {
            var trackNum = $(this).index();
            var top = trackNum * 50 + trackNum * 1;
            $(this).css('top', top);
        });

        $('.sc-trackslist > li').click(function () {
        if ($('.sc-play').hasClass('clicked') || $('.sc-pause').hasClass('clicked')) {

        } else {
            $('.sc-play').addClass('hidden');
            $('.sc-pause').removeClass('hidden');
            $('.sc-player .sc-info, .sc-player .sc-scrubber, .sc-player .sc-controls').slideDown(200);
            $('#footer').css('margin-bottom', '90px');
        }
        });

        $('.sc-trackslist > li').hover(function() {
            var trackNum = $(this).index() + 1;
            $('.song:nth-of-type('+trackNum+')').addClass('hover');
        }, function() {
                var trackNum = $(this).index() + 1;
            $('.song:nth-of-type('+trackNum+')').removeClass('hover');
        });
}

Any suggestions welcome, thanks for your response!

2

Answers


  1. Chosen as BEST ANSWER

    Found a resolution to this - the function needed to be run after the other code in the ajaxComplete rather than in a separate ajaxComplete function

    $(document).ready(function(){
      $(document).ajaxComplete(function(){
         xxxxxx
         OnloadFunction();
      });
    });
    

  2. According to your comment:

    The OnloadFunction() is running but runs too soon – before the html
    has been updated

    Therefore, I instead suggest placing the calling of OnloadFunction() in the success callback of your AJAX request after the html has been updated like so:

    success: function(response) {
        $('.all-songs').html(response);
        OnloadFunction();
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search