The Loop

hehe its like that.. although i just accepted a complex JS project.. :( I need to learn to say no.. I always put myself under pressure lol.. sometimes best way to learn though

kaiser

I'm loading a png img i generate from a canvas element (bitmap). This gets then gets loaded inside a div #preview, by the click of a button onClick="trigger_function();", so it's then inside $( '#preview' ).children( 'img' );. Point is that I see the img on the viewport and with the console log, but I get an empty element, when I try to console.log it directly. It seems to be too fast, so I can't grap it, as it's then not ready loaded. Q: How would I wait until the img is loaded?

<button onClick="trigger_fn();" />
<div id="preview">
    <img src="~/whatever.png" /> <!-- This gets loaded by onClick function -->
</div>

userabuser

can i see your full snippet pls?

and functions

kaiser

Hm. That's a lot. 3 JS functions + mark up file + ajax.php file

Really want to see all?

userabuser

1:23 AM

would help to deduce

...so you cant cosole.log it right?

kaiser

I can console.log( jQuery( '#preview' ) );

Then I see:

<div id="preview">
    <img id="preview-img" src="http://example.com/export/test_2012-04-24.032445.png">
</div>

But console.log( jQuery( '#preview img' ) ); or console.log( jQuery( '#preview-img' ) ); gives me an empty []...

So my guess is that the log still listens to the #preview container and appends the img on the fly, but can't directly look it up. Conclusion: I need to somehow wait until the element with the #preview-img ID is loaded into DOM. But I dunno how.

userabuser

yeah it doesnt know of its existence

but just quickly... is there a purpose to you wanting to console this?

im talking about from a client/server perspective now

kaiser

Answer is: No, I don't need it... I drop it into a blanket window, force a SaveAs and imediately close the win again. But it tells me undefined. Therefore I know that not only the log doesn't know, but also the DOM.

Point is that I can see the image loaded in DOM.

userabuser

can you show me the url? just so i can debug on the fly

kaiser

Currently have it only locally... Server version is stable :) Maybe tomorrow/later? Would highly appreciate some help on this.

userabuser

1:38 AM

Yeah np

its definitely tied to the ajax here

kaiser

thanks :)

Btw: Not even the following works.

	self.app.requested_img.onreadystatechange = function()
	{
		if ( app.requested_img.readyState == 4 )
		{
			if ( app.requested_img.status == 200 )
			{
console.log( jQuery( '#preview-img' ) );
			}
		}
	};

userabuser

I think we need to be looking at: .ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )

because thats what gets returned on an ajax request

kaiser

Yeah, I guess I need to remodle this to use jQuery ajax.

↑ guess this will solve the problem, when it's integrated in the overall jQ concept.

userabuser

mm

$('#preview').ajaxComplete(function(event, XmlHttpRequest, ajaxOptions){
console.log(event);
console.log(XmlHttpRequest);
console.log(ajaxOptions);
}

kaiser

@userabuser This doesn't work. The request isn't there and I will first have to remodle it, but I'm out for today. Dead :)

userabuser

1:52 AM

k.. same.. pick up later

kaiser

thanks so far :)

userabuser

np all good

im off, cya

Transcript for