Welcome to WebmasterWorld Guest from 54.166.46.226

Forum Moderators: open

Message Too Old, No Replies

Interesting bug in jQuery 2.0

   
10:53 pm on May 13, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I have a standard $.ajax() call in my script. It requests HTML (in this case an HTML table row) from a given URL and then inserts it somewhere on the page.

The returned string sometimes contains newline characters or tabs. Prior to version 2.0, both of these worked:

$(data).appendTo(elem);
$(data).prependTo(elem);

After upgrading to jQuery 2.0, newlines and tabs must be removed. Simply replacing them with spaces still triggers the same bug (even though there are spaces elsewhere in the string which work fine).

Interesting, and annoying ...
11:02 pm on May 13, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



What is the bug? What happens?
11:40 pm on May 13, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



jQuery throws an error saying "[contents of data] is not a function".
5:13 am on May 14, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Does $(data) alone fail ?
3:20 pm on May 14, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Ok, did some more testing.

On really long strings, series of \t\r\n present in $(data) may trigger the error. Also, the presence of anything that looks like a JS comment (//, /*, */) may trigger a different error (unrecognized expression).

In both cases, $(data) alone fails.
3:39 pm on May 14, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



So, I see the same behavior with both 1.9 and 2.0. The behavior I see is that if the data is a complete HTML page (with doctype, etc.), then jQuery won't treat it as an element. That is, $(data).find("validSelector") will not find any elements. However, if I wrap the results in a <div></div> first, then it works.

Here's an example using jQuery 2.0:
[jsfiddle.net...]

And here's the same example using jQuery 1.9.1:
[jsfiddle.net...]

They both work, but if I remove the wrapping div, they both fail.
5:51 am on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Try $.parseHTML()

If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with <tag ... >).
...
For explicit parsing of a string to HTML, use the $.parseHTML() method.


[api.jquery.com...]
1:34 pm on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



No good. That returns an array and then you end up with "Uncaught TypeError: Object [object Array] has no method 'find'"
[jsfiddle.net...]
3:29 pm on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



And in my case, it's a valid block of HTML (<div>...</div> or <tr>...</tr>) ...
3:58 pm on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Any way you can get it down to a base case, since I can't seem to reproduce it?