Clicky

I have a landing page that pulls in another HTML page on my site using jQuery.load function:

 $('#myelement').load('form.html');                             
1: 

Select allOpen in new window



What I would like to happen is to be able to fire all the JavaScript that the form.html page contains before getting displayed onto the landing page using jQuery.load.

Is there some AJAX functions I can use to do this?

At the moment I have some fields in my "form.html" page that get populated from a JavaScript file. It seems that my page is getting pulled to my landing page and then the JavaScript contained in the "form.html" page gets fired. But it takes a couple of milliseconds for the fields to get populated.

I understand this maybe a really stupid question. But I thought I'd should ask the experts.

asked 12/14/2011 05:25

R1ND3R's gravatar image

R1ND3R ♦♦


6 Answers:
The script operates on the document object, and cannot reference anything in the page until it has been loaded into the object by the browser which also renders as part of the load process. You could the content come in styled with display none, and change it to display block after the data has been inserted.  Other than that the script is not going to get ahead of the page.


Cd&
link

answered

COBOLdinosaur's gravatar image

COBOLdinosaur

Yeah - what dinosaur said.
Set up your page up with #myelement set as display:none, run the load, then run $('#myelement').toggle(); to show the loaded (and presumably processed) element.
Depending on what you are doing in your form.html's JS... you may need to pause a second before showing it.
link

answered 2011-12-14 at 15:14:31

nap0leon's gravatar image

nap0leon

Thanks for the replies.

This is what I have so far:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
function GetLearningContent(id) {
        SetLoading();

	//Populate HTML with form details
        GetFormInfo(id);

	SetLoading();
}

function SetLoading() {
        $(".loading").toggle();
        $("#form-container").toggle();
}


The "GetLearningContent()" function loads in the document.ready({}) the page. By default the $(".loading") container is displayed and $("#form-container") is hidden.

For some reason, the $("#form-container") never gets shown. Just the loading div.
link

answered 2011-12-14 at 15:32:32

R1ND3R's gravatar image

R1ND3R

If I'm reading that right, ithink you are toggling twice.  Is that what you want to do?



Cd&
link

answered 2011-12-15 at 04:47:11

COBOLdinosaur's gravatar image

COBOLdinosaur

Got it working thanks to COBOLdinosaur and nap0leon.

COBOLdinosaur,  you were right I was accidentally toggling twice which is something I didn't need to do.
link

answered 2011-12-15 at 07:19:52

R1ND3R's gravatar image

R1ND3R

Glad we could help. :^)


Cd&
link

answered 2011-12-16 at 02:02:56

COBOLdinosaur's gravatar image

COBOLdinosaur

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×125
×63

Asked: 12/14/2011 05:25

Seen: 299 times

Last updated: 12/15/2011 06:02