[jQuery] eval.call( window,jscode) does not work in IE
The solution suggested earlier for executing javascript code embedded in HTML returned by an ajax call by using eval.call(window,...) works great in FF, but not in IE6.
eval.call(window,jscode) still executes in the context of the block in which eval is called. Hence, any functions that are defined in the loaded javascript are not available outside.
i tried all kinds of things to get around this such as :
with (window) {
eval(jscode);
}
I thought maybe the prototype guys have cracked this problem, but alas - they do not even do the eval.call
(window,...) so I expect their code will not even work in FF.
Any suggestions?
How can we change the execution context of eval?
Regards
Ashutosh
<div><span class="gmail_quote">On 8/17/06, <b class="gmail_sendername">
ashutosh bijoor</b> <<a href="mailto:bijoor@gmail.com">bijoor@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div>On a related issue to load, I was running into trouble with the embedded script execution that jquery does by default as follows:
// Execute all the scripts inside of the newly-injected HTML
$("script", self).each(function(){
<span id="st" name="st" class="st">eval</span>( this.text || this.textContent || this.innerHTML || "");
});
I noticed in my tests in FF 1.5, that if there are any functions defined in the script tags, these functions have scope only in the block containing the
<span id="st" name="st" class="st">eval</span> - in this case, the callback function for each, and hence these are unavailable in the global scope.
To circumvent this problem, I did the following:
// Execute all the scripts inside of the newly-injected HTML
$("script", self).each(function(){
<span id="st" name="st" class="st">eval</span>.<span id="st" name="st" class="st">call</span>(window,this.text || this.textContent || this.innerHTML || "");
});
This solves the problem of making the scripts globally scoped.
I also noticed during my tests that the scripts which loaded external js files were also giving me trouble. But before I suggest my solution for the same, I'd like some inputs on whether this problem is genuine.
To illustrate the above problems, assume we make an ajax <span id="st" name="st" class="st">call</span> as follows:
$('#mydiv').load('test.html');
and test.html contained:
<script type="text/javascript">
function myfunc() {
alert("Hi");
}
</script>
<script type="text/javascript" src="myfile.js">
<input type="button" value="click here" onclick="myfunc()">
<input type="button" value="click here too" onclick="myotherfunc()">
And myfile.js contained :
function myotherfunc() {
alert("MyOtherFunc");
}
Now once test.html is loaded in mydiv, if we click on the two buttons, we should expect the respective alerts, right?
Well no - it did not work that way for me. And then with a little bit of digging, I found the following:
1. The first script was indeed executed, but the myfunc() was defined only in the scope of the <span id="st" name="st" class="st">eval</span> block. So the above fix worked for solving this problem.
2. For the other script tag <script type="text/javascript" src="
myfile.js">, somehow myfile.js did not get loaded at all! For now, I've fixed this in a round-about way by actually adding a script tag to the head etc. But would appreciate if someone could give me inputs regarding this problem.
Does it behave the same in other browsers? Or is it just my browser? Or just me :-)
Regards
</div><div><span class="sg">Ashutosh
</span></div><div><div></div><div><span class="q"><span class="gmail_quote">On 8/17/06, <b class="gmail_sendername">Taku Sano (Mikage Sawatari)</b> <<a href="mailto:mikage@ymirlink.co.jp" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mikage@ymirlink.co.jp</a>> wrote:</span></span></div><div><span class="e" id="q_10d1a33544997bae_4"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
With Ajax facilities of jQuery, it is not easy to deal with errors. In
addition, it is inconvenient to repeat reloading the same URL to
observe changes. Please confirm my patch handles these issues.
[patch for
svn.208]
<a href="http://pepper.sherry.jp/jquery/newajaxpatch-svn208.patch" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://pepper.sherry.jp/jquery/newajaxpatch-svn208.patch</a>
[test page]
<a href="http://pepper.sherry.jp/jquery/newajaxfunc.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://pepper.sherry.jp/jquery/newajaxfunc.html
</a>
Problems:
- $().load() replaces the HTML regardless of whether the request has
succeeded or failed. Therefore it is impossible to customize an error
message to show.
- Callback functions can't learn if the request has succeeded or not.
- It's true that there are methods that are called on error. But even
if it failed, DOM elements are always replaced, and callbacks are
always called.
- There are no ways to set timeout. In case of a server doesn't respond,
we can't abort the request after a few seconds and display an error.
Improvements:
- Callbacks for $().load(), $.get, $.post now takes the second argument
which represents a state ("success", "failure", "notmodified").
- $().load() no longer replaces the HTML on error, if a callback is
supplied. Without a callback, it replaces the HTML on error as it
used to do.
- $().load(), $.get, $.post now can timeout. When it timed out, the state
becomes "failure" and treated as an error.
$.ajaxTimeout(1000); // ms
$().load();
- Added 2 ajax methods:
$().loadIfModified();
$.getIfModified();
These methods set If-Modified-Since header to Ajax requests. They are
useful when we periodically reload the same URL to see changes.
They work the same way as $().load and $.get if the URL is updated.
When it is unchanged, ().load doesn't replace the URL but does callback.
In that case, the state will be "notmodified".
Since IE always returns the same cached content for the same URL, it is
normally impossible to check changes. It's true that it is possible to
force not to use cache by appending some random characters as query of
the URL, but then we waste the traffic needlessly. $().loadIfModified()
and $.getIfModified() solve this problem.
----
Taku Sano
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://jquery.com/discuss/</a>
</blockquote>
</span></div><div></div>
<br clear="all"></div><div><span class="e" id="q_10d1a33544997bae_6">
--
Reach1to1 Communications
<a href="http://www.reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.reach1to1.com</a>
<a href="mailto:bijoor@reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">bijoor@reach1to1.com</a>
98201-94408
</span></div></blockquote></div>
<br clear="all">
--
Reach1to1 Communications
<a href="http://www.reach1to1.com">http://www.reach1to1.com</a>
<a href="mailto:bijoor@reach1to1.com">bijoor@reach1to1.com</a>
98201-94408
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
eval.call(window,jscode) still executes in the context of the block in which eval is called. Hence, any functions that are defined in the loaded javascript are not available outside.
i tried all kinds of things to get around this such as :
with (window) {
eval(jscode);
}
I thought maybe the prototype guys have cracked this problem, but alas - they do not even do the eval.call
(window,...) so I expect their code will not even work in FF.
Any suggestions?
How can we change the execution context of eval?
Regards
Ashutosh
<div><span class="gmail_quote">On 8/17/06, <b class="gmail_sendername">
ashutosh bijoor</b> <<a href="mailto:bijoor@gmail.com">bijoor@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div>On a related issue to load, I was running into trouble with the embedded script execution that jquery does by default as follows:
// Execute all the scripts inside of the newly-injected HTML
$("script", self).each(function(){
<span id="st" name="st" class="st">eval</span>( this.text || this.textContent || this.innerHTML || "");
});
I noticed in my tests in FF 1.5, that if there are any functions defined in the script tags, these functions have scope only in the block containing the
<span id="st" name="st" class="st">eval</span> - in this case, the callback function for each, and hence these are unavailable in the global scope.
To circumvent this problem, I did the following:
// Execute all the scripts inside of the newly-injected HTML
$("script", self).each(function(){
<span id="st" name="st" class="st">eval</span>.<span id="st" name="st" class="st">call</span>(window,this.text || this.textContent || this.innerHTML || "");
});
This solves the problem of making the scripts globally scoped.
I also noticed during my tests that the scripts which loaded external js files were also giving me trouble. But before I suggest my solution for the same, I'd like some inputs on whether this problem is genuine.
To illustrate the above problems, assume we make an ajax <span id="st" name="st" class="st">call</span> as follows:
$('#mydiv').load('test.html');
and test.html contained:
<script type="text/javascript">
function myfunc() {
alert("Hi");
}
</script>
<script type="text/javascript" src="myfile.js">
<input type="button" value="click here" onclick="myfunc()">
<input type="button" value="click here too" onclick="myotherfunc()">
And myfile.js contained :
function myotherfunc() {
alert("MyOtherFunc");
}
Now once test.html is loaded in mydiv, if we click on the two buttons, we should expect the respective alerts, right?
Well no - it did not work that way for me. And then with a little bit of digging, I found the following:
1. The first script was indeed executed, but the myfunc() was defined only in the scope of the <span id="st" name="st" class="st">eval</span> block. So the above fix worked for solving this problem.
2. For the other script tag <script type="text/javascript" src="
myfile.js">, somehow myfile.js did not get loaded at all! For now, I've fixed this in a round-about way by actually adding a script tag to the head etc. But would appreciate if someone could give me inputs regarding this problem.
Does it behave the same in other browsers? Or is it just my browser? Or just me :-)
Regards
</div><div><span class="sg">Ashutosh
</span></div><div><div></div><div><span class="q"><span class="gmail_quote">On 8/17/06, <b class="gmail_sendername">Taku Sano (Mikage Sawatari)</b> <<a href="mailto:mikage@ymirlink.co.jp" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
mikage@ymirlink.co.jp</a>> wrote:</span></span></div><div><span class="e" id="q_10d1a33544997bae_4"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
With Ajax facilities of jQuery, it is not easy to deal with errors. In
addition, it is inconvenient to repeat reloading the same URL to
observe changes. Please confirm my patch handles these issues.
[patch for
svn.208]
<a href="http://pepper.sherry.jp/jquery/newajaxpatch-svn208.patch" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://pepper.sherry.jp/jquery/newajaxpatch-svn208.patch</a>
[test page]
<a href="http://pepper.sherry.jp/jquery/newajaxfunc.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://pepper.sherry.jp/jquery/newajaxfunc.html
</a>
Problems:
- $().load() replaces the HTML regardless of whether the request has
succeeded or failed. Therefore it is impossible to customize an error
message to show.
- Callback functions can't learn if the request has succeeded or not.
- It's true that there are methods that are called on error. But even
if it failed, DOM elements are always replaced, and callbacks are
always called.
- There are no ways to set timeout. In case of a server doesn't respond,
we can't abort the request after a few seconds and display an error.
Improvements:
- Callbacks for $().load(), $.get, $.post now takes the second argument
which represents a state ("success", "failure", "notmodified").
- $().load() no longer replaces the HTML on error, if a callback is
supplied. Without a callback, it replaces the HTML on error as it
used to do.
- $().load(), $.get, $.post now can timeout. When it timed out, the state
becomes "failure" and treated as an error.
$.ajaxTimeout(1000); // ms
$().load();
- Added 2 ajax methods:
$().loadIfModified();
$.getIfModified();
These methods set If-Modified-Since header to Ajax requests. They are
useful when we periodically reload the same URL to see changes.
They work the same way as $().load and $.get if the URL is updated.
When it is unchanged, ().load doesn't replace the URL but does callback.
In that case, the state will be "notmodified".
Since IE always returns the same cached content for the same URL, it is
normally impossible to check changes. It's true that it is possible to
force not to use cache by appending some random characters as query of
the URL, but then we waste the traffic needlessly. $().loadIfModified()
and $.getIfModified() solve this problem.
----
Taku Sano
_______________________________________________
jQuery mailing list
<a href="mailto:discuss@jquery.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">discuss@jquery.com</a>
<a href="http://jquery.com/discuss/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://jquery.com/discuss/</a>
</blockquote>
</span></div><div></div>
<br clear="all"></div><div><span class="e" id="q_10d1a33544997bae_6">
--
Reach1to1 Communications
<a href="http://www.reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.reach1to1.com</a>
<a href="mailto:bijoor@reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">bijoor@reach1to1.com</a>
98201-94408
</span></div></blockquote></div>
<br clear="all">
--
Reach1to1 Communications
<a href="http://www.reach1to1.com">http://www.reach1to1.com</a>
<a href="mailto:bijoor@reach1to1.com">bijoor@reach1to1.com</a>
98201-94408
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Topic Participants
bijoor
francisco.brito
brandon_aaron
John Resig