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
Solved

retrieve data from table with ajax

Posted on 2013-05-15
14
250 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)

790 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