javascript - Solution to jquery get() url as variable -
ok, problem having jquery get() using not use variable want to. here code , go deeper explanation.
jquery(document).ready(function() { $.ajax({ type: "get", url: "xtest.xml", datatype: "xml", success: function(xml) { console.log(xml); $(xml).find('chart').each(function(){ chtype = $(this).find('chtype').text(); chtitle = $(this).find('chtitle').text(); chsubtitle = $(this).find('chsubtitle').text(); yaxistitle = $(this).find('yaxistitle').text(); csv = $(this).find('csv').text(); }); $(xml).find('columns').each(function(){ countarray[i] = 0; cnum = parseint($(this).find('cnum').text()); cnumarray.push(cnum); value = $(this).find('value').text(); valuearray.push(value); vname = $(this).find('vname').text(); vnamearray.push(vname); i++; }); }, error: function(){ $('.xtest').text('failed feed'); } }); // jquery function process csv data $.get(csv, function(data) { // split lines var lines = data.split('\n');
in get(), attempting give variable name of 'csv'. intent csv file name come separate xml file. although chtype, chtitle, chsubtitle, etc. work how want them to, 'csv' variable created when searching through 'chart' section in xml not. csv in get() shown undeclared. upon further investigation, seems get() wants use global variable. if create global variable named 'csv', use it. not appear scope issue since can use variables data xml within , without get(). appears trait of get() line itself. there solution this, or perhaps missing entirely?
it scope issue. variables chtype
, csv
not local. if assign value variable has not been declared, automatically become global variable. so, automatically created global during execution of success
callback. before callback undefined. note callback triggered asynchronously after call $.get()
. way, callback inside get
triggered asynchronously once request finished. not know calling order of request callbacks.
consider example:
$.ajax({ type: "get", url: "xtest.xml", //... success: function(xml) { console.log(xml); $(xml).find('chart').each(function(){ chtype = $(this).find('chtype').text(); csv = $(this).find('csv').text(); // automatic global variable 'csv' defined. console.log("3 csv: " + (typeof csv !== 'undefined').tostring()); }); //... }, //... }); // variables 'csv' , 'chtype' not defined here. console.log("1 csv: " + (typeof csv !== 'undefined').tostring()); console.log("1 chtype: " + (typeof chtype !== 'undefined').tostring()); // jquery function process csv data $.get('request2', function(data) { // automatic global variables 'csv' , 'chtype' // may defined here. defined here // if "xtest.xml" request finished successfully. console.log("4 csv: " + (typeof csv !== 'undefined').tostring()); }); console.log("2 csv: " + (typeof csv !== 'undefined').tostring());
here when line 1 csv:
printed variable csv
not defined. may defined inside of callback. order of console prints: 1
, 2
, 3
or 4
.
to avoid such confusions local variables should declared var
keyword.
if want create requests each csv
item in xml, should call .get()
in .each()
callback. beware in case get
callbacks triggered after completion of each()
loop. so, inside of get
callbacks values of external variables chtype
same corresponding assignment in last loop step if variables global. however, if declare them local in .each()
callback function(){ var chtype = ... }
values correspond each request in .get()
callbacks, see closures explanation javascript closure inside loops – simple practical example
Comments
Post a Comment