Retrieving information from DOM elements returned using ajax
- by niczoom
I am new(ish) to jQuery and am testing out the extraction of DOM element data using jQuery.
Below, detailed on the firebug console I tried to extract data 10 different ways (from 1- to 10-) using data returned directly from the ajax request (rtnData).
And then to compare, I wrapped (rtnData) in a div to make it a jQuery object, and stored it in $test, (var $test= $('<div/>').html(rtnData);)
Displayed below in Firebug Console Output, I cant figure out is why 5- return's nothing and e- returns the center tag contents. Same with 8- and e-, they both look for #ticker div id but 8- returns nothing and e- returns the correct html?? Also when searching for h1 tag .text(), why does 10- return blank and j- return the correct data?
Thanks, Nic.
Use the following page to run the ajax request below in Firebug Console:
http://www.liamharding.com/pgi/pgi.php
jQuery code ran using Firebug Console:
$.ajax({
url: 'pgiproxy.php',
type: 'POST',
dataType: 'html',
data: ({ data : $("#formdata").serialize(), mode : "graph"}),
success:
function(rtnData){
console.log("0- ", rtnData);
console.log("1- ", $('img', rtnData));
console.log("2- ", $('a', rtnData));
console.log("3- ", $('span.cr', rtnData));
console.log("4- ", $('span.cr', rtnData).html());
console.log("5- ", $('center', rtnData));
console.log("6- ", $('table', rtnData));
console.log("7- ", $('#ticker_data', rtnData));
console.log("8- ", $('#ticker', rtnData));
console.log("9- ", $('#last', rtnData));
console.log("10- ", $('h1', rtnData).text());
var $test= $('<div/>').html(rtnData);
console.log("z- ", $test);
console.log("a- ", $('img', $test));
console.log("b- ", $('a', $test));
console.log("c- ", $('span.cr', $test));
console.log("d- ", $('span.cr', $test).html());
console.log("e- ", $('center', $test));
console.log("f- ", $('table', $test));
console.log("g- ", $('#ticker_data', $test));
console.log("h- ", $('#ticker', $test));
console.log("i- ", $('#last', $test));
console.log("j- ", $('h1', $test).text());
},
error:
function(){
alert('ERROR');
}
});
Firebug Console Output:
1- jQuery(img#GnuPlotChart 624e4629...8946.gif)
2- jQuery(a.button javascri...eload();, a.button javascri...close();)
3- jQuery(span.cr)
4- <span class="tl"></span><span class="tr"></span><span class="bl"></span><span class="br"></span>
5- jQuery()
6- jQuery(table.rbox-table)
7- jQuery(div#ticker_data.rbox)
8- jQuery()
9- jQuery(th#last, td#last.num)
10-
z- jQuery(div)
a- jQuery(img#GnuPlotChart 624e4629...8946.gif)
b- jQuery(a.button javascri...eload();, a.button javascri...close();)
c- jQuery(span.cr)
d- <span class="tl"></span><span class="tr"></span><span class="bl"></span><span class="br"></span>
e- jQuery(center)
f- jQuery(table.rbox-table, table)
g- jQuery(div#ticker_data.rbox)
h- jQuery(div#ticker)
i- jQuery(th#last, td#last.num)
j- Legacy Charts
