[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 259
  • Last Modified:

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

0
Refael
Asked:
Refael
  • 8
  • 6
1 Solution
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
GaryCommented:
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
 
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now