SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery finding the right list object?

    I'm trying to create an multiple upload script and the upload part is working fine, but...

    When a file is uploading a animated gif is shown in the list part <li></li>. If I only upload 1 at the time everything looks just fine and the animated gif is changed to the just uploaded image. Great!. But if I upload 2 or mare at the same time the problem is there. For each upload I start a list object is created. This part works fine, but when picture 1 is done uploading it is shown in the last created list object and the same is picture 2 overwriting picture 2. This is not good... How can I change this?

    Code JavaScript:
    var mynewLI = null;
    new aUpload(uploadBtn, {
    	action: 'upload.php',
    	name: 'uploadfile',
    	onSubmit: function(file, ext){
    		 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
    			// If the ext. is not allowed 
    			status.text('Only JPG, PNG or GIF files are allowed');
    			return false;
    		}
    		mynewLI = $('<li></li>').appendTo('#loadstatus').html('<img src="waiting.gif" />').addClass('success');
    	},
    	onComplete: function(file, response){
    		//Add the file to a list
    		if(response==="success"){
    			mynewLI.html('<img src="./uploads/'+file+'" alt="" /><br />').addClass('success');
    		} else{
    			mynewLI.text(file).addClass('error');
    		}
    	}
    });

    Thanks in advance :-)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You could use a data object, so that you use the name of the file to store the appropriate LI object.

    Code javascript:
    $('#loadstatus').data(file, mynewLI);

    That way, the appropriate LI can then be retrieved

    Code javascript:
    var mynewLI = $('#loadstatus').data(file);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You could use a data object, so that you use the name of the file to store the appropriate LI object.

    Code javascript:
    $('#loadstatus').data(file, mynewLI);

    That way, the appropriate LI can then be retrieved

    Code javascript:
    var mynewLI = $('#loadstatus').data(file);
    Hey Paul, Not sure where to insert this? I'm a new struggelar at this :-|

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by jmansa View Post
    Hey Paul, Not sure where to insert this? I'm a new struggelar at this :-|
    The first one goes at the end of the the onsubmit function, and the second one goes at the start of the complete function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The first one goes at the end of the the onsubmit function, and the second one goes at the start of the complete function.
    Thanks Paul, works like a charm... You just made my day ;-)


Bookmarks

Posting Permissions

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