I am using ajax in html to load Json files to that the data will be refreshed every 5 seconds.
When I test it on my local host, everything works great. However, when I upload to google cloud Storage, it gives me some error shown as
Failed to load resource: the server responded with a status of 404 ()
GET https://00e9e64bac97921ce699e88ff28fbd14910d2de64676b68d82-apidata.googleus…/storage/v1/b/../o/TableGenerationData.json 400 ()
I put the json file in the same folder with the html, and my code is sure working,
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
function refreshData()
{
var tt = $.ajax({
url: "TableGenerationData.json",
dataType: "json",
async: false
});
var jsonData = tt.responseJSON;
}
</script>
I couldn't get it working in google storage, does anyone have any idea?
Thank you very much.
Finally figured it out.
To make it work, I need to open the public link of the html file, and set the json file to be 'no-cache' to make sure new uploaded data will be immediately fetched by the html.
Thank you very much, welcome to make comment and share your idea if I am wrong.
I'm creating a webApp in which I show some table data using jQuery and the Flexigrid plugin. In the ideal scenario everything goes ok but I when I return a server-side exception or a validation error on a Flexigrid's ajax request, it does nothing but keep the loading icon and the 'Processing, please wait' message.
Right now you can see this behavior in its sample page, in which the server returns a 404 error but the flexigrid appears like its still loading but never shows any error.
Is there any event I could capture and handle Flexigrid's ajax request errors?
$('#flex').flexigrid({
onError: function(data){
// do stuff here
}
});
How do I get more information about the errors in my Ajax requests?
When error occurs in Django during a normal HTTP request, Django shows a descriptive error page with exception details.
However, when error occurs during an AJAX request, I just know the HTTP error code and that's it. I'd like to know as much details as I learn from a Django error page.
Handle errors within your ajax request and use responseText to get the response text and put it into an empty div that you have created for that.
For example:
$.ajax({
url:"{% yourView %}",
dataType: 'json',
success: function(jsonData){
alert("Hooray!");
},
error: function(jqXHR, textStatus, errorThrown){
$('.errors_div').html(jqXHR.responseText);
}
});
The django error page will be rendered into div class=errors_div
Your web server's error log will contain additional information about any uncaught exceptions.
Use Firebug. In Console you'll see the AJAX request, just right click -> Copy Response Content and save that as an HTML file.
Why not access the url directly in your browser's address bar so you see a normal traceback?
Wrap it in another view to change the MIME type to text/html.
I also often have a view that wraps the JSON output in a html tag so the Django Debug Toolbar works correctly.
I am using jquery tabs to load content from a remote file. I have about 30 links in tabbed navigation all loaded with the same script, but for some reason I get 404 errors on 3 or 4 of the links. Each time I reload the page, the links that don't work will change, so some links that didn't work previously will load properly and others that worked before will throw a 404. The load function happens to create a jcarousel but fire but shows that it gets a 404 error.
$('#example > ul').tabs({
fx: { height: 'toggle', opacity: 'toggle'},
load: function(event, ui) {
$(ui.panel).find('.jcarousel-skin-tango').jcarousel({scroll: 5, easing:'easeInOutQuad', animation:800});
$(ui.panel).find('.jcarousel-skin-tango ul').css({"width":'2890px', "left":"0pt"});
}
});
//----------------------------------------------
<ul>
<li><span>A</span></li>
<li><span>B</span></li>
<li><span>C</span></li>
...
</ul>
Any help would be greatly appreciated. Thanks in advance.
My guess (with very little information) is that it has nothing to do with jQuery or AJAX, but some kind of threading problem either in PHP or in the web-server itself. If you open the same URLs as iframes, do they work then?
I've a couple of problems debugging code returned in an Ajax call - specifically, a function returned in json (errors don't get trapped in Firefox) - up to the point where I started debugging these problems in Internet Explorer (I think it's a firefox related problem, as Venkman doesn't detects those errors either) Do you know of any way to debug code returned in json from an Ajax call?
EDITED 03/04/2009 15:05
Thanks to all for your responses, but I think I didn't explain myself well enough. I know enough of Firebug to do basic debugging, but my problem happens when I fetch some code in an Ajax call that has a problem with it. Let's say we have the following HTML file (you'll need prototype in the same folder to make it work correctly):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script>
function ajaxErrorTest()
{
new Ajax.Request('data.json', {
'method': 'get',
'onSuccess': function(data){
if(data.responseJSON.func)
data.responseJSON.func();}});
}
</script>
<input type="button" value="test" onclick="ajaxErrorTest();" />
</body>
</html>
and then, the contents of the data.json file is this:
{'func':function(){console.log('loaded...');alert('hey');}}
If you load the page in a browser and click the 'Test' button (and everything goes well) you'll get something in the console, and an alert box that says 'hey'. Now change the data.json file to this:
{'func':function(){console.log('loaded...');alerts('hey');}}
...and click the 'Test' button again (no need to reload the page ;-)
You get the console line, but no alert box... and no errors!!! this is the kind of errors I'm trying to debug.
Try clicking on the "Console" panel (it's a tab) and enabling it. You will find that any HTTP requests will be caught along with any information that they contain. I use this in order to view any JSON stored in the request as well as any errors (500/404/etc).
Also be aware that you have to enable the console panel on a per-domain basis. There are usually three subtabs: headers, post, and response. I usually use the post/response tabs quite a bit when I'm debugging my AJAX.
You probably want to use the Net tab and filter the requests for XMLHttpRequests (XHR) only.
Additional tips:
don't hesitate to console.dir(yourObject) in your code or directly in the console panel. This will give you the complete state and properties of your object.
check your request/response HTTP headers; sometimes it's just a matter of encoding.
if you don't know what event/user action triggered this XHR call, you can add console.trace() right before your AJAX call. This way you'll get the complete call stack.
Edit:
Code executed in another context
The only way I came up with is surrounding your code with an (ugly) try/catch.
I guess it's because the code is executed in another javascript context
<script>
function ajaxErrorTest()
{
new Ajax.Request('data.json', {
'method': 'get',
'onSuccess': function(data){
try{
if(data.responseJSON.func)
data.responseJSON.func();}});
} catch (err) {
console.dir(err);
}
}
</script>
This code gives a detailed error message:
ReferenceError: alerts is not defined
I really doubt changing the execution context will solve the problem.
I don't know how to this with prototype, but with jquery, it can be done easily:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
I'm not sure this issue involves the actual JSON that is retrieved. Can you try throwing an error directly in your onSuccess handler and see if it appears in the Firebug console? Something like this:
onSuccess: function() { alerts('hey'); }
If this is the case, then this issue should be fixed in Firebug 1.7.
I would use a combination of the net/console tabs in firefox.
Copy the json results from the Net Tab in Firefox.
Then paste the results into a variable in the console and try executing the offending function.
In this case, I pasted this:
var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();
When I run this, firebug gives me this error.
ReferenceError: alerts is not defined
As others have mentioned, view the JSON/Javascript returned by expanding the AJAX URL in the Console tab.
Then if you copy that to the run/eval panel of the Console tab (there's an up/down arrow in the bottom right, clicking the up will change it into a textarea on the right hand side, clicking down gives a single line running along the bottom).
If your Ajax call returns: function(){alert("hello")}
Then you can use something like the following:
x = eval('function(){alert("hello")}')
x();
This will allow you to execute the returned ajax.
To debug with breakpoints use the HTML view to create a tag (using Firebug's HTML view) and then simply paste the code into a function within this tag. You can then set breakpoints and fire it by calling the previous function from the run'/eval panel.
If this works fine then clearly there's a bug outside of your control, but you could simply workaround that by sending the json back as text/plain, assigning it to a variable and then evaluating it.
This one is simple, i allways use FIDDLER
to debug my ajax calls.
Fiddler is a Web Debugging Proxy which
logs all HTTP(S) traffic between your
computer and the Internet. Fiddler
allows you to inspect all HTTP(S)
traffic, set breakpoints, and "fiddle"
with incoming or outgoing data.
Fiddler includes a powerful
event-based scripting subsystem, and
can be extended using any .NET
language.
I use an HTTP Proxy Debugger called fiddler which has always worked fine for debugging my AJAX problems. It captures all HTTP requests and responses for you to view. Its freely available from http://www.fiddlertool.com/
the error you are trying to debug is pretty visible on native firefox console. it is: "tools" - "error console"
of course, you see it after it ocurrs but with an wrong line number (infinite resemblance)
I know the specific issue mentioned in the post is for firefox. I landed on this page when googling for generally how to debug java script that comes from an AJAX call and I'm sure a lot of others will.
I my case I was returning some HTML that had a script tag in it, if there was for example, a sytax error in the javascript that came down from the AJAX request in firebug you will get no exception, or errors. The AJAX content will just not render.
In the google chrome built debugger you'll get the error that has been raised, but you'll not be able to step through the code. If you wan't to step though then you'll need to make a dummy page for that.
Thats the best I've been able to get it so far.
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase //# sourceURL=foo.js at the beginning of your javascript code that foo.js is the name that assign it. debugger will show it with that name.
This is true in chrome that I think in firebug.
In this case you can place a breakpoint in the dynamically loaded javascript ( or json ) code.
Use "debbuger;" as line of code where you wanna stop execution. In this way the loaded source code will be available in the source section of your debbuger. I know for sure it works on chrome.