Solved

JQeury .ajax help finding table information.

Posted on 2011-09-26
17
212 Views
Last Modified: 2012-05-12
Hello,

I have the attached code and what I'm trying to do is get the table information from table.html excluding the date. I've started with what I think is close but it's not working quite yet.

Thanks,

Brian


TABLE.HTML...

<div id="date">01/02/03</div>
<table width="100" border="1" id="vod_data_table">
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 2</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 3</td>
    <td>Date</td>
  </tr>
</table>


INDEX.HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jquery.js"></script>
	<title>Reading HTML with jQuery</title>
     <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('#vod_data_table tr').each(function(){
						alert(html);
					});
				}
			});
		});
     </script>
</head>
<body>
	
</body>
</html>

Open in new window

0
Comment
Question by:brihol44
[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
  • 9
  • 8
17 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36602476
use :
$(html).find('tr').each(function(i,el){
    var txt = "id : " + $("td:eq(0)",el).text() + "\n";
    txt += "name : " + $("td:eq(1)",el).text() + "\n";
    txt += "Date : " + $("td:eq(2)",el).text() + "\n";
    alert(txt);
});

Open in new window

0
 

Author Comment

by:brihol44
ID: 36710972
Nice! Almost there...  Is there a way to display all the values? Looks like it's just showing row 3. Also it didn't seem to work but is there a way to pull a specific table 'tr' data just in case another table is added to the page?

This here didn't seem to work

$(html).find('#vod_data_table tr').each(function(i,el){

Thanks!

Brian




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<title>Reading HTML with jQuery</title>
    <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('tr').each(function(i,el){
						var txt = "id : " + $("td:eq(0)",el).text() + "\n";
						txt += "name : " + $("td:eq(1)",el).text() + "\n";
						txt += "Date : " + $("td:eq(2)",el).text() + "\n";
						$("#page-wrap").html(txt);
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	
     </div>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36711023
for example, you may use : $(html).find('#vod_data_table').find('tr').each(function(i,el){
0
Independent Software Vendors: 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!

 

Author Comment

by:brihol44
ID: 36711597
It's not quite working... Well nothing is coming up.
INDEX.HTML Page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<title>Reading HTML with jQuery</title>
    <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('#vod_data_table').find('tr').each(function(i,el){
						var txt = "id : " + $("td:eq(0)",el).text() + "\n";
						txt += "name : " + $("td:eq(1)",el).text() + "\n";
						txt += "Date : " + $("td:eq(2)",el).text() + "\n";
						$("#page-wrap").html(txt);
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	
     </div>
</body>
</html>



TABLE.HTML page....

<div id="date">01/02/03</div>
<table width="100" border="1" id="vod_data_table">
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 2</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 3</td>
    <td>Date</td>
  </tr>
</table>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36711692
if your html is only your table it can't work
if your table is inside a div, it will work


0
 

Author Comment

by:brihol44
ID: 36712078
Great! That worked! I'm just getting the last line. Anyway to output all three lines?

Brian
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36713333
>Anyway to output all three lines?

replace :
                        success: function(html) {
                              $(html).find('#vod_data_table').find('tr').each(function(i,el){
                                    var txt = "id : " + $("td:eq(0)",el).text() + "\n";
                                    txt += "name : " + $("td:eq(1)",el).text() + "\n";
                                    txt += "Date : " + $("td:eq(2)",el).text() + "\n";
                                    $("#page-wrap").html(txt);
                              });
                        }
by :
                        success: function(html) {
                                    $(html).find('#vod_data_table').appendTo("#page-wrap");
                        }
0
 

Author Comment

by:brihol44
ID: 36720314
Sorry but that doesn't work. I can get the table info and it all displays... but one of my requirements is to only capture certain TD's within the table.

Brian
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36720321
>Sorry but that doesn't work

what happen?

please provide a link to your page? else I can't help you.
0
 

Author Comment

by:brihol44
ID: 36720365
I don't have a place I can post it live.  I have attached the code below. That should be fine.

My output previously was...

id : 3 name : Name 3 Date : Date

Which is great but it is only 1 line. I need the output to be all three lines...

id : 1 name : Name 1
id : 2 name : Name 2
id : 3 name : Name 3  

Which I know how to exclude the date but haven't yet.

The latest code provided just displays the entire table which I could have done already... by JQuery .load function.

Brian



INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<title>Reading HTML with jQuery</title>
    <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "table.html",
				dataType: "html",
				success: function(html) {
					$(html).find('#vod_data_table').find('tr').each(function(i,el){
						var txt = "id : " + $("td:eq(0)",el).text() + "\n";
						txt += "name : " + $("td:eq(1)",el).text() + "\n";
						txt += "Date : " + $("td:eq(2)",el).text() + "\n";
						$("#page-wrap").html(txt);
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	
     </div>
</body>
</html>



TABLE.HTML...
<div>
<div id="date">01/02/03</div>
<table width="100" border="1" id="vod_data_table">
  <tr>
    <td>1</td>
    <td>Name 1</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name 2</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name 3</td>
    <td>Date</td>
  </tr>
</table>
</div>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36720467
so you want to hide a table column? the date column?
0
 

Author Comment

by:brihol44
ID: 36720516
Yes, I understand that I could just eliminate this line here to get that...

txt += "Date : " + $("td:eq(2)",el).text() + "\n";

I just want to pull bits and pieces of the HTML Table and display it on a mini-data feed page without having to re-enter the same data again for this page... Yes, I could tap into a db but I just want to try this.

Make sense?

Brian
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36720573
>Make sense?

yes, why not
0
 

Author Comment

by:brihol44
ID: 36815815
Not sure you finished what you were saying...

Brian
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36815855
yes, you know how to get the data from the provided code
now you just need to create your own template to show the data.

$("#page-wrap").html(txt);



0
 

Author Comment

by:brihol44
ID: 36816864
Dang... it still outputs to just....

id : 3 name : Name 3 Date : Date

and not...

id : 1 name : Name 1 Date : Date
id : 2 name : Name 2 Date : Date
id : 3 name : Name 3 Date : Date


Like I need...

Brian
0
 

Author Comment

by:brihol44
ID: 36816901
I just thought that this part here...

$(html).find('#vod_data_table').find('tr').each(function(i,el){
                                    var txt = "id : " + $("td:eq(0)",el).text() + "\n";
                                    txt += "name : " + $("td:eq(1)",el).text() + "\n";
                                    txt += "Date : " + $("td:eq(2)",el).text() + "\n";
                                    $("#page-wrap").html(txt);
                              });

is looping through and table to add all of the values into the last line...

$("#page-wrap").html(txt);

but it doesn't look like it's possible to get all of the values from this script.

Brian
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

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…
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…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…

724 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