jquery attr problem

Question

I am trying to upload a picture using jquery. and the upload should be done with no page refresh.

the code:

var uploader = new qq.FileUploaderBasic({
 element: document.getElementById('file-uploader'),
 button: $('#account #picture .header')[0],
 action: '<?= Route::url('Account Upload Avatar'); ?>',
 allowedExtensions: ['png', 'jpg', 'gif'],
 onSubmit: function()
 {
 },
 onComplete: function(id, fileName, avatar)
 {
 $('#loader').hide();
 $('#picture img').attr('src', responseJSON + '?' + (new Date).getTime());
 }
 });

and where i have the picture upload:

 <div id="picture">
 <div class="header">
 Schimba-ti poza
 </div>
 <img src="<?= $image->avatar_url ?>"></img>
 </div>

the problem is: the upload is done right, but i can see the new picture only if i refresh the page. otherwise, when i upload a new picture, the old one dissapears, and instead appears an image broken icon, and if i inspect the element, i see: <img id="picture" src="undefined?1308840720252"> so i get that undefined.. and i guess it is because that attr. i am using jquery 1.6.1 any ideas?

thank you!

• locrizak: what does a console.log(avatar) give you?
• Karolis: I think you should use prop instead of attr
• wong2: Can you console.log avatar.url in onComplete to see its value?
• Naftali: @Karolis -- read the chart on this site blog.jquery.com/2011/05/12/jquery-1-6-1-released to see what should be used with prop and what with attr
• Naftali: @Karolis, that is how the new prop() function works... (you can see my question stackoverflow.com/questions/5874652/prop-vs-attr for the debate)

Answer 1

Make sure there is a defined variable at avatar.url <-- which could be the cause of the issue

• dana: yes, i receive in the console an error: ReferenceError: avatar is not defined but i cannot really understand it. how can i define the variable at avatar.url? thanks!
• Naftali: @dana -- this is for avatar or avatar.url?
• dana: also for avatar.url: console.log(avatar.url) and console.log(avatar)
• Naftali: @dana you tried @Alnitak's suggestion of console.log(avatar);?
• Naftali: @dana try using responseJSON as it is defined in the spec instead of avatar

Answer 2

Your server side could should be returning valid JSON which will be parsed and sent to onComplete as the third function parameter.

If the JSON can't be received you'll receive an empty object.

Do:

console.log(avatar);

inside the callback to check what's actually in that third parameter.

• dana: i have commented above. it is not defined(the avatar)
• Alnitak: which suggests that you're not sending valid JSON. Next please show us what your server-side script is outputing.