SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

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

    Use same <li> for load and succes?

    I'm trying to set up an upload script in ajax using jquery and allmost got it working except 1 thing.

    Whenb a file is uploading a loading gif is shown within <li></li> tags. When the file is done the file is shown within <li></li> tags but in a new box... How do I get the uploading image to go into the same <li></li> box as trhe waiting animation gif?

    Here is what I have so far:
    Code JavaScript:
    $(function(){
    	var btnUpload=$('#upload');
    	var status=$('#status');
    	new AjaxUpload(btnUpload, {
    		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;
    			}
    			$('<li></li>').appendTo('#loadstatus').html('<img src="waiting.gif" />').addClass('success');
    		},
    		onComplete: function(file, response){
    			//Add the file to a list
    			if(response==="success"){
    				$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />').addClass('success');
    			} else{
    				$('<li></li>').appendTo('#files').text(file).addClass('error');
    			}
    		}
    	});
     
    });

    Code HTML4Strict:
    <div id="upload"><span>The file<span></div>
    <ul id="loadstatus" ></ul>
    <ul id="files" ></ul>

    Any ideas...?

  2. #2
    SitePoint Zealot xzyfer's Avatar
    Join Date
    Mar 2004
    Location
    oz
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you're adding the waiting img to '#loadstatus' but loading the file into '#file'. Why?

    Try changing the following:


    Code JavaScript:
    if(response==="success") {
        $('#loadstatus > li').html('<img src="./uploads/'+file+'" alt="" /><br />').addClass('success');
    } else{
        $('#loadstatus > li').text(file).addClass('error');
    }


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
  •