I have the following JavaScript (I'm using jQuery):
function language(language)
{
var text = new Object();
$.ajax({
type: "GET",
url: "includes/xml/languages/" + language + ".xml",
dataType: "xml",
success: function(xml){
$(xml).find('text').each(function(){
text[$(this).attr('id')] = $(this).text();
});
}
});
return true;
}
I have an XML file which is then being read by the class. The XML file has declarations like this:
<text id="must_be_string">Must be a string.</text>
<text id="must_be_number">Must be a number.</text>
<text id="must_be_integer">Must be an integer.</text>
The XML file is being read correctly, but the problem I'm having is that the text variables don't seem to be working properly.
From putting some alert stop-points in to try to debug, I've discovered that this is what's happening:
Inside success: function(xml){, the var text can be properly accessed. However, the assignment inside that function to assign a new phrase to text doesn't add it correctly. Inside the success:, I can alert(text['must_be_string']) and get "Must be a string," but when I leave the Ajax call, it always shows "undefined."
In case I'm not being clear:
var text = new Object();
$.ajax({
type: "GET",
url: "includes/xml/languages/" + language + ".xml",
dataType: "xml",
success: function(xml){
alert(text); // Shows [object Object]
$(xml).find('text').each(function(){
text[$(this).attr('id')] = $(this).text();
});
alert(text['must_be_string']); // Shows "Must be a string."
}
});
alert(text['must_be_string']); // Shows undefined -- this is my problem
I would really, really appreciate any help on this. Please explain because I would really like to understand what's going on.
The success method of the ajax call is an asynchronous call. When you call $.ajax the method will instantly return and attempt to execute the alert(text['must_be_string']);, which won't be set until after the success of the ajax call is made, some point in the future.
Hope this helps.
Variable 'text' lives in the scope of the 'language' function.
I'm not sure how jQuery manages scopes, but I think the success function is a new function that is not inside 'language's scope.
'language' ends when reaching return and the ajax query is sent. However, the response comes afterwards (async).
Try declaring 'text' object as global, outside 'language'
Related
I'm trying to write a simple 2 way chat but got a problem. I'm sure it's very basic but couldn't figure out since I'm new to this.
Below is my JS code to pass a streamID to AS3:
jQuery.ajax({
url: ajaxurl,
type: 'POST',
data: 'action=sd_chat_code&chat_code='+chat_code,
success: function(data){
object.streamCompanion(data);
},
error: function(data) {
console.log(data);
}
});
and in AS file, I got the streamID passed through as below:
public function streamCompanion(data):void {
var netStreamObj:NetStream = new NetStream(_nc);
netStreamObj.play(data);
_client.attachNetStream(netStreamObj);
}
Here's my code so you can check https://codepen.io/adamboy_1802/pen/MpqyML
The variable data above returns "12345" correctly. I tried to output is via JS and there's nothing wrong:
ExternalInterface.call("function() { console.log("+data+") }")
Any advice would be greatly appreciated.
(Solved)
So after trying to create a text box and output the variable data in Flash instead of alert it out via jQuery, the problem relied in my ajax call, where I use echo json_encode(my_var), simply change it to echo my_var fixed the problem.
I have a function that makes an Ajax request for any anchor. The request method can be GET or POST. In this case, I want to make a POST without using a form but the Ajax request throws an error before even sending the request. The error has the value "error" and all error/failure description variables are "".
function loadPage(url,elem_id,method,data) {
ajaxLoading(elem_id);
$.ajax({
type: method,
url: url,
data: data,
success:function(data){
$("#"+elem_id).html(data);;
},
error:function(request,textStatus,error){
alert(error);
}
});
}
When the function is called the params are these (copied from the js console):
data: "partial=yes"
elem_id: "page"
method: "post"
url: "/projects/2/follow"
As asked, here is the code that calls the loadPage function.
$("body").on("click","a.ajax",function(event) {
var _elem = getDataElem($(this));
var _method = getRequestMethod($(this));
var _partial = getRequestPartial($(this));
handlers.do_request(event,$(this).attr("href"),_elem, _method, _partial);
});
var handlers = (function() {
var obj = {};
obj.do_request = function(event,url,elem_id,method,data) {
event.preventDefault();
loadPage(url,elem_id,method,data);
history.pushState({selector:elem_id,method:method,data:data},null,url);
};
}());
After the failure of the Ajax request, the request is made by default and it responds sucesss. In all I have read, this seems to be a valid way to make a POST request (that doesn't need a form).
Am I doing something wrong in the function? Why is the error information empty?
Thanks
EDIT:
I have been thinking, for a POST from a "form" that function works, when the variable "data" is made with the serialize function (e.g. "var data = $(this).serialize();"). Could it be that the format of the "data" when I make a POST without a "form" is wrong in someway? Maybe the JQuery Ajax function doesn't accept a simple string like "partial=yes" as data when a POST is made. Any thoughts on this?
I just experienced this problem and after an hour or two, thought to try setting cache to false. That fixed it for me.
$.ajax({
url: url,
cache: false,
type: method
});
Unfortunately, when I removed cache again, my request was working as if it had never had a problem. It seems as if setting cache:false made something 'click'.
Oh well.
Just a guess, but in the docs the type parameter is in all caps, i.e. 'POST' and not 'post'.
Try:
function loadPage(url,elem_id,method,dat) {
ajaxLoading(elem_id);
$.ajax({
type: method,
url: url,
data: dat,
success:function(data){
$("#"+elem_id).html(data);;
},
error:function(request,textStatus,error){
alert(error);
}
});
}
I'm wondering if you are running into a problem using a variable named after a keyword. If this doesn't work, try calling loadPage with no arguments and hard coding all of your ajax parameters, just to see if that works.
Could not solve the problem, neither could find the reason why it was happening. Although, I found a way around, by using a hidden empty form instead of an anchor with the method 'POST'. For a form, the function worked nicely.
Thanks for the answers
i have this test json url
This is the link
jQuery.support.cors = true;
window.Getdata = function() {
var request = $.ajax({
type: "POST",
data: "{}",
dataType: 'json',
url: "/gh/gist/response.json/4001105/",
mimeType: "application/json; cherset=utf-8",
success: krywaarde,
failure: givealert
});
function krywaarde(result) {
alert("Name = "+result.fighters[0].name);
alert("Nickname = "+result.fighters[0].nickname);
// this changes the text
document.getElementById("routing").innerHTML = result.fighters[0].name;
}
function givealert(error) {
alert('failed!!' + error);
}
}
$(document).ready(function() {
window.Getdata();
});
i have edited my whole questions code
the problem i have now is, it works on JSFiddle, but not in my mobile app.
the onlu changes between the 2 is, the ons on Js Fiddle is called on page load, and my real mobile app the function is called on buttonclick!
here is the jsfiddle :
little jsfiddle
the html where i am calling the function is
<a type=button id="processnames" onclick="window.Getdata();" style="color: White; font-size:large;">test json
This line:
kryrequest(https://raw.github.com/appcelerator/Documentation-Examples/master/HTTPClient/data/json.txt?callback=awe)
… looks like it is trying to pass a string literal to the function. String literals must be surrounded by quote marks.
(this section refers to an earlier version of the question)
Additionally, that URI returns a JSON text, not a JSONP script, so it still won't work if you do fix that.
What's more, even if that response did contain JSON-P, it will wouldn't work because the object has a fighters property, but not a name property. The value of fighters is an array (of objects which have names), but those names are strings, not arrays.
(this section refers to an earlier version of the question)
I know questions about loading XML into a JS variable have been posted here many times, but I didn't find a solution that would work. In my script I declare a variable before an ajax request, and then add the result to the variable. This works only if I add alert to the script:
var myDB;
$.ajax({
type: 'GET',
url: 'db.xml',
dataType: 'xml',
success: function (xml){
myDB = xml;
}
});
alert(myDB); //returns: undefined
$(myDB).find('item').each(function (){
var question = $(this).find('question').text();
alert(question);
});
The above code works only with the alert. When I delete the alert, the code doesn't work. How can I make this work without the alert?
You need to add your code to success handler for doing that:
var myDB;
$.ajax({
type: 'GET',
url: 'db.xml',
dataType: 'xml',
success: function (xml){
$(myDB).find('item').each(function (){
var question = $(this).find('question').text();
});
}
});
An ajax request is asynchronous. That means, the function you gave in the success option is excuted somwhen later.
After you've started the request, you're variable is still empty. Only if you wait long enough to confirm the blocking alert, the variable will have been loaded.
You will need to add the iteration to the success function, where the xml data is certainly available.
I've just started working with JavaScript for non-trivial things, so this is probably straightforward...
What I'm trying to accomplish: iterate on an array of product references, fetch the JSON for each reference, and return an array of all the product information (with a hash-like structure indexed by reference).
What I've tried:
function fetchProductData(references){
var product_data = new Object();
references.forEach(function(ref){
$.ajax({
url: "http://localhost:3000/products/find.js?reference=" + ref,
dataType: "jsonp",
type: "GET",
processData: false,
contentType: "application/json",
success: function(data) {
product_data[ref] = data;
}
});
});
alert('before return: ' + product_data);
return product_data;
};
$(document).ready(function(){
var products = fetchProductData(references);
alert('products : ' + products);
});
Here's what I don't understand: the first time I call alert to display the array contents, the array is empty. However, on the second call, the array is populated with the data I want.
In other words, the "products :" alert displays the data I want in the code above. But if I comment the "before return: " alert, it no longer does. Why is this?
So my question is: how can I have jQuery make several $.ajax call to fetch product information, collect that information in an array, and return that array so I can use it elsewhere in my code?
Also, why is the data in the variable magically accessible after it is referenced in an alert?
The "A" in "AJAX" stands for "asynchronous" :). Your program doesn't wait for the call to complete before going on to the next iteration, meaning you'll probably not get all of your data. Also the alert has the same problem. Operation to concat 'before return:' to the string add just enough time to get some data in the variable. On a faster machine you might find you never get data.
I think you really need to rethink your approach. It's not a good idea to have multiple AJAX requests in a loop. It will greatly increase latency of the page. Pass all your parameters once using JSON, then have your server side script loop through that and return a single response in JSON.
function fetchProductData(references){
// make sure your "references" is a JSON object
$.getJSON('http://server/side/url', {'json':references}, function(product_data) {
// do something with product_data (alert them, put them in an array, etc)
});
}
function fetchProductData(references, cb){
var length = 0;
var product_data = new Object();
references.forEach(function(ref){
length++;
$.ajax({
url: "http://localhost:3000/products/find.js?reference=" + ref,
dataType: "jsonp",
type: "GET",
processData: false,
contentType: "application/json",
success: function(data) {
product_data[ref] = data;
if (++count === length) {
cb(product_data);
}
}
});
});
};
$(document).ready(function(){
var products = fetchProductData(references, function(products) {
alert('products : ' + products);
});
});
Use a callback on your asynchronous operation.
The reason it appears to work with the alert call is because alerting a message gives ajax enough time to populate your array. The return statement is only triggered after you click OK on the alert box giving your code a window of 250ms to populate the array with data.
You are executing you ajax query in async mode. And you want a sync result. Try to add:
async: false
Hope this helps.
your $.ajax call is asynchronous, so what is happening is that the first time you make the call, your javascript makes the call, moves on to the next line (alert) and then loops. You're data hasn't returned at that point yet. What you can do to remedy this is to set the async: false option in your $.ajax call.
This is an asynchronous operation. The only sure way to know when the data is ready is in the callback function: success: function () {...}, which gets called when the data has finally returned. Put your alert in there.