jQuery AjaxUpload, have to click button twice?

Question

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. :)

edit your post (codes) please... it's hard to read...

Reigel Gallarde
– Reigel Gallarde

2010-01-25 19:00:57 +00:00
Commented Jan 25, 2010 at 19:00 — Reigel Gallarde
– Reigel Gallarde, Commented Jan 25, 2010 at 19:00

TwstdElf · Accepted Answer · 2010-01-28 19:19:13Z

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.

edited Jan 28, 2010 at 19:19

answered Jan 26, 2010 at 17:16

TwstdElf

1711 silver badge11 bronze badges

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

4 Comments

Tim Banks Over a year ago

Please update your original post instead of posting this as an answer

TwstdElf Over a year ago

@TB - Sorry about that, I did not have an account when I made the original post, and could not see a way to edit it once I came back to it today. I do have an account now, and will do so in the future.

Alfred Over a year ago

consider marking this answer as "accepted" by clicking the "tick" or "check" icon next to it

ksg91 Over a year ago

Had the similar issue. I attached listen by firing a custom event when that button is added dynamically, captured event and instantiate AjaxUpload on that element. :)

fnd99 · Accepted Answer · 2010-11-30 04:25:48Z

2

Try this :

$(".upload-button").live("hover", function(event) {

   var currentId = $(this).closest("div").attr("id").replace("slide-", "");
   new AjaxUpload($(this), {
     action: "./php/upload.php",
     name: 'userfile',
     autoSubmit: true,
     onSubmit: function(file , ext) {
         //onsubmit code here..
     },
     onComplete: function(file, response) {
         // oncomplete code here
     }  
   });
   $(this).trigger('click');

});

Mine working but I'm not really sure how it works. The 'hover' (instead of 'click') will create a new AjaxUpload (this will prevent from click it twice)

answered Nov 30, 2010 at 4:25

fnd99

211 bronze badge

Comments

Yamaneko · Accepted Answer · 2012-10-18 17:13:16Z

If you are creating a dynamic button, you need create a AjaxUpload using a ID for each button, try this:

// to add new button                                                                                                                                  
$("#add_sector").click(function() {
    var ID = [Generate a new ID];
    var button = '<a href="javascript:;" id="' + ID + '" class="subir_imagen"><img src="images/icon_subir32.png"></a>';


    $('#cont_img_catalogo').append(button);

    //create Ajax                                                                                                                                     
    new AjaxUpload($('#' + ID ),{
      action: 'procesar_imagen.php',
          name: 'image',
          onSubmit : function(file, ext){
          // desabilitar el boton                                                                                                                     
          this.disable();
          ...
            },
          onComplete: function(file, response){
          // Habilitar boton otra vez                                                                                                                 
          this.enable();

          ...

            }
      });



  });

To delete button use:

$('#' + ID).fadeOut("slow", function() { $('#' + ID).remove(); });

if you use img, you need the class

a, a:visited{
display: block;
float: left;
text-decoration:none;}

Reigel Gallarde · Accepted Answer · 2010-01-25 19:12:03Z

0

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);
      }  
   });

answered Jan 25, 2010 at 19:12

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Comments

Flexo - Save the data dump · Accepted Answer · 2012-08-10 17:33:02Z

0

<script type="text/javascript">

 $(document).ready(function() {
      $('#yourlinkorbutton').click(function(){

              new AjaxUpload('#yourlinkorbutton'),{

                  ....

              });
     });

     $('#yourlinkorbutton').trigger.click();
     $('#yourlinkorbutton').trigger.click();
});

that will get you two click when the page loads. one click from there on.

edited Aug 10, 2012 at 17:33

Flexo - Save the data dump♦

89.1k22 gold badges205 silver badges286 bronze badges

answered Aug 10, 2012 at 15:06

dje2e4

1

1 Comment

Mick MacCallum Over a year ago

To improve the quality of your post please include how/why your post will solve the problem.

Suresh Sekar · Accepted Answer · 2013-04-05 06:09:11Z

if you using dynamic control , that time we are facing problem in twice click, i have solved that it is working for me. i has spend two days and solve that please check below steps:=

Add java script load function in php looping for each using below

<?php
for ($i=1; $i<=5; $i++)
  {
?>
<script>
$(window).load(function () 
        {
        uploadphoto(<?php echo $i; ?>)                
            });
</script>
<a href="javascript:void(0)" id="photo<?php echo $i; ?>" onclick="uploadphoto(<?php echo $i; ?>)" style="color: #666;"> Upload </a>
<?php

}
?>

and your javascript file you can get dynamic id from php loop

function  uploadphoto(id)
{

new AjaxUpload('#photo'+id, {

so, you can pass dynamic ID above sample line, that's it :) happy coding

Collectives™ on Stack Overflow

jQuery AjaxUpload, have to click button twice?

6 Answers 6

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related