Using jquery's .queue to queue functions

Question

When i remove the parameter 'ajax' from from the .queue() function, my ajax calls do get queued. The only problem is, the jQuery docs say that the .queue() function will then default to the 'fx' queue. Unfortunately, I am already using this queue (for effects) and I want to use another queue specifically for custom functions. Unfortunately, the code inside the .queue() function never gets called. I have an example of my code below (just a small snippet). It is getting a little complicated if you have further questions feel free to comment.

$(document).ready(function(event) {

var target = event.target;
var ajaxify = new Ajaxify();

$.each(ajaxify.functions, function(index, value){

     if ($(target).hasClass(value)) {        
       console.log('this is in my console, and nowhere else in my code');
       $('#main').queue('customfunctions', function (next) {
         var self = this;          
         ajaxify[value](target, event, next, self);       
       });

     }

   });
  $('#main').dequeue('customfunctions');
});

function Ajaxify() {

  this.functions = [
                   'ajaxify_overlay',
                   'ajaxify_overlayCancel',
                   'ajaxify_overlaySubmit',
                   'ajaxify_rollout',
                   'ajaxify_rolloutCancel',
                   'ajaxify_rolloutSubmit',
                   'ajaxify_upload',
                   'ajaxify_contentArea',
                   'ajaxify_itemToggler',
                   'ajaxify_closer',
                   'ajaxify_submit',
                   'ajaxify_inputActivate',
                   'ajaxify_executeAndRefresh',
                   'ajaxify_empty' //no comma on the last entry!!!!  
                 ];

}

Ajaxify.prototype.ajaxify_executeAndRefresh = function (target, event, next, self) {

  event.preventDefault();

  var newPath = getVar($(target).attr('class'), 'url'); //getVar function not included, it will get the new path for the ajax call below

  var url = $(target).attr('href');

  $.ajax({    
    type: "POST",
    url: url,
    success: function(transport) {

      refreshPage(newPath); //refreshPage function not included, it will do a page refresh with the new path

      next();     

    }
  });

}

SLaks · Accepted Answer · 2010-11-15 15:48:11Z

3

You need to call dequeue() to run the next function in the queue.

answered Nov 15, 2010 at 15:48

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

bmarti44 Over a year ago

@SLaks: adding .dequeue() does not seem to fix this. I am updating my code above to reflect my addition of .dequeue

SLaks Over a year ago

@bmarti: However, it doesn't do anything useful. It simply calls each function immediately. You should figure out when to dequeue.

bmarti44 Over a year ago

@SLaks: i put the $(self).dequeue('customfunctions'); inside the success callback for my ajax call. I changed my code above to reflect these changes. It still does not seem to be working though.

SLaks Over a year ago

@bmarti: You never kicked off the initial item.

bmarti44 Over a year ago

@SLaks: What do you mean by "never kicked off the intial item"? I added a console.log() to the code above, this shows in my js console. Thanks for your help on this by the way.

|

Collectives™ on Stack Overflow

Using jquery's .queue to queue functions

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related