This is a working fiddle. http://jsfiddle.net/bpBtC/1/
But this http://jsfiddle.net/bpBtC/131/ doesn't work with the same method?
(All the other websites with XML feeds also fail using the same method, why?)
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/2399953/posts/default",
dataType: "xml",
success: xmlParser,
dataType: 'jsonp'
});
});
function xmlParser(xml) {
$(xml).find("entry").each(function () {
$(".entirecont").append($(this).find('title').text());
});
}
You are setting dataType twice.
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/2399953/posts/default",
dataType: "xml",
success: xmlParser,
dataType: 'jsonp' //<-- this is what actually used.
});
Remove the second dataType and your code will fail.http://jsfiddle.net/bpBtC/130/
The first fiddle works because it is using JSONP (not XML) as the return data type and a method of circumventing the cross-site scripting restrictions. Familiarize yourself with JSONP and how it works.
The second feed does NOT return JSONP, it returns XML and so it can't work. Also you can't have two datatype-parameters on same ajax-call.
Related
Studying for an exam and came across the following practice question.
You develop a web application by using jQuery. You develop the following jQuery code:
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
//INSERT CODE
data: $('#myForm').serialize(),
success: function (result) {
$('#result').text(result.message);
}
});
})
})
The web application exposes a RESTful web api that has an endpoint of product/create. You need to create a new product by using AJAX.
Which code segment should you insert at line 04?
//Option A:
type: "POST",
dataType: "xml",
contentType: "application/x-www-urlencoded; charset=UTF-8",
url: ".product/create",
//OPTION B:
type: "POST",
dataType: "json",
url: ".product/create",
Could someone explain why option B is correct?
I understand that it should be a post request since a new product is being created. Datatype could be either json or xml. Content-type is optional. Is it because result.message can only work when a json is passed in?
For the datatype:"xml", The contenttype is not valid in Option A. The valid options for XMLs are: text/xml, application/xml.
But, Option B has valid entries.
The corrected option A is below,
//Option A:
type: "POST",
dataType: "xml",
contentType: "application/xml; charset=UTF-8",
url: ".product/create",
I have a real problem. I have a php code and a form where when the form is submitted a POST request is sent and the page reloads again and ofcourse the post is viwed in the page.But i want to work with AJAX in order page not to be refreshed.I know the basics of AJAX but i don't want to build all the project from the beggining.Is there a way in success function of AJAX to link to my php code??
$.ajax({
type: "POST",
url: "index.php",
datatype: "html",
data: dataString,
success: function(data) {
//How can i link here to start running my php code which is located in the same page.
}
});
$.ajax({
type: "POST",
url: "somescript.php",
datatype: "html",
data: dataString,
success: function(data) {
// try this
console.log(data);
// see what 'data' actually is
}
});
then check in the browser by hitting F12 to look at the console.
also are you sure you want datatype of html ? you probably want a data type of json or XML , what is the server returning to you after the ajax post?
You have to cancel the form's submission so that the ajax request will take place, otherwise it is canceled. Also use .serialize to get a name-value pair string of the form data to use in the ajax call.
Html
<form id="MyForm">
<button id="MyButtonId">Submit</button>
</form>
JS
$("#MyForm").submit(function(e){
//Prevents the form from being submitted
e.preventDefault();
$.ajax({
type: "POST",
data: $("#MyForm").serialize(),
url: "somescript.php",
datatype: "html",
data: dataString,
success: function(data) {
alert(data);
}
});
});
I got a doubt regarding the way of execution of functions having ajax calls in jQuery.
Consider two functions.
function auth() {
$.ajax({
type: "POST",
dataType: "json",
url: API_URL,
data: {....
},
success: function (response) {}
});
};
function getData() {
$.ajax({
type: "POST",
dataType: "json",
url: API_URL,
data: {....
},
success: function (response) {}
});
};
and i call these functions one after other as show below...
auth();
getData();
My situation is, I want to execute the getData() only after completing 'auth()' .I know we can call the getData() inside the success function of auth. But what i want to know is, how these functions will be executed if i call the one after another, like i shown above.
Any kind of help would be appreciated :)
Thanks.
You can use deferred objects in jQuery. Simply return the ajax() result.
function auth() {
return $.ajax({
type: "POST",
dataType : "json",
url: API_URL,
data: { .... },
success: function (response) {
}
});
};
auth.done(getData);
This will call getData when auth is complete.
They will execute Asynchronously. You can make them wait (Synchronous), if that is what you want, by setting "async=false" in the call.
function auth() {
$.ajax({
**async: false,**
type: "POST",
dataType: "json",
url: API_URL,
data: {....
},
success: function (response) {}
});
};
function getData() {
$.ajax({
**aysnc: false,**
type: "POST",
dataType: "json",
url: API_URL,
data: {....
},
success: function (response) {}
});
};
This will make the call finish before moving on to the next call, BUT will lock the browser usually when making the calls:
async (default: true)
Type: Boolean By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().
Src JQM Site: http://api.jquery.com/jQuery.ajax/
I did this lots of times:
var url = '/offers/1/voting';
var params = { 'direction': 'up' };
$.post(url, params, function() {
alert('callback');
}); // post
(I'm hardcoding the values for this example, but nothing)
So, through firebug I receive the desired JSON response (200 status), but the callback doesn't execute. It's pretty much the only javascript I'm using. Tried with jquery 1.6.4 and 1.7.1 and it's the same thing with both. I don't know what I'm missing.
Help me, Stack Overflow. You're my only hope.
If you use $.ajax instead of $.post ($.post is really an overwrite of $.ajax with fewer parameters), you can add a handler for error and see if it fires:
jQuery.ajax({
type: "POST",
async: true,
url: '/offers/1/voting',
data: { 'direction': 'up' },
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (msg)
{ alert('success') },
error: function (err)
{ alert(err.responseText)}
});
try this
$.post(url, params, function(callback) { alert(callback); });
I have been learning AJAX for the best part of 2 hours, trying to get my head around how to get this to work, it seems it is calling the function as if I put an alert in, it all works fine.
I tried using another method and it seemed to call the function on it's own and it would load what the .php page is echoing.
What am I doing wrong in order for it to not work at all?
<script type="text/javascript">
$('a.fire').click(call_ajax);
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
</script>
Edit: I have also just tried
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
Which also does not work.
EDIT: I have now got code that GET's the php file I wanted, but for some reason does it on it's own
<script type="text/javascript">
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('a.fire').click(call_ajax());
});
});
The issue with this code is that it fires on it's own
EDIT: Now have new code, that is attempting to fire according to Firebug console but I get the alert ERROR: error, so I don't have a clue what is happening in order for it to fail, I have also tried many different URL's with no working solution
$('a.fire').click(function () {
$.ajax({
type: "GET",
url: "/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
},
error:function(xhr, text, error){
alert("Error: " + text);
}
});
});
SOLVED: I have now got it to work! For some reason my anchor had a href of "", which would cause it to reload the page and removing my GET from the page
ajax will only work if it's the same domain. This means that if you execute jQuery from domain x to domain y, it won't work. This is for safety-reasons to prevent websites from loading from another website. Does your jQuery-ajax call work if you remove the 127.0.0.1 from your url?
Furthermore I guess you should add the click-function inside your $(document).ready(); function, like this:
$(document).ready(function(){
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
});
for testing purposes, you can also use the complete function inside your ajax and alert your data. firebug can be helpful too to find your problem :)