JQuery AjaxUpload, need to double click a button?

Question

I use the AjaxUpload plugin with jQuery and everything works fine for the most part, but I have to double click on my button to get it to execute. I assume this is a problem with the area ... 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 welcome. :)

Answer 1

I realized that it worked - that’s how it is for someone else who might have a similar problem ...

The main problem was that these buttons were created dynamically, and AjaxUpload was not initially attached to the .live () call, so "click, move, click again, trigger."

AjaxUpload ( , ), .

, :

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

AjaxUpload:

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

, -, , .;) .

Answer 2

:

$(".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');   

});

, , . "Hover" ( 'click') AjaxUpload ( )

Answer 3

, AjaxUpload , :

// 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();

          ...

            }
      });



  });

:

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

img,

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

Answer 4

:

   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 5

<script type="text/javascript">

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

              new AjaxUpload('#yourlinkorbutton'),{

                  ....

              });
     });

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

, . .

Answer 6

if you use dynamic control, at this time we are faced with a problem twice, I decided that it works for me. I spent two days and decided that please check the steps below: =

Add java script loading function in php-looping for each of the following

<?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 the dynamic id above the line of the example that it is: happy happy