We Keep Coding

Calendar Bootstrap

Using this calendar tool here, http://bootstrap-calendar.azurewebsites.net/.
I am getting an issue inside calendar.js on this line of code:
Calendar.prototype._loadTemplate = function (name) {
if (this.options.templates[name]) {
return;
}
var self = this;
$.ajax({
url: self._templatePath(name),
dataType: 'html',
type: 'GET',
async: false,
cache: this.options.tmpl_cache
}).done(function (html) {
self.options.templates[name] = _.template(html);
});
};
The browser is throwing 'Failed to load resource: the server responded
with a status of 500 (URL Rewrite Module Error.)
The strange thing is that I dont get any error on my local machine, but I only get error when running this code via server (IIS).
Even on server, this error is not shown always. It comes randomly whenever I refresh the page.
Any idea, whats the issue?

I just found out there was some port forwarding issue on IIS Server, I was using host name on the URL like www.tilda.com, I replaced it with the actual URL of the server and now I am not getting any issue.
Thanks.

Different browser gets different result for jQuery ajax call

I am trying to make a $.ajax call but get a different result on different server.
In my js file, I have the following code
function getData () {
$.ajax({
async: false,
type:'GET',
contentType: "application/json",
url: 'sample.json',
dataType: 'json',
success:function(result){
alert("successful");
},
error: function (xhr, status) {
alert("failed");
}
});
}
The js file is included in an HTML file where there is a button with its onclick method as getData().
My problem is, it will pop up a "failed" alert window if I open the html file in IE or Chrome, but a "successful" window if I open the html in Firefox.
Solved:
I had the problem when trying to run that function from a local html file instead of on a server. And running on server solves the problem.

This is a security measure in browsers which prevents access to the file system. Firefox just has a different security measure that allows file access. Use a webserver and you won't run into this issue.

Error with Jquery, json in Chrome

Recently I purchased a chat script which works fine in Firefox, but not in Chrome. I have located the error, but cannot solve it. The code is ...
function checknew(){
$.ajax({
url: "user_chat/chat.php?action=checknew",
type : "GET",
contentType: "application/json",
cache: false,
dataType: "json",
async: false,
error: alert('error');
success: function(data) {
When I check it in firefox, everything is working fine. But in Chrome the alert message triggers. Can anyone please tell me what is wrong here?

The error attribute expects a function reference, but this is a call.
So, replace:
error: alert('error');
with:
error: function () {
alert('error');
},
This assigns an anonymous function to error, that calls alert('error'), instead of trying to call it when a definition was expected.

Try changing this
async: false,
error: alert('error');
success: function(data) {
to this:
async: false,
error: function(xhr, Status, Error){
alert('Status: ' + Status); //Add a breakpoint (see below)
alert('Error: ' + Error);
},
success: function(data) {
Also, you should get out of the habit of using alert() and learn to use a debugger. Chrome comes with one built in, Firefox does too but IMHO the Firebug addon is better.
In Chrome, press F12. Go to the Sources tab, use the menu # the left to find your page and double-click on the line indicated above. This will add a breakpoint.
Now, when the javascript runs, when it gets to that line, it will stop and let you look at variables, error messages, etc...
Also, the Network tab shows every web request made by that page (download images, get css, AJAX calls, etc). You can see if they succeeded or not, what error was returned by the server, etc...
There is a really in-depth guide on using the Chrome tools here. Firebug for FF is almost identical to use (although IMHO a slightly more intuitive interface).
Finally, all the dev tools mentioned have a "Console" where certain information (like recent warnings and errors) are shown. You can even output your own messages there (google Javascript Console.Log.

jQuery $.ajax works with GET but fails on POST

I've got a really weird problem on a customer's server.
I'm using code like the one posted below in several scripts.
The $.ajax configurations are almost identical (i.e. only file, data and success function change) and always use type:POST.
This works most of the times, but for the case below POST always fails.
Changing the type to GET works without a problem.
I'm a little bit clueless what happens here.
var parameter = {
password : $("#password").val()
};
$.ajax({
type : "POST",
url : "query/submit_password.php",
dataType : "xml",
async : true,
data : parameter,
success : function(aXHR) { /* ... */ },
error : function(aXHR, aStatus, aError) { alert("Error:\n" + aStatus + "\n"+ aError); }
});
This code always results with an alert "NetworkError: A network error occurred.".
Again - other cases with almost identical code work without a problem.
Chrome and Firefox dev tools report a POST error without any further explanation.
Any idea what happens here?
A few more details.
The client's site is hosted on GoDaddy
The same piece code works well on other servers
Yes, the file does exist as a GET request works
All browsers I tried this on have no blocker plugins (like adblock) installed
HTTPScoop shows the following results
(3 attempts, the red status says "Connection closed by communications partner"):
Chrome shows the following:
Almost solved.
The apache log showed a status 403 on the request.
It also showed a returned size of 0 which probably is the reason why chrome, etc. showed a failed request.
Why this happens is still not clear but it is definitely a server side configuration problem (most likely a mod_rewrite problem or sth. like that).

try add contentType: "application/json; charset=utf-8" to your ajax call
$.ajax({
type : "POST",
url : "query/submit_password.php",
contentType: "application/json; charset=utf-8",
dataType : "xml",
async : true,
data : parameter,
success : function(aXHR) { /* ... */ },
error : function(aXHR, aStatus, aError) { alert("Error:\n" + aStatus + "\n"+ aError); }
});
if it doesn't help try what benhowdle89 says, stringify(parameter).

jQuery JSONP not working anymore?

I have been trying to load a JSON file from a cross-domain server. I've tried examples from stackoverflow and from the jQuery docs. I did get it working in a previous project, but now it strangely does not. The error returned from jQuery is unreadable to me. What can possibly go wrong here?
$(document).ready(function() {
console.log("Start loading");
$.ajax({
type: 'GET',
url: "http://www.nightoferror.nl/data/data.json",
dataType: 'jsonp',
crossDomain: true,
error: function(data) {
console.log('error', data);
},
success: function(data) {
console.log('success', data);
}
});
});
And the erratic JSFiddle here: http://jsfiddle.net/ZuyJV/4/

Content-Type:application/javascript
rather than Content-Type:application/json;
Could it be because your file is named .js, that Apache is serving the content type itself?
Try changing the file type, to JSON and setting up Apache to serve that filetype with the correct MimeType.
I found this using Fiddler - A HTTP Debugger.. open Fiddler(2), make your request in your browser and Fiddler2 then picks it up. From there, just checked the response for your file.
It looks like your server is returning the response as "Application/Javascript"