jquery .load() not inserting data in ie8 and below - javascript

I've been looking for a solution all day, but I'm still seeing this error.
It's a Expression Engine setup for a client of ours and we want to implement ajax-navigation. For this we are using the default $.load() function and this works perfectly in ie9, FF, Safari, Chrome, Opera... but it doesn't work in ie8 and below.
I've tested the callback function, that one IS being called, the data is send, I can read it in the console when logging it. But for some odd reason the data isn't inserted.
Here is the code:
load_page: function(url, func){
$('#content').load(url+' #content>div', function(data, textStatus, jqXHR){
console.log('page loaded!');
});
}
There was a whole bunch of extra code in the callback function but I've been cleaning out the whole javascript/css everything. In search of bugs but nothing to be found.
Based on the comments I decided to add the url and a download:
The site this problem is found in: http://www.track.be/devo_9836/nl/ee.php
A packet of files, with the problem: http://stijnd.be/ie8_load.zip
Another piece of the puzzle:
There is something weird going on in the javascript. Even the google maps api doesn't function properly, that's the first time this happened to me when using the google maps api.
EDIT : Answered
I finally found the answer to this question, thanks to #epascarello. It is in fact the fault of the data I was trying to import. Because IE8 & below don't understand HTML5 they will try to import the elements into the dom, but when alerting the data I saw the following: [object HTMLUnknownElement], [object HTMLUnknownElement], [object HTMLUnknownElement],...
When I changed the markup of the data to use good old div's instead of article-elements, everything worked fine!

I had the same problem and I noticed that if the url returns invalid HTML (eg. extra end tag) it can stop it from loading or finding the correct element.
In my example all I had to do was correct the HTML from the URL and then it worked correctly.

ajax requests are cached in IE8, so just a little magic of
$.ajaxSettings.cache = false;
before the using load function
http://zacster.blogspot.in/2008/10/jquery-ie7-load-url-problem.html
http://api.jquery.com/jQuery.ajax/
cache (default: true, false for dataType 'script' and 'jsonp')
Type: Boolean
If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

The only thing I can see wrong with this code is you are missing a closing bracket
load_page: function(url, func){
$('#content').load(url+' #content>div', function(data, textStatus, jqXHR){
console.log('page loaded!');
} // <-- this one
});

$.load() works in IE8. My guess is you have a previous JS error, triggered only in IE8-, which prevents it from functioning properly, or being called altogether.

The problem is some functions are supported in one and not the others. For example one of my personal hates is how innertext is only supported in ie7,8 but not fox or chrome. Here is the compatability chart if you are interested http://www.quirksmode.org/dom/w3c_html.html .
Bottom line, unless you plan on changing the plugin yourself and you've already tried modernizer and that didn't help, you are going ot have to use another method of loading data. My suggestion is to use .html, you can not go wrong with that, or append and hand form the html yourself in the js. Simpler is always the best solution.

Related

why ajax error is different in IE and Chrome?

Lets take example of the following code below.
<script>
function abc()
{
$.ajax({
type: "GET",
url: "https://zx/abc/def",
timeout: 6000,
dataType: "jsonp",
error: function(h, j, e) {
console.log(h+" "+j+" "+e);
}
})
}
</script>
<button onclick="abc()">Start Call</button>
The url used above is a non-existant/invalid one. Now lets see whats the output of the above code in different browsers:
Chrome,firefox, IE 11 -> [object Object] timeout timeout
IE 8,9,10 -> [object Object] parsererror Error: jQuery111308894510177821542_1433915740650 was not called
So the question why we get different error messages?
Where do we start on this.
Do we target the answer to first time ajax programmers, or to very experienced programmers? - and what is actually being asked here?
The simple answer is obvious. The browsers are different, so they react to an error in different ways, which propagate to jquery, and finally results in two different error messages.
Since jquery wraps the very browser depending javascript engines, it will not always be able to behave in a fully crossbrowser way.
However thats really not what you are asking now is it?
You probably want to know what's going wrong..
One browser states that you have a timeout, the other that the browser is unable to parse the recieved data, and fails to call a jquery function, that is reponsible of doing so...
you may want to read this related question:
Callback - Parseerror JSONP via jQuery AJAX
The most probable cause IMHO is that the the data you are recieving from the server is not actually of the type jsonp.. or it is incomplete, or broken.
It may be text? or xml? or just plain and simple json.
try changing the type to text, and see if the error messages change.
but... why does chrome not give the same error as IE?
well, if I'm right about the data not actually being proper jsonp, it could be related to what happens when jquery "parses" json.
Jquery will use the browser built in methods (when available), a probable reason is that chrome is used to parse the data, but when something goes wrong, it times out
where can I get documentation?
So many places have bits and pieces of the documentation required to understand this. To explain this genericly for all kinds of data, and possible errors, refer to the Jquery source code, and the javascript engine documentation for I.E and Chrome respectively.
It can take a long time to read, since the behavhior is different for different versions of I.E and Chrome. In the old days we had to learn this just to make the simplest crossbrowser things work. Jquery hides most of the differences, and this is my best bet on the succes of jquery. We no longer need to know all those subtle differences. We just need to know where to look when something goes wrong..
A good place to start is here: http://api.jquery.com/jquery.parsejson/
Where the browser provides a native implementation of JSON.parse,

jQuery ajax calls (.get, .post., .load etc), return data and IE problem

This is not a question by itself as my notice while working with jQuery 1.3.2
I've spent quite some time researching, looking and finally testing (should have done that in the first place) and here is what I've found:
Let's say you have a small file (call it example.php):
<div>Hello world</div></div>
And in the main file you make this specific call
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$.get('example.php', function(data){
$('.result').html(data);
});
});
</script>
Now this will work on every single browser except for IE8/7 (haven't tested it on IE9). That is because the received data is not parsed as html, though it receives it properly. The only thing to do to solve this is to remove the additiona tag from the "example.php" file. This will fix the problem.
This might seem simple, but when you've got complex *.php / *.html files on the get call, this could get quite messy and a nightmare to resolve.
NOTE:
I tried searching stackoverflow for this specific problem, but did not find a definite answer or solution for this. Hence I've posted this specific problem and solution to it. Considering myself quite a NOOB at this, if anyone points out that there is already an explanation for this, tell me and I will remove this post.
try
$('.result').html("");
$('.result').append(data);
it might remove invalid tags
but consider using iframe for container .result
If you need more control over an ajax call using jQuery you should use the $.ajax call itself and manipulate the parameters. Specifically setting the dataType: to 'text'
http://api.jquery.com/jQuery.ajax/

'$ is not defined' in code following jQuery include

I'm getting the familiar '$ is not defined' error in my JavaScript for the following line in one of my javascript files...
$(document).ready(function() { … }
Normally this is because I've forgotten to include jQuery, but not this time! I have included it, and it is the first include in the page. This error happens in included JavaScript files, and also in any code within tags, all of which come after the jQuery include. It also doesn't happen all the time, maybe half the time when I refresh the page.
I've also used jQuery quite a lot and never seen this before, so I am quite confused.
Edit:
Looking at the Net tab in Firebug, jQuery is being requested and I get a 200 response but nothing is sent back in the response body. If I open the file directly in a new tab or whatever, I get an empty document. Firefox seems to think the file is cached but the data size is 0. Cache control is 'no-cache'. Confused.
Edit 2:
Opened jQuery file in VisualStudio, saved jQuery file with no modifications, everything works perfectly now. Still totally confused.
Are you sure that jQuery is actually being loaded into the browser? It sounds like it really isn't. You should use Firebug or Fiddler to check all the http requests to see if it is actually being downloaded.
Here's a screenshot of how you can check this using Firebug.
Are you using Wordpress or some sort of CMS? If so, their version of jQuery may have of code at the end which calls jQuery.noConflict(). You can read about this method here: http://api.jquery.com/jQuery.noConflict/
This means that whenever you want to use the $ function, you need to use jQuery instead.
For example...
Instead of
$("p").addClass("awesome");
You would do
jQuery("p").addClass("awesome").

Javascript Methodname is replaced with !==

On the server lies a html file with javascript code included.
This javascript code includes a method called something like "CheckObject".
This file works for all users, except one specific (but important).
He gets a javascript error and in his browser sourcode appears something unbelievable:
The methodname "CheckObject" is replaced with "Check!==ect", means the "Obj" of the method name is replaced with !==.
Why could that be?
Hope anybody can help me!
Best regards
If he's using a browser that supports extensions (like Firefox, Chrome, and some others), it's probably worth disabling all of the extensions and seeing if the problem goes away.
If you haven't already, I'd completely clear his cache in case there was a bad page transfer once and the browser is reusing it.
I can't imagine how it would be happening reliably otherwise.

How to help the debugger see my javascript, or how to best refactor my script to help make it debugger-friendly?

I have an ASP.NET MVC project that uses some simple AJAX functionality through jQuery's $.get method like so:
$.get(myUrl, null, function(result) {
$('#myselector').html(result);
});
The amount of content is relatively low here -- usually a single div with a short blurb of text. Sometimes, however, I am also injecting some javascript into the page. At some point when I dynamically include script into content that was itself dynamically added to the page, the script still runs, but it ceases to be available to the debugger. In VS2008, any breakpoints are ignored, and when I use the "debugger" statement, I get a messagebox saying that "no source code is available at this location." This fails both for the VS2008 debugger and the Firebug debugger in Firefox. I have tried both including the script inline in my dynamic content and also referencing a separate js file from this dynamic content -- both ways seemed to result in script that's unavailable to the debugger.
So, my question is twofold:
Is there any way to help the debugger recognize the existence of this script?
If not, what's the best way to include scripts that are used infrequently and in dynamically generated content in a way that is accessible to the debuggers?
I can not comment yet, but I can maybe help answer. As qwerty said, firefox console can be the way to go. I'd recommend going full bar and getting firebug. It hasn't ever missed code in my 3 years using it.
You could also change the way the injected javascript is added and see if that effects the debugger you're using. (I take it you're using Microsoft's IDE?).
In any case, I find the best way to inject javascript for IE is to put it as an appendChild in the head. In the case that isn't viable, the eval function (I hate using it as much as you do) can be used. Here is my AJAX IE fixer code I use. I use it for safari too since it has similar behavior. If you need that too just change the browser condition check (document.all for IE, Safari is navigator.userAgent.toLowerCase() == 'safari';).
function execajaxscripts(obj){
if(document.all){
var scripts = obj.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
eval(scripts[i].innerHTML);
}
}
}
I've never used jquery, I preferred prototype then dojo but... I take it that it would look something like this:
$.get(myUrl, null, function(result) {
$('#myselector').html(result);
execajaxscripts(result);
});
The one problem is, eval debug errors may not be caught since it creates another instance of the interpreter. But it is worth trying.. and otherwise. Use a different debugger :D
This might be a long shot, but I don't have access to IE right now to test.
Try naming the anonymous function, e.g.:
$.get(myUrl, null, function anon_temp1(result) {
$('#myselector').html(result);
});
I'm surprised firebug is not catching the 'debugger' statement. I've never had any problems no matter how complicated the JS including method was
If this is javascript embedded within dynmically generated HTML, I can see where that might be a problem since the debugger would not see it in the initial load. I am surprised that you could put it into a seperate .js file and the debugger still failed to see the function.
It seems you could define a function in a seperate static file, nominally "get_and_show" (or whatever, possibly nested in a namespace of sorts) with a parameter of myUrl, and then call the function from the HTML. Why won't that trip the breakpoint (did you try something like this -- the question is unclear as to whether the reference to the .js in the dynamic HTML was just a func call, or the actual script/load reference as well)? Be sure to first load the external script file from a "hard coded" reference in the HTML file? (view source on roboprogs.com/index.html -- loads .js files, then runs a text insertion func)
We use firebug for debug javascript, profile requests, throw logs, etc.
You can download from http://getfirebug.com/
If firebug don't show your javascript source, post some url to test your example case.
I hope I've been of any help!
If you add // # sourceURL=foo.js to the end of the script that you're injecting then it should show up in the list of scripts in firebug and webkit inspector.
jQuery could be patched to do this automatically, but the ticket was rejected.
Here's a related question: Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

Categories