Great information! Exploration like this is what we all need. Good work.
However, I am dealing with these problems right now... I've addressed them
in Firefox and it works without issue; however, in Internet Exploder (6 & 7)
the issues occur. The issues I describe below only occur in IE.
Similar to what you described, I have a Master Layout (host) page that loads
content specified in a URL param (guest) via ".load()" into a <div> in the
Master Layout. This works perfectly until I load content that contains a
<form>.
The dynamically loaded content containing the <form> displays just fine.
However, I have a Jquery based Validation and Form submission script that
runs against the <form>. There are no JS errors and the the script seems to
not run. It seems that the scripts cannot access any of the <form> elements
contained in the dynamically loaded content.
I've tried various techniques to resolve this issue... I've moved the
scripts from the "guest" file to the "host" file and vice versa. I've added
functions to the "guest" file that call stored functions in the "host" file
to rebind the elements. I'm at a loss.
If there is a way to update the page's DOM when the dynamic content is
loaded? If so, this would probably address the issue?
Any suggestions?
Again, great work.
Norbert wrote:
>
> Dear all,
>
> I have spent quite a bit of time trying to make a dynamically-loaded
> page's scripts work in IE 7 and Firefox and would like to share with you
> the lessons I have learnt. You might find my discoveries obvious or
> trivial, but I am still going to post them in case they are useful to
> someone:
>
> I have a page (host page) that is loading another page (guest page) into a
> div via the .load() ajax function.
>
> The host page's <head> element contains links to all the project's
> JavaScript files (including jquery.js) and style sheets files.
>
> The guest page just contains links to the JavaScript files and style
> sheets files applicable to the content it is loading. However, these links
> are not put into the <head> section as IE seems to ignore links placed
> there (thanks to Chris Mcleod for sharing that with us at the end of
> August). The solution is to put these links into the <body> tag.
>
> The good news is that there is no need to re-load the JavaScript files and
> style sheets files that were loaded in the host page as these seem to be
> accessible from the guest page.
>
> If you have some inline scripts in the guest page (some of my JavaScript
> variables are dynamically generated via ASP.NET and therefore need to be
> inline), the order in which you place the script tags is important as IE
> and Firefox differ slightly:
>
> - If you put the linked script before the inline script, Firefox will
> execute the inline script before the linked script, whilst IE will execute
> the linked script before the inline script.
> - If you put the inline script before the linked script, both Firefox and
> IE will execute the inline script before the linked script.
>
> I use the second approach as it is consistent in the two browsers.
>
> Also, take into account that any $(document).ready placed in the guest
> page JavaScript code will be triggered as soon as it is found (it will not
> wait until the guest page is loaded). This being the case, I just place
> the code to be executed when the page is loaded at the bottom of the last
> loaded script.
>
> Another thing that has driven me crazy is the use of "var" in IE (Firefox
> doesn't seem to have this problem):
>
> In the host page (or any other normally loaded page) any variable declared
> with "var" has a limited scope only if it is declared within a context
> (for example a function). Any variable declared with "var" outside any
> context has a global scope and can be accessed from any other place in the
> code.
>
> In the guest page, however, any variable that is preceded with "var" will
> have a scope that is limited to the script in which it was declared (I
> imagine it has something to do with the eval statement used to execute the
> dynamically loaded script code). That means that, in my case, the
> variables that were declared in the inline script were not accessible from
> the code present in the linked scripts.
>
> The solution is to remove the "var" from the variable declarations. If you
> just put "myVariable = 'whatever';" you will be able to access
> "myVariable" from the rest of the scripts.
>
> A final thing I have discovered that is probably quite obvious is that the
> guest page JavaScript code can have an effect on the host page DOM. If,
> for example, your guest page loads the following JavaScript code
> "$('div').css('backgroundColor': '#F00');", all the divs in the host page
> will turn red. This is probably due to the fact we are loading the guest
> page into the host page (as oppossed to using an iframe). Tha means that
> you should be careful when using the jQuery selectors in the guest page
> JavScript code.
>
> Well, that's about it! I hope somebody finds this information useful. If
> you have found any other quirks regarding jQuery and IE 6 or 7, please
> share them! I have been quite surprised about the few posts that talk
> about IE 7 at all. Maybe I am the only one finding problems. Or maybe
> people have not started worrying about this new browser yet.
>
> I will take the chance to thank everybody involved in the development of
> jQuery and its plugins. you are doing a great job! Thanks!
>
--
View this message in context:
http://www.nabble.com/Dynamically-Loaded-Scripts-in-IE-7---Problems-Found-and-Lessons-Learned-tf2655919.html#a8396873
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
