« Return to Thread: Improvements in Ajax facilities

Re: Improvements in Ajax facilities

by ashutosh bijoor-2 :: Rate this Message:

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(){
            eval( 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 eval - 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(){
                    eval.call(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 call 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 eval 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
Ashutosh

On 8/17/06, Taku Sano (Mikage Sawatari) <mikage@...> wrote:

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]
http://pepper.sherry.jp/jquery/newajaxpatch-svn208.patch

[test page]
http://pepper.sherry.jp/jquery/newajaxfunc.html

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
discuss@...
http://jquery.com/discuss/

--
Reach1to1 Communications
http://www.reach1to1.com
bijoor@...
98201-94408
_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

« Return to Thread: Improvements in Ajax facilities