Question

I have tons of ajax components on this booking engine. I need to customize the text inside of the modal for each of the components to suite.

I added:

    $('#loader').bind('ajaxStart', function() {
        $(this).show().addClass('modalOpen');
    }).bind('ajaxComplete', function() {
        $(this).removeClass('modalOpen').hide()
    });

Is there some advanced way of changing the text inside of the loading element before I do separate .ajax calls? Or do I just have to manually do something like

$('#loader').text('blah');
$.ajax({})

Furthermore, this may sound silly but is there a way to not have the loader show up for certain components? If not I imagine I’ll have to do something like

$('someel').someEvent(function() {
    $('#loader').addClass('override-hide');
    $.ajax({
       success:function() {
          $('#loader').removeClass('override-hide');
       }
    })
})

#loader.override-hide { display:none !important; }

Answer 1

I’d use the beforeSend callback for both of your examples:

$.ajax({
   beforeSend: function() {
      $('#loader').text('Message for this call').show();
   },
   success:function() {
      $('#loader').hide();
   }
});

Just leave out .show()/.hide() or .text() if you don’t want it shown or the message changed, whatever you want in each case.

See a full list of events here