Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2008
    Location
    Los Angeles
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question jQuery + AjaxUpload + dynamic button, have to click twice?

    Hey all, I have dynamically generated buttons (anchor tags really), that I need to link to the AjaxUpload functionality. The upload is working fine, but I have to click the button/link once (nothing happens), move my mouse off of the button, and click it a second time before it will actually trigger the expected action(?)

    My initial code was:
    Code:
    $(".upload-button").live("click", function(event) {
    	event.preventDefault();
    	var buttonId = $(this).attr("id");
    	var currentId = $(this).attr("id").replace("upload-button-", "");
    	var upButton = $("#" + buttonId);
    	new AjaxUpload(upButton), {
    		action: "./php/upload.php",
    		name: 'userfile',
    		autoSubmit: true,
    		onSubmit: function(file , ext) {
    			this.disable();
    		},
    		onComplete: function(file, response) {
    			this.enable();
    			$("#slide-" + currentId).find(".movie-image").attr("src", baseImgPath + file);
    			$("#mImg" + currentId).val(file);
    		}
    	}
    });
    And then I tried re-working it as:
    Code:
    $(".upload-button").live("click", function(event) {
    	event.preventDefault();
    	var currentId = $(this).attr("id").replace("upload-button-", "");
    	makeUpButton($(this), currentId);
    });
    
    function makeUpButton(theButton, theId) {
    	// alert("Upload function fired - Button: " + theButton + " / ID: " + 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);
    		}		
    	});
    }
    Both work, but *still* have the "clicking twice" issue... ?
    This is driving me nuts, any help would be appreciated.
    Thanks,
    TE

  • #2
    New Coder
    Join Date
    Oct 2008
    Location
    Los Angeles
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    makeUpButton(("#upload-button-" + slideCount), slideCount);
    The AjaxUpload call:

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

  • #3
    New to the CF scene
    Join Date
    Mar 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Please could you post your jquery code as i have the following and its not working

    Code:
    jQuery(document).ready( function(){
    							/*jQuery(".imageUpload").live("click", function(event) {
    								event.preventDefault();
    								var currentId = jQuery(this).attr("id");
    								makeUpButton(jQuery(this));
    								});*/
    							
    								jQuery('.imageUpload').click(function() {
    
    								var currentId = jQuery(this).attr("id");
    								 makeUpButton(("#"+currentId));
    								 });
    							});
    							
    							function makeUpButton(theId) {
    									new AjaxUpload(theId, {
    												action: 'upload-test.php',
    												name: 'userfile',
    												autoSubmit: true,
    												responseType: 'json',
    												onChange: function(file, ext){
    												},
    												onSubmit: function(file, extension) {
    													jQuery('div#preview'+this._id).addClass('loading');
    													
    												},
    												onComplete: function(file, response){
    													jQuery('#preview'+this._id).removeClass('loading');
    													jQuery('img#thumb'+this._id).attr('src', response);
    												}
    											});
    									
    							}

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ajaxupload

    i have a button that is build dynamicaly and m trying to bind this upload to the button but it does not work... pls help

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by baz7621 View Post
    Hi,

    Please could you post your jquery code as i have the following and its not working

    Code:
    jQuery(document).ready( function(){
    		/*jQuery(".imageUpload").live("click", function(event) {
    You have commented out the code.

    Also, I'm not sure that 'preventDefault()' is required, and might confuse the current event?! When you click a button it doesn't do anything significant - well, apart from pushing in and out and maybe issuing a audible click - unless you've assigned a 'click' event.

    If, for some reason, you need to prevent default behaviour, you could move this statement to the end of your event procedure.

    Added: Just noticed that you've edited out the 'live' version - but you need this if you are dynamically adding buttons.
    Last edited by AndrewGSW; 04-29-2011 at 11:50 AM. Reason: Just noticed
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •