Getting Code To Run Synchronously That Resides Inside A Function Called Via An AJAX Call

I have a dropdown notification window that I show when I run certain AJAX functions, let's simplify it as: function notifyComplete(type, alert_el, response) { var msg = respon

Solution 1:

If you are trying to call

var alert_el = $('#top_notify').find('.alert');

// Remove any additional classes added by a possible previous run
alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');

before each $.ajax() call, you can include the lines within $.ajax() beforeSend function within getAjaxData

function getAjaxData(loadUrl, dataObject, action, type) {

    return jQuery.ajax({
        beforeSend: function(jqxhr, settings) {
                      var alert_el = $('#top_notify').find('.alert');
                      // Remove any additional classes added by a possible previous run
                      alert_el
                     .removeClass('visible alert-success alert-info alert-danger alert-warning');
        },
        type: action,
        url: loadUrl,
        data: dataObject,
        dataType: type
    });

}

If you are trying to call the two lines after $.ajax() call, though before notifyComplete you can pass an array of function to .done()

getAjaxData(loadUrl, dataObject, 'POST', 'json')
.done([
  function(response) {
    var alert_el = $('#top_notify').find('.alert');
    // Remove any additional classes added by a possible previous run
    alert_el
    .removeClass('visible alert-success alert-info alert-danger alert-warning');
  }
  , function(response) {
      notifyComplete(notify_type, alert_el, response);
  }
 ]);

---

if I could pass it a function name as a callback rather than use an anonymous function and thus have to resort to using if/else inside, but obviously also need a way of including parameters with the callback.

You can use Function.prototype.bind() to pass additional parameters to a named function set as value of beforeSend option of $.ajax(). Include logic to check if the additional object or value is the passed object or jQuery jqxhr object that is the default first parameter of beforeSend.

  function handleBeforeSend(args, jqxhr, settings) {
    console.log(args, jqxhr, settings);
    if (args.hasOwnProperty("additionalSettings")) {
      // do stuff with `args.additionalSettings`
    }
  }

  $.ajax({
    url:"/path/to/server/",
    type: "POST",
    beforeSend: handleBeforeSend.bind(null, {additionalSettings:[0,1,2]})
  });

jsfiddle https://jsfiddle.net/dackdrek/

---

Implemented within current javascript

$().ready(function() {

  function handleBeforeSend(bool, jqxhr, settings) {
    console.log(bool, jqxhr, settings);
    if (bool === true) {
      var alert_el = $('#top_notify').find('.alert');
      // Remove any additional classes added by a possible previous run
      alert_el.removeClass('visible alert-success alert-info alert-danger alert-warning');
    }
  }

  function notifyComplete(type, alert_el, response) {

    var msg = response.output;
    var result = response.result;

    // Update msg in alert box
    alert_el.text(msg);

    if (result == 'success') {
      alert_el.addClass('alert-success');
    } else {
      alert_el.addClass('alert-danger');
    }

    // Slide in alert box
    alert_el.addClass('visible');

  }

  function getAjaxData(loadUrl, dataObject, action, type, beforeSend, bool) {

    return jQuery.ajax({
      type: action,
      url: loadUrl,
      data: dataObject,
      dataType: type,
      beforeSend: beforeSend.bind(null, bool)
    });

  }
  // pass `true` to `handleBeforeSend`
  getAjaxData("/echo/json/", {
      json: JSON.stringify({
          "output": "123",
          "result": "success"
        })
      }, "POST", "json", handleBeforeSend, true)
    .then(function(response) {
      notifyComplete(null, $('#top_notify'), response)
    });
  setTimeout(function() {
  // pass `false` to `handleBeforeSend`
  getAjaxData("/echo/json/", {
      json: JSON.stringify({
          "output": "123",
          "result": "success"
        })
      }, "POST", "json", handleBeforeSend, false)
    .then(function(response) {
      notifyComplete(null, $('#top_notify'), response)
    })
   }, 5000)
})

jsfiddle https://jsfiddle.net/dackdrek/4/

Solution 2:

You have a couple of options.

1. You can use setTimeout in the notifyComplete function, place it at the end and give it a reasonable amount of time so the notification alert disappears automatically after it appears

2. Also, I can't do it afterwards as the slide down notify window duration is handled by CSS and hence JS doesn't know when it's complete.

   That is not correct, you can use the trantisitionend or animationend events to check when a CSS effect has finished. If you are using something like bootstrap, you can use transitionend in the alert element.