Solved

JQeury .ajax help finding table information.

Posted on 2011-09-26
17
209 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why does this AJAX transaction not see the posted variables? 5 67
json with xmlhttprequesr 2 46
Performance  Html.BeginForm vs jQuery 3 57
Javascript Hashmap output 8 57
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

770 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