?
Solved

retrieve data from table with ajax

Posted on 2013-05-15
14
Medium Priority
?
255 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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 2000 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

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

764 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