Solved

JQeury .ajax help finding table information.

Posted on 2011-09-26
17
211 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
Industry Leaders: 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

734 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