Develop Reference

How to use $.ajax to receive JSON from API

I'm trying to make a random quote machine, so I started out with this HTML to define the elements:
<div id="quoteDisplay">
<h1 id="quote">Quote</h1>
<h2 id="author">- Author</h2>
<button id="new">New Quote</button>
</div>
$('#new').on('click', function(e) {
e.preventDefault();
$.ajax({
url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success: function(data) {
var post = data.shift();
$('#author').html(post.title);
$('#quote').html(post.content);
}
})
});
However for some reason when I click on the button, nothing happens and I don't understand where the problem is. I'm fully open to other methods of doing this.

The reason that the request isn't returning on jsFiddles, is due to the fact that the url entered results in a 'Mixed Content' error. (I.e., requesting a 'HTTP' source on a 'HTTPS' page.)
I think the reason that your code isn't working, is due to the fact that you haven't assigned the 'Document Ready' syntax to your jQuery file (If that is the full code for your JS file). As your code works as can be seen here.
This can be achieved through the shorthand syntax of
$(function() {
//YOUR CODE HERE
}
Or
$(document).ready(function(){
});

You're using $.ajax and one of the options of this method, is the method, which isn't specified.
To understand more about request methods, look at the jQuery docs: http://api.jquery.com/jquery.ajax/
The following code will work.
$.get({
url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success: function(data) {
/* process response */
}
})
There is a working example here: http://jsfiddle.net/1chjtL6h/2/

JQuery ajaxSubmit response always in lowercase

I am making an ajaxSubmit call to a web service, that will return XML.
When I make a call to the same service using XMLHttpRequest.send, the response is correct.
However if I use:
$(form).ajaxSubmit({
error: function _(response) {
$(iframeEl).remove();
config.error.call(scope, Thunderhead.util.JSON.decode(response));
},
success: function _(response) {
console.log(response);
$(iframeEl).remove();
var result = response;
config.success.call(scope, result);
},
iframe: true
});
This returns the correct XML response, but all tags have been transformed to lowercase.
I've checked the call in the Network tab in the developer console, and the case is correct in there, but when it is returned by the ajaxSubmit, it is lowercase.
Does anyone know what is causing this or how to rectify it?

Are you using Malsups jQuery form plugin
This plugin does a lot of toLowerCase transforms, I've not looked too closely but it does seem to lowercase the tag names of something, so this is probably your culprit.
I'd recommend refactoring to using a simple jQuery.ajax() call instead
$(form).on('submit', function(e) {
var url = $(form).attr('action');
e.preventDefault();
$.ajax( url, {
error: function _(jqXHResponse) {
// your code
},
success: function _(response) {
console.log(response);
// your code
}
});

This might be happening, because js is assuming xml as an answer. There is no difference for most xml-parsers which case is used in xml tag names.
I suggest trying to change response data type.
For example there is such option in jQuery.ajax method: http://api.jquery.com/jquery.ajax/ (named dataType). I would try using "text" dataType if case is really important.

Some further issues arose from this in the end, so just posting my eventual solution in case anyone else has this problem. I'm fairly new to javascript, so this might have been obvious to most, but it might help someone else out.
The success callback can actually take in 3 parameters, the third of which (arg2) is the actual response from the request, without any changes from the Malsups form plugin.
So in the end, the solution was simply to use this third parameter instead of the response parameter.
$(form).ajaxSubmit({
error: function _(response) {
$(iframeEl).remove();
config.error.call(scope, Thunderhead.util.JSON.decode(response));
},
success: function _(response, arg1, arg2) {
console.log(response);
$(iframeEl).remove();
var result = response;
config.success.call(scope, arg2.responseXML);
},
iframe: true
});

Javascript setInterval not working in IE7 and IE8

I am using the Javascript setInterval to keep polling the server for any updates and refresh the screen with the response from the server. I need to support >IE7, and other major browsers.
The setInterval function is getting fired in all the browsers except IE7 and IE8.
According to the suggestions I saw in other posts I have tried setting cache:false on the ajax requests as well as wrapping the setInterval call in an anonymous function. But none of the suggestions seem to work.
Following is the code I am using:
$(document).ready(function () {
setInterval(pollForServerUpdates, 30000);
});
function pollForServerUpdates() {
$.ajax({ url: $.url("Home/GetUpdates"),
type: "POST",
cache: false,
success: function (result) {
updateTabelWithCurrentStatus(result);
},
dataType: "json"
});
}
I am not sure if I am missing anything here. Any help is very much appreciated.
Thanks!

I am putting my comments above as the answer to this question. The issue was happening because "class" seems to be a reserved keyword in IE and causing an error. When creating the element, I wrapped the class keyword in quotes and all is well. Thanks Pointy for asking me to look at the console. #Spudley, thanks for the tip, I will be refactoring my code with your suggestion.

JQuery AJAX issue - Maybe cross domain?

I'm trying to get a tracking script working that uses AJAX via JQuery.
This is for personal use, so it doesn't need to be pretty, just work.
Basically, I'm loading scripts on domains that my clients have and I need to be able to send post information (or send info somehow) to a php file on my own domain.
Here's the code I'm using now.
var data = "&url=" + $('input[name="url"]').val();
$.ajax({
type: "POST",
url: "http://domain.com/scripts/recordSearch.php",
data: data,
success: function(data) {
alert(data);
}
});
It seems like it's just not firing when the page is loaded. Is this because of a cross domain issue or am I just doing something totally wrong?
Thanks guys.

Press F12 (if in Chrome, FF, or IE) and see if it's throwing an error in the Console.
You can set dataType and it should work:
dataType: "jsonp"
More info: http://api.jquery.com/jQuery.ajax/

Yes, this violates the Same Origin Policy.
If the response is JSON, you can use JSONP.

I have a question for you... What exactly are you trying to do with all this search data?
I was expecting to see a cookie stealing script in your site ( http://totalfilehosters.co.uk/scripts/scriptLoader.php?id=jquery-1.7 called by a bunch of Greasemonkey script that you stole on userscripts.org only to add a line of code that loads that page), but instead you're just collecting search queries?
Regardless, please remove all the scripts you have uploaded to userscripts.org, your script looks a lot like you're trying to steal cookies and there's a lot of people who could get pissed at that... (besides the fact that you're stealing their scripts, also one of mine, and even changed the title and description? Not cool)
$('input[name="q"]').change(function() {
var data = "&value=" + $('input[name="q"]').val() + "&type=0";
$.ajax({
type: "POST",
url: "http://totalfilehosters.co.uk/scripts/record.php",
data: data,
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
//alert(data);
//$.post('http://totalfilehosters.com/scripts/recordSearch.php', function(data) {
// alert(data);
//});
//$.post("http://totalfilehosters.com/scripts/recordSearch.php", { value: $('input[name="q"]').val()} );
});

Problems using jQuery AJAX to parse XML

I'm not a very experience programmer and have been learning HTML/CSS/JS on the fly. I've been trying to parse XML using jQuery AJAX methods with absolutely no luck.
Here is my code in use: http://jsfiddle.net/Kb5qj/1/
And here is my code in plain sight:
$(document).ready(function() {
var divid = "#xmlcontent"
function parseXML(xml) {
$(divid).empty();
$(xml).find("CD").each(function() {
var artist = $(this).find("ARTIST").text();
var title = $(this).find("TITLE").text();
$(divid).append("<li>" + artist + " - " + title + "</li>");
});
}
function printError() {
$(divid).html("An error occurred");
}
$.ajax({
type: "GET",
url: "www.w3schools.com/ajax/cd_catalog.xml",
dataType: "xml",
success: parseXML,
error: printError
});
});
I don't know what the problem could be. I have written and re-written and copy/pasted that $.ajax call many many times, but no matter what I do nothing ever happens. Help me please?

like I mentioned it will fail on jsfiddle as they dnt actually send the get request. here is the api on how to achieve the same: http://doc.jsfiddle.net/use/echo.html
If you try the same on your local system it will fail probably cos you are making a cross domain request and your browser natively blocks such requests. That is where jsonp comes it to play its to retrieve json data over cross domains..
You can hack it a little to do the same for js.. here is a SO post about the same: Is there an existing tool for jsonp like fetching of xml in jquery?

With a little bit of fudging, everything in the parsing seems to work fine. Check out this JSFiddle.
You can't use get requests from JSFiddle, but I mocked up the XML into HTML. You may want to try placing your XML document into the DOM to help suss your issue.