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!

Can you console.log avatar.url in onComplete to see its value? — wong2, Jun 23 '11 at 13:59
@Neal src is both: an attribute of DOM and a property of Image object. — Karolis, Jun 23 '11 at 14:02
@Karolis -- read the chart on this site http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ to see what should be used with `prop` and what with `attr` — Naftali, Jun 23 '11 at 14:03
@Neal hm... a little confusing jQuery approach. I thouhgt jQuery attributes are attributes of DOM, and jQuery properties are properties of JavaScript objects. But they made some kind of a mix :) Anyway thanks. — Karolis, Jun 23 '11 at 14:14
@Karolis, that is how the new `prop()` function works... (you can see my question http://stackoverflow.com/questions/5874652/prop-vs-attr for the debate) — Naftali, Jun 23 '11 at 14:15
@Neal Yeah, it was interesting. Most of the information was know to me. But I still don't understand why they didn't implemented such properties like `href` and `src` :) — Karolis, Jun 23 '11 at 14:39

score 3 · Answer 1 · answered Jun 23 '11 at 13:59

3

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

answered Jun 23 '11 at 13:59

Naftali

144,921
39
244
303

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! – dana Jun 23 '11 at 14:04
@dana -- this is for `avatar` or `avatar.url`? – Naftali Jun 23 '11 at 14:06
also for avatar.url: console.log(avatar.url) and console.log(avatar) – dana Jun 23 '11 at 14:08
@dana you tried @Alnitak's suggestion of `console.log(avatar);`? – Naftali Jun 23 '11 at 14:08
@dana try using `responseJSON` as it is defined in the spec instead of `avatar` – Naftali Jun 23 '11 at 14:10
not working. now, i get no broken image and no undefined, but still i have to refresh the page for the image to change – dana Jun 23 '11 at 14:12
@dana what about when u do `console.log(responseJSON);`? – Naftali Jun 23 '11 at 14:12
@dana are you sure your server response has a JSON value in it? – Naftali Jun 23 '11 at 14:14
ReferenceError: responseJSON is not defined – dana Jun 23 '11 at 14:17
though i have now request.JSON instead on avatar – dana Jun 23 '11 at 14:17
@dana... can you updat eyour question (by appending an update) to show what your code looks like surrently and what **ALL** the issues and nonissues are? – Naftali Jun 23 '11 at 14:18
i have edited it, though i have not got much to edit. i just replaced the avatar.url with the responseJSON. now it doesn;t even try to upload me the picture instantly, so it doesn;t show the broken image. not it shows me the old one after upload, until i am refreshing the page. – dana Jun 23 '11 at 14:22
@dana, append means **add on** not change.... make the function: `onComplete: function(id, fileName, responseJSON)` – Naftali Jun 23 '11 at 14:22
now it shows me the broken image instantly after upload again, and on image analysis i have instead of undefined – dana Jun 23 '11 at 14:29
same... ReferenceError: responseJSON is not defined – dana Jun 23 '11 at 14:34
@dana. where are u putting that console.log? can you put up your code on http://jsfiddle.net ? – Naftali Jun 23 '11 at 14:37
i try using jsfiddle but i'm not quite used to it – dana Jun 23 '11 at 14:44
@dana... i know what you are trying... goto http://chat.stackoverflow.com/rooms/17/javascript might be able to help you better over there – Naftali Jun 23 '11 at 14:45

score 0 · Answer 2 · answered Jun 23 '11 at 14:01

0

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.

answered Jun 23 '11 at 14:01

Alnitak

334,560
70
407
495

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

jquery attr problem

2 Answers2