Solved

JQeury .ajax help finding table information.

Posted on 2011-09-26
17
208 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
  • 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
 

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

 
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

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

863 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

21 Experts available now in Live!

Get 1:1 Help Now