retrieve data from table with ajax

Hello Experts,

I am trying to understand why the script below is not working.
In the "get.html" if i change the "filter" to ".mytable" it will work but when i am trying to filter deeper e.g. ".mytable tr td:nth-child(2) " is it not working anymore.

first.html
==============
<table class="mytable">
  <tr>
    <td>01</td>
    <td>price01</td>
    <td>location01</td>
  </tr>
  
  <tr>
    <td>02</td>
    <td>price02</td>
    <td>location02</td>
  </tr>
 
</table>

Open in new window


get.html
=================
$(document).ready(function() {
	
	var url = "first.html";
	
	function processData(data) {
		
		var resultStr = "";
		var items = $(data).filter('.mytable tr td:nth-child(2)');
		$(items).each(function(i) {
			resultStr += $(this).text() + '<br />';
			$('#result').html(resultStr);
			
			});
		
		}
		
		function errorAlert(e, jqxhr) {		
		alert("Your request was not successful: " + jqxhr);		
		}		
		
		$.ajax({
			type:"GET",
			cache:false,
			url:url,
			dataType:"html",
			contentType:"text/html",
			success: processData,
			error: errorAlert
		});

Open in new window

RefaelAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
GaryConnect With a Mentor Commented:
Try this

<script type="text/javascript">
$(document).ready(function() {
	var url = "first.html";
		$.ajax({
			type:"GET",
			cache:false,
			url:url,
			dataType:"html",
			contentType:"text/html",
			success:function(data) {
				processData(data)
			},
			error: errorAlert
		});

})

function processData(data) {
	var resultStr = "";
	$(data,".mytable").find("td:nth-child(2)").each(function () {
		resultStr += $(this).text() + '<br />';
	});
	$('#result').html(resultStr);
}
		
function errorAlert(e, jqxhr) {		
		alert("Your request was not successful: " + jqxhr);		
} 
</script>

Open in new window

0
 
GaryCommented:
Don't put js functions inside document.ready - they're nothing to do with each other

How are you calling the function - where is data coming from here?
function processData(data) {

If that is all your js code then it is not closed off properly
0
 
RefaelAuthor Commented:
Yes this is all my code. i will now try to take the function out from the document.ready? will it work?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
RefaelAuthor Commented:
I tried now to take the functions out from the document.ready. still does not work. here is the code:

<script src="inc/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

function processData(data) {
		
		var resultStr = "";
		var items = $(data).filter('.mytable tr td:nth-child(2)');
		$(items).each(function(i) {
			resultStr += $(this).text() + '<br />';
			$('#result').html(resultStr);
			
			});		
		}
		
		function errorAlert(e, jqxhr) {		
		alert("Your request was not successful: " + jqxhr);		
		};

$(document).ready(function() {
	
	var url = "first.html";			
		
		$.ajax({
			type:"GET",
			cache:false,
			url:url,
			dataType:"html",
			contentType:"text/html",
			success: processData,
			error: errorAlert
		});
});
	
</script>

Open in new window

0
 
GaryCommented:
Are you trying to make the ajax call as soon as the page has loaded?
After reading your code again, you are calling processData(data) from your ajax call but data is empty so the function doesn't know what it is supposed to be targeting.

	$(document).ready(function() {
	
	var url = "first.html";

		$.ajax({
			type:"GET",
			cache:false,
			url:url,
			dataType:"html",
			contentType:"text/html",
			success: processData,
			error: errorAlert
		}); 
	})
		function processData(data) {
		
		var resultStr = "";
		var items = $(data).filter('.mytable tr td:nth-child(2)');
		$(items).each(function(i) {
			resultStr += $(this).text() + '<br />';
			$('#result').html(resultStr);
			
			});
		
		}
		
		function errorAlert(e, jqxhr) {		
		alert("Your request was not successful: " + jqxhr);		
		}

Open in new window


You have no element with id result
0
 
RefaelAuthor Commented:
Hi GaryC123,

First thank you for your effort. I copied the code from you exactly yet i do not get anything in the #result. In chrome i do not see any errors yet nothing is being displayed.
0
 
RefaelAuthor Commented:
If i were to remove the "tr td:nth-child(2)" and leave only the ".mytable" in the filter then it works fine (it worked before too) something with the filter and the "tr td:nth-child(2)" is not working.
0
 
GaryCommented:
Use the code here
http://jsfiddle.net/vt4GP/3/
0
 
RefaelAuthor Commented:
it does not work :-( no errors and it does not work!
0
 
GaryCommented:
It cannot work at the link I provided, just use the code from it.
0
 
RefaelAuthor Commented:
GaryC123, I know :-) I meant that i copied the code and it does not work!
0
 
RefaelAuthor Commented:
GaryC123 this code is working..... Thank you!
Can you explain, since i am a beginner, what was the problem?
0
 
GaryCommented:
The class .mytable has to be with the data object also you were not passing the data object from the success function.
0
 
RefaelAuthor Commented:
Thank you!!!
0
All Courses

From novice to tech pro — start learning today.