Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript Jquery UI concern

Posted on 2010-11-11
8
Medium Priority
?
720 Views
Last Modified: 2013-11-19
I used to build all my web based apps using frames, later I switched to iframes, and now it seems that iframes are not very well accepted (XHTML Strict), so I switched to object tag.

Internet explorer, does not behave well with <object> tag, It does weird things that other browsers don't. (I hate it).

Today I "discovered" Jquery, and it's UI plugin excellent tool. However there is something that concerns me.

let's say that I have the following code.

<html>
head....
styles....
scripts...
<body>
<div id="x">
</div>
</body>

In some point of the code I add some action for a click event, that loads div "x" with code from another html document using jquery's load function.

$('#x').load('myotherpage.html');

It works like a charm, however.. what happens to the <html> head styles scripts etc.. from the other page?

Are they lost?, combined?.. should I avoid adding lots of stuff on these areas on the page to be loaded on to a div?..  In general what are the best practices when using this load() techinque..?

I could create some server side script that sends only "body".. but it would require to recode many many old code..

So my main concern is: is it correct to send a complete HTML document including body head scripts styles etc.. as a response to the load() function?

0
Comment
Question by:egarciat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 3

Author Comment

by:egarciat
ID: 34114676
I forgot to menction, that the to-be-loaded-in-a-div content, is generally complex and mostly contains forms, the forms are standard however an script (in the head area) controls most of the operations of the form such as client side validation, click handlers for dynamic data etc..  So it is not possible to create a single script on the initial page that handles all the events for all possible forms that could be loaded in a div. They had to be undependant of each other.

0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 34115143
I would venture a guess that it is grabbing whatever is inside the <body></body> and placing that as the content of the element you are loading it into. So anything above <body> or below </body> would be removed. Since I can't find documentation on their site that says this is so, I am just making an educated guess.

If you would put the javascript inside the <body> tag it would probably include it.

0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 34115219
hmm, actually i just tested this, and

it removes these tags

<html>
<head>
</head>
<body>
</body>
</html>

but includes everything inside those tags, except it completely removes any <script> blocks

so it doesn't look like you can include javascripts at all with it.

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 6

Expert Comment

by:stilliard
ID: 34115523
You could try building an ajax request to do the same, except it wont auto strip out those parts. Then i think you would need to eval the result in order to execute any javascript.
0
 
LVL 26

Expert Comment

by:lenamtl
ID: 34115583
What Ii usually do is to embed the javascript page in the Head,
duplicate my javascript and give different name variable
and then call a div class name
<div class="section1">

I don't know if this is a best practice but it is working for me.

I used this method often, specially when I have several different UI calendar in a form.
0
 
LVL 1

Accepted Solution

by:
ikbentomas earned 500 total points
ID: 34119954
My answer on your question about retrieving complete HTML documents:
I would advise to retrieve only the HTML you need. This can be done two ways:
1. Only save the HTML you need in the file and subtract html, head, body tags etc.
2. Use jQuery load like this $('#result').load('test.html #container');
jQuery will then only load the element with the id container into the element with id result.

I suspected javascript would work and I just did a test to check if javascript is loaded when using jQuery.load. And the inline <script> tags are not inserted in the code but the javascript is executed and stored in the memory. So any javascript function that has been loaded via jQuery.load is not traceable but it is surely present and working.

jQuery load states:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Another hint if you like jQuery: use the api documentation, it is one of the best documented frameworks available.
0
 
LVL 6

Assisted Solution

by:mickey159
mickey159 earned 500 total points
ID: 34143544
To include Javascript,make it a js file and use $.getScript();

Good luck!
0
 
LVL 3

Author Comment

by:egarciat
ID: 34147160
I just did some testing, and found that jquery load is smart enough. It behaves almost, ALMOS like an iframe or frame or object.

All I had to do was to include the container in all calls of javascript inside the "other page". $('#myapp #mywhatever').doSometing instead of $('#mywhatever')...
and it works, no unexpected behavior nor errors in the console, so I will continue in that direction.

Thanks for all suggestions.

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question