Improvements in Ajax facilities

[Mikage Sawatari (Taku Sano)]

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/

[ashutosh bijoor-2]

These are very important issues that you have addressed. Thanks for sharing the work.
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/

[Jason Yeckel]

Good looking out i take it this all works with the ajax wrapper.

Jason Y
3spn.net

Taku Sano (Mikage Sawatari) 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/
>
>  

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[ashutosh bijoor-2]

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/

[John Resig]

This is an amazing set of fixes/updates. I poured through them, made
some tweaks, changes, and bug fixes and committed it to SVN.

The big change, from your code, is that 'failure' is now 'error' - to
be consistent with the current naming scheme. Keep up the great work!

--John


On 8/16/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/
>

--
John Resig
http://ejohn.org/
jeresig@...

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[John Resig]

> This solves the problem of making the scripts globally scoped.

Committed! That's a good fix, makes sense too.

> Does it behave the same in other browsers? Or is it just my browser? Or just
> me :-)

It should behave that way in all of them, since that feature wasn't
implemented, only inline Javascript worked. However, I just committed
a fix that implemented that :-)  Additionally, there is now a new
function:

$.getScript("foo.js");

This loads a script and evals it when it comes in. Thanks for the good
suggestions.

--John

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Larry Garfield]

On Wednesday 16 August 2006 23:30, John Resig wrote:

> It should behave that way in all of them, since that feature wasn't
> implemented, only inline Javascript worked. However, I just committed
> a fix that implemented that :-)  Additionally, there is now a new
> function:
>
> $.getScript("foo.js");
>
> This loads a script and evals it when it comes in. Thanks for the good
> suggestions.
>
> --John

o_O  So John, when is the 1.0 release due out so that all of this amazing
coolness in svn is available to the masses? :-)

--
Larry Garfield AIM: LOLG42
larry@... ICQ: 6817012

"If nature has made any one thing less susceptible than all others of
exclusive property, it is the action of the thinking power called an idea,
which an individual may exclusively possess as long as he keeps it to
himself; but the moment it is divulged, it forces itself into the possession
of every one, and the receiver cannot dispossess himself of it."  -- Thomas
Jefferson

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[John Resig]

> o_O  So John, when is the 1.0 release due out so that all of this amazing
> coolness in svn is available to the masses? :-)

This is my hit list:
http://proj.jquery.com/dev/bugs/2/

I knocked off about 5 of them, already, tonight and will do a couple
more before going to bed. I want 1.0 out by next Friday.

--John

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Andy Matthews-2]

Speaking of errors...

That's one thing I've really wanted. When using jQuery, I've noticed that
assuming all of the syntax is valid, if you run code that doesn't work,
nothing happens. No error message, nothing.

That makes debugging quite difficult because you have no idea where to
start.

Is there any way that jQuery could generate SOME sort of error, a default
alert box maybe) with error information?

<!----------------//------
andy matthews
web developer
certified advanced coldfusion programmer
ICGLink, Inc.
andy@...
615.370.1530 x737
--------------//--------->

-----Original Message-----
From: discuss-bounces@... [mailto:discuss-bounces@...]On
Behalf Of John Resig
Sent: Wednesday, August 16, 2006 11:28 PM
To: jQuery Discussion.
Subject: Re: [jQuery] Improvements in Ajax facilities


This is an amazing set of fixes/updates. I poured through them, made
some tweaks, changes, and bug fixes and committed it to SVN.

The big change, from your code, is that 'failure' is now 'error' - to
be consistent with the current naming scheme. Keep up the great work!

--John


On 8/16/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/
>

--
John Resig
http://ejohn.org/
jeresig@...

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[malsup]

Taku / John,

This is excellent stuff!  Great work.

Mike

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Jason Huck]

Andy Matthews wrote:

Speaking of errors...

That's one thing I've really wanted. When using jQuery, I've noticed that
assuming all of the syntax is valid, if you run code that doesn't work,
nothing happens. No error message, nothing.

That makes debugging quite difficult because you have no idea where to
start.

Is there any way that jQuery could generate SOME sort of error, a default
alert box maybe) with error information?

That would be stellar. Maybe I'm just too knew to jquery to understand how to go about debugging, but I keep running into this problem (since my newbie code is usually wrong, even if syntactically correct).

The only error I ever see in the console is "f has no properties", jquery.js line 14, which obviously isn't my code. :P

Cheers,
Jason