jQuery AjaxUpload, have to click button twice?

Question

Hey guys,

I am using the AjaxUpload plugin with jQuery, and everything is working fine for the most part, but I have to click my button twice to get it to execute. I'm guessing this is a scope issue... or(?) still learning...

Here is my code:

    $(".upload-button").live("click", function(event) {
       event.preventDefault();
       var currentId = $(this).closest("div").attr("id").replace("slide-", "");
       new AjaxUpload($(this), {
         action: "./php/upload.php",
         name: 'userfile',
         autoSubmit: true,
         onSubmit: function(file , ext) {
       },
       onComplete: function(file, response) {
         // enable upload button
         // this.enable();
         $("#slide-" + currentId).find(".movie-image").attr("src", baseImgPath + file);
         $("#mImg" + currentId).val(file);
      }  
   });

Any ideas are appreciated. :)

Answer 1

try this:

   var $button = $(".upload-button");
   new AjaxUpload($button, {
         action: "./php/upload.php",
         name: 'userfile',
         autoSubmit: true,
         onSubmit: function(file , ext) {
       },
       onComplete: function(file, response) {
         // enable upload button
         // this.enable();
         var currentId = $(this).closest("div").attr("id").replace("slide-", "");
         $("#slide-" + currentId).find(".movie-image").attr("src", baseImgPath + file);
         $("#mImg" + currentId).val(file);
      }  
   });

Answer 2

Got it worked out - here's how for anyone else that might be having a similar issue...

The main issue was that these buttons were being created dynamically, and AjaxUpload will not be initially bound in the .live() call, hence the "click, move, click again, trigger".

By calling AjaxUpload (wrapped in it's own function, as below), within my loop as the buttons are created, they are initially bound, and function properly.

The line used in the loop:

makeUpButton(("#upload-button-" + slideCount), slideCount);

The AjaxUpload call:

function makeUpButton(theButton, theId) {
    new AjaxUpload(theButton, {
        action: "./php/upload.php",
        name: 'userfile',
        autoSubmit: true,
        onSubmit: function(file , ext) {
            this.disable();
        },
        onComplete: function(file, response) {
            this.enable();
            $("#slide-" + theId).find(".movie-image").attr("src", baseImgPath + file);
            $("#mImg" + theId).val(file);
        }       
    });
}

Hope this helps someone, I know it was driving me nuts for a few days. ;) Cheers.

Answer 3

Hey TwstdElf

I still cant understand how u got it working.

Can u help

-n4v33n