Using XML file content loaded via Ajax outside of success call - javascript

I have this code:
$.ajax({
url: "lang_files/" + window.localStorage.language + ".xml",
dataType: 'xml',
success: function(data) {
var xml_node = $("resources", data);
$("#index_intro").text(xml_node.find('string[name="index_intro"]').text());
},
error: function(data) {
console.log("Error loading XML data");
}
});
It works fine, the .text() is set properly using the information from my XML file, I now want to be able to use the XML file across my application, and not just inside the success call, so I did:
var xml_node;
$.ajax({
url: "lang_files/" + window.localStorage.language + ".xml",
dataType: 'xml',
success: function(data) {
xml_node = $("resources", data);
},
error: function(data) {
console.log("Error loading XML data");
}
});
$("#index_intro").text(xml_node.find('string[name="index_intro"]').text());
This is not working though, I would like to understand why.

This is because ajax is asynchronous so at time you call xml_node, it is still undefined. Try this instead:
$.ajax({
url: "lang_files/" + window.localStorage.language + ".xml",
dataType: 'xml',
success: function(data) {
setIndexIntro($("resources", data));
},
error: function(data) {
console.log("Error loading XML data");
}
});
function setIndexIntro(xml_node)
{
$("#index_intro").text(xml_node.find('string[name="index_intro"]').text());
}

Related

Ajax code working in some parts and not working in others

I have a problem with my Ajax request to download some data from a database.
There are two codes down below: one that works and one that doesn't, even though they are basically the same. I've also set up later down my code to display the variable (console.log(location)) but it just reads undefined.
I know the php part of it is working because I also do another console.log(data) on success of the ajax call and that returns with the data I entered on my database. What's going on and how do I fix it?
Code that doesn't work:
var location;
function downloadCoords() {
$.ajax({
type: 'GET',
url: 'transformerthing.php',
dataType: "json",
success: function(data) {
console.log(data);
location = data.location;
},
error: function(data) {
console.log(data);
}
});
}
Code that does work:
var mapCode;
var used;
var active;
function downloadCode() {
$.ajax({
type: 'GET',
url: 'getMapCode.php',
dataType: "json",
success: function(data) {
console.log(data);
mapCode = data.mapCode;
used = data.used;
active = data.active;
},
error: function(data) {
console.log(data);
}
});
}
//shorthand deferred way
$.getJSON( "transformerthing.php")
.done(function(data){
console.log(data);
}).fail(function(msg){
console.log(msg)
});
var location;
function downloadCoords() {
$.ajax({
type: 'GET',
url: 'transformerthing.php',
dataType: "json",
success: function(data) {
console.log(data);
location = data.location;
console.log(location);
},
error: function(data) {
console.log(data);
}
});
}
Try it again.

Show Ajax error response as a webpage

from an Ajax call that was build up like this:
function GetData() {
$.ajax({
type: "POST",
url: "#Model.RouteForAjaxLastValue",//"/RCharts/AjaxMethod",//
data: "{Id: " + lastID+ "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
})
I sometimes get responses like this:
I can see that this is meant to be displayed as a webpage since its an entire page html formatted.
But is there a way to display that directly as a new page mabye?
It cuts of the rest of the message in the alert before I can even get to read what the error may be...
Use $("html").html(response.responseText); inside your success function .
success : function(response){
$("html").html(response.responseText);
}
You should probably use console.log()
but this should append it to the body:
$('body').append(response.responseText);

how to execute a javascript function returned from ajax response

I have a function which i want to execute when ajax makes a successful request but it doesn't execute here my jquery part
$.ajax({
type: "POST",
url: "https://www.example.com/create_chat.php",
data: dataString,
beforeSend: function()
{
$("#loading_indicator").show();
},
success: function(response)
{
$(".example").html(response);
}
});
here is the response from php file
<script>start_chat(); alert("testing");</script>
i tried adding this also
$(".example").find("script").each(function(i) {
eval($(this).text());
});
but nothing works
Your response from create_chat could indicate which function will be used. For example
$.ajax({
type: "POST",
url: "https://www.example.com/create_chat.php",
data: {
dataString: dataString
},
beforeSend: function()
{
$("#loading_indicator").show();
},
success: function(response) // response could be 1,2,3,4.. etc
{
if(response==1) {
start_chat();
}
if(response==2) {
stop_chat();
}
if(response==3) {
change_chat_room();
}
...
$(".example").html(response);
}
});
While there are work arounds, you should never be executing the response of an Ajax call directly.
"Scripts in the resulting document tree will not be executed,
resources referenced will not be loaded and no associated XSLT will be
applied."
http://www.w3.org/TR/XMLHttpRequest/#document-response-entity-body
Best practice is to respond with data, typically in the form of JSON, JSONP or HTML.
Try This,
$.ajax({
type: "POST",
data: {
'dataString': dataString
},
url: 'https://www.example.com/create_chat.php',
success: function(data) {
start_chat();
alert('Success');
},
error: function(data) {
alert('failed');
}
});

Ajax calls in jquery getting error:0

I am making an ajax call to be used in jquerymobile. It is working fine in my local host , but when i uploaded it in the server, the ajax call returned an error:0
Code:
$(document).on('pageinit', '#Joblist', function(){
if (navigator.onLine)
{
$.ajax({
type: "GET",
url: "http://sample.com/jobs",
headers:{Authorization:authHeader},
dataType: "xml",
success: function(xml)
{
xmlJoblist=xml;
localStorage.removeItem("jobList");
var xmlString = (new XMLSerializer()).serializeToString(xml);
window.localStorage.setItem("jobList", xmlString);
viewJoblist(xml);
},
error: function(result) {
alert("An error occurred while processing XML file.");
console.log("error" + result.status + result.statusText); //result.status:0
}
});
}
});

Ajax Get Request with JQuery Error

I'm trying to call a php script with a get request and using the data theaddress however the results are showing me the source of the page im calling.
The page im calling is here
Here is my ajax function that will get this page
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function()
{
alert('Something went wrong, saving system failed');
}
});
});
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function(error)
{
alert (error); // this is the change from the question
}
});
});
Put the dataType as json with a curly brace
data: {theaddress:address.value},
dataType:'json',
success: function(output)
{
alert('success, server says '+output);
}, error: function(xhr)
{
alert (xhr.status);
}
and get the data in ManorWPG.php as $_GET['theaddress']
** share the xhr.status if failed.

Categories