Solved

retrieve data from table with ajax

Posted on 2013-05-15
14
248 Views
Last Modified: 2013-05-15
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
Comment
Question by:Refael
  • 8
  • 6
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39169166
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
 

Author Comment

by:Refael
ID: 39169185
Yes this is all my code. i will now try to take the function out from the document.ready? will it work?
0
 

Author Comment

by:Refael
ID: 39169197
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
 
LVL 58

Expert Comment

by:Gary
ID: 39169202
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
 

Author Comment

by:Refael
ID: 39169222
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
 

Author Comment

by:Refael
ID: 39169238
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
 
LVL 58

Expert Comment

by:Gary
ID: 39169241
Use the code here
http://jsfiddle.net/vt4GP/3/
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Refael
ID: 39169279
it does not work :-( no errors and it does not work!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39169290
It cannot work at the link I provided, just use the code from it.
0
 

Author Comment

by:Refael
ID: 39169302
GaryC123, I know :-) I meant that i copied the code and it does not work!
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39169434
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
 

Author Comment

by:Refael
ID: 39169465
GaryC123 this code is working..... Thank you!
Can you explain, since i am a beginner, what was the problem?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39169543
The class .mytable has to be with the data object also you were not passing the data object from the success function.
0
 

Author Closing Comment

by:Refael
ID: 39169551
Thank you!!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now