By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,559 Members | 1,180 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,559 IT Pros & Developers. It's quick & easy.

$("td").click(function() { $(this).empty(); } will work for table in html but not php

P: 10
http://smarterfootball.com/exits/theHTML.html

I am not sure what is wrong w/ this code. The main issue is that the table that is in the initial html will empty its td but the table that I load using php and jquery through a mysql database will not empty the td elements. There is a table underneath the button in the initial html. if you click on a box in the table, it will empty. the same does not happen for the table that is generated by the xml, php and mysql database. Please advise - my goal is to use a change html function in order to change an add button to a remove button and vice versa. If I cannot empty a table element, I won't be able to change the element. Thank you in advance everybody.


-------------------------------------------------------------------
Here is the html
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>The HTML</title>
  4.         <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  5.         <script type="text/javascript" src="thejs.js"></script>
  6.     </head>
  7.     <body>
  8.     <div id="container"></div>
  9.         <input type="submit" id="getData" name="getData" value="Get Data!" />
  10. <table border="2"><tr><td>jkljkl</td><td>jkljl</td></tr></table>
  11.     </body>
  12. </html>
  13.  
Here is the XML
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  2. <people>
  3.     <person>
  4.         <firstname title="Mr">Steve</firstname>
  5.         <surname>Reynolds</surname>
  6.     </person>
  7.     <person>
  8.         <firstname title="Mr">David</firstname>
  9.         <surname>Grohl</surname>
  10.     </person>
  11. </people>
Here is the php
Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     include('dbc.php');
  3.     include('functions.php');
  4.  
  5. /*
  6. Assumes you have connected to your database and that you have a table
  7. called "people" with 3 columns - title, firstname, surname
  8. */
  9.  
  10. $query = "SELECT university,division,state FROM teamreports";
  11. $result = mysql_query($query);
  12.  
  13. // create a new XML document
  14. $doc = new DomDocument('1.0');
  15.  
  16. // create root node
  17. $root = $doc->createElement('teamreports');
  18. $root = $doc->appendChild($root);
  19.  
  20. while($array = mysql_fetch_array($result)) {
  21.  
  22.     // add node for each row
  23.     $occ = $doc->createElement('team');
  24.     $occ = $root->appendChild($occ);
  25.  
  26.     $child = $doc->createElement('university');
  27.     $child = $occ->appendChild($child);
  28.     $value = $doc->createTextNode($array['university']);
  29.     $value = $child->appendChild($value);
  30.  
  31.     $child = $doc->createElement('state');
  32.     $child = $occ->appendChild($child);
  33.     $value = $doc->createTextNode($array['state']);
  34.     $value = $child->appendChild($value);
  35.  
  36.     $child = $doc->createElement('division');
  37.     $child = $occ->appendChild($child);
  38.     $value = $doc->createTextNode($array['division']);
  39.     $value = $child->appendChild($value);
  40.  
  41. }
  42.  
  43. // get completed xml document
  44. $xml_string = $doc->saveXML();
  45.  
  46. header('Content-Type: application/xml; charset=ISO-8859-1');
  47.  
  48. echo $xml_string;
  49.  
  50. ?>


Here is the javascript code
Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function() {
  2.  
  3.  
  4.  
  5.     $("#getData").click(function(){
  6.  
  7.     var data = "<table id='tbl' border='2'><tbody>";
  8.  
  9.         /* change the $.get to "thephp.php" when that is setup */
  10.  
  11.         $.get("thePHP.php", function(theXML){
  12.  
  13.                 $('team',theXML).each(function(i){
  14.  
  15.                     var division = $(this).find("division").text();
  16.                     var university = $(this).find("university").text();
  17.                     var state = $(this).find("state").text();
  18.  
  19.                     data = data + "<tr><td>" + division + "</td><td>" + university + "</td><td> " + state + "</td><td class='addtolist'>Add To List</td></tr>";
  20.  
  21.                 });
  22.                 data = data + "</tbody></table>";
  23.                 $("#container").html(data);
  24.         });
  25.  
  26.     });
  27.  
  28.     $("td").click(function() {
  29.           $(this).empty();
  30.        });
  31.  
  32.  
  33. });
Dec 7 '09 #1
Share this Question
Share on Google+
8 Replies


P: 15
I've never used JQuery itself but it seems likely that when you put the click event on "all the TD elements" it only does it for those which exist at that time.
When getdata.click adds another table with new TD elements those new TD elements have no click event defined.
How about putting the "set td.click" code inside the getdata.click function?

And perhaps set on "#container td" so you only affect that table's elements?
Dec 8 '09 #2

P: 10
I made your first suggested change. As you can see, the only difference is that now, you cannot empty the table below the button until the top table is generated after the button is clicked.
Dec 8 '09 #3

P: 15
I can't actually *see* anything on your PC :-)

Re-writing innerHTML seems a bit of a minefield, in general.
Try operating on #tbl and see it if it 'found' ???
Dec 8 '09 #4

P: 10
quick question, are you able to view the webpage in question at http://smarterfootball.com/exits/theHTML.html ?
Dec 8 '09 #5

P: 10
Kept the other change and changed the .js element to td #tbl as the id of the generated table is 'tbl', but didn't allow any td items to empty. So I changed the page back to how it was after my original change. It currently only empties after the submit button is clicked.
Dec 8 '09 #6

P: 15
Ah yes, I can see that page okay.

I have no idea why it doesn't work.
Dec 8 '09 #7

P: 10
Thanks for trying to help DMsy2

The answer lies in the livequery plugin for jquery.

First, I installed the plugin.
Second, I inserted this code in the js file:

Expand|Select|Wrap|Line Numbers
  1. $('td') 
  2.     .livequery('click', function(event) { 
  3.     $(this).empty();
  4.     return false; 
  5.     }); 
Dec 8 '09 #8

P: 10
Another question: will using this xml technique have implications if the website has two people logged in at the same time?
Dec 9 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.