1 Replies - 458 Views - Last Post: 07 October 2012 - 07:46 PM

#1 SpaceProphet  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 04-October 12

Retrieving html table with PHP and JavaScript -- So close!

Posted 04 October 2012 - 02:57 PM

Hey all,

Thanks for stopping by. I feel like I am very close to making this work but am stumped on how to proceed. I have a dropdown menu that generates specific parts of a very large table using PHP. I'm using jQuery to eliminate the "enter" button so that the table is displayed automatically when the user selects a table entry.

The dropdown menu works upon first selection but fails to work after that. I have tried unbinding the "enter" button to no avail and am stumped.

Can anyone give me some guidance on how to proceed? The test page is here: http://www.projectre...me.com/testpage

The first if statement in countytabledata.php looks like this and all the rest are identical ifelse statements:

<?php

$countylist = $_GET["countylist"];

if ($countylist == "Alameda")
  {
?><!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>

<link rel="stylesheet" id="style-orig-css"  href="http://projectrepresentme.com/wp-content/themes/u-design/style.css?ver=1.0" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../wp-content/themes/u-design/scripts/tableSorter/jquery-latest.js"></script> 
<script type="text/javascript" src="../wp-content/themes/u-design/scripts/tableSorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../wp-content/themes/u-design/scripts/tableSorter/jquery.tablesorter.min.js"></script><script type="text/javascript">
	$(document).ready(function() {		
		$("#countytable").tablesorter();
		
	});	
	</script> <script type="text/javascript" src="../wp-content/themes/u-design/scripts/pageLength/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="../wp-content/themes/u-design/scripts/pageLength/dynamicpage.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('.cl').unbind('change');
$(".cl").change(function(){
    $("#countyform").submit();
  });
});

</script>

</head>

<form id="countyform" action="countytabledata.php" method="get">

<select class="cl" name="countylist">

<option value="ChooseCounty">[Choose Your County]</option>
<option value="Alameda">Alameda</option>
<option value="Alpine">Alpine</option>
<option value="Amador">Amador</option>
<option value="Butte">Butte</option>
<option value="Calaveras">Calaveras</option>
<option value="Colusa">Colusa</option>
<option value="ContraCosta">Contra Costa</option>
<option value="DelNorte">Del Norte</option>
<option value="ElDorado">El Dorado</option>
<option value="Fresno">Fresno</option>
<option value="Glenn">Glenn</option>
<option value="Humboldt">Humboldt</option>
<option value="Imperial">Imperial</option>
<option value="Inyo">Inyo</option>
<option value="Kern">Kern</option>
<option value="Kings">Kings</option>
<option value="Lake">Lake</option>
<option value="Lassen">Lassen</option>
<option value="LosAngeles">Los Angeles</option>
<option value="Madera">Madera</option>
<option value="Marin">Marin</option>
<option value="Mariposa">Mariposa</option>
<option value="Mendocino">Mendocino</option>
<option value="Merced">Merced</option>
<option value="Modoc">Modoc</option>
<option value="Mono">Mono</option>
<option value="Monterey">Monterey</option>
<option value="Napa">Napa</option>
<option value="Nevada">Nevada</option>
<option value="Orange">Orange</option>
<option value="Placer">Placer</option>
<option value="Plumas">Plumas</option>
<option value="Riverside">Riverside</option>
<option value="Sacramento">Sacramento</option>
<option value="SanBenito">San Benito</option>
<option value="SanBernadino">San Bernadino</option>
<option value="SanDiego">San Diego</option>
<option value="SanFrancisco">San Francisco</option>
<option value="SanJoaquin">San Joaquin</option>
<option value="SanLuis Obispo">San Luis Obispo</option>
<option value="SanMateo">San Mateo</option>
<option value="SantaBarbara">Santa Barbara</option>
<option value="SantaClara">Santa Clara</option>
<option value="SantaCruz">Santa Cruz</option>
<option value="Shasta">Shasta</option>
<option value="Sierra">Sierra</option>
<option value="Siskiyou">Siskiyou</option>
<option value="Solano">Solano</option>
<option value="Sonoma">Sonoma</option>
<option value="Stanislaus">Stanislaus</option>
<option value="Sutter">Sutter</option>
<option value="Tehama">Tehama</option>
<option value="Trinity">Trinity</option>
<option value="Tulare">Tulare</option>
<option value="Tuolumne">Tuolumne</option>
<option value="Ventura">Ventura</option>
<option value="Yolo">Yolo</option>
<option value="Yuba">Yuba</option>

</select><input type="submit" value="Enter" style="visibility: hidden"/>

</form>

<table id="countytable" class="tablesorter">
<thead>
  <tr>
    <th><b>County/City</b></th>
    <th><b>Municipality</b></th>
    <th><b>Population </b></th>
    <th><b># of Reps</b></th>
    <th><b>Rep Type</b></th>
    <th><b>Citizens per Rep</b></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Alameda </td>
    <td>Yes</td>
    <td>1,521,157</td>
    <td>5</td>
    <td>Districts </td>
    <td>304,231</td>
  </tr>
  <tr>
    <td>Alameda </td>
    <td>Yes</td>
    <td>74,081</td>
    <td>4</td>
    <td>At Large</td>
    <td>74,081</td>
  </tr>
  <tr>
    <td>Albany </td>
    <td>Yes</td>
    <td>18,622</td>
    <td>4</td>
    <td>At Large</td>
    <td>18,622</td>
  </tr>
  <tr>
    <td>Berkeley </td>
    <td>Yes</td>
    <td>114,046</td>
    <td>8</td>
    <td>Districts </td>
    <td>14,256</td>
  </tr>
  <tr>
    <td>Dublin </td>
    <td>No</td>
    <td>46,743</td>
    <td>4</td>
    <td>At Large</td>
    <td>46,743</td>
  </tr>
  <tr>
    <td>Emeryville </td>
    <td>No</td>
    <td>10,125</td>
    <td>4</td>
    <td>At Large</td>
    <td>10,125</td>
  </tr>
  <tr>
    <td>Fremont </td>
    <td>No</td>
    <td>215,711</td>
    <td>4</td>
    <td>At Large</td>
    <td>215,711</td>
  </tr>
  <tr>
    <td>Hayward </td>
    <td>Yes</td>
    <td>145,839</td>
    <td>6</td>
    <td>At Large</td>
    <td>145,839</td>
  </tr>
  <tr>
    <td>Livermore </td>
    <td>No</td>
    <td>81,687</td>
    <td>4</td>
    <td>At Large</td>
    <td>81,687</td>
  </tr>
  <tr>
    <td>Newark </td>
    <td>No</td>
    <td>42,764</td>
    <td>4</td>
    <td>At Large</td>
    <td>42,764</td>
  </tr>
  <tr>
    <td>Oakland </td>
    <td>Yes</td>
    <td>392,932</td>
    <td>8</td>
    <td>Districts </td>
    <td>56,133</td>
  </tr>
  <tr>
    <td>Piedmont </td>
    <td>Yes</td>
    <td>10,726</td>
    <td>4</td>
    <td>At Large</td>
    <td>10,726</td>
  </tr>
  <tr>
    <td>Pleasanton </td>
    <td>No</td>
    <td>70,643</td>
    <td>4</td>
    <td>At Large</td>
    <td>70,643</td>
  </tr>
  <tr>
    <td>San Leandro </td>
    <td>Yes</td>
    <td>85,490</td>
    <td>6</td>
    <td>At Large</td>
    <td>85,490</td>
  </tr>
  <tr>
    <td>Union City </td>
    <td>No</td>
    <td>69,850</td>
    <td>4</td>
    <td>At Large</td>
    <td>69,850</td>
  </tr>
</tbody>
</table>


Also, the jQuery code in question is here:

<script type="text/javascript">
	 
$(document).ready(function() {
   $('.cl').unbind('change');
   $(".cl").change(function() {
      $("#countyform").submit();
   });
});

</script>


Is This A Good Question/Topic? 0
  • +

Replies To: Retrieving html table with PHP and JavaScript -- So close!

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: Retrieving html table with PHP and JavaScript -- So close!

Posted 07 October 2012 - 07:46 PM

Hi there!

Quick question, why do you have 2 $(document).ready() functions? Let me explain the problem a little. Because you're only reloading part of the page, the new dropdown list is no longer attached to the jQuery .change() hook. Because it was attached on $(document).ready();

There are 2 ways of getting around this.

1. You can move the drop down list where it doesn't have to load every time you reload the page.

OR

2. Using event delegation. You'd use something like this;

$('select').delegate('.cl', 'change', function(){
    $("#countyform").submit();
});



That way you're delegating the event to the parent and it will have the same effect every time, even if the elements are created dynamically.

There is a bit about this in the FAQ section on jQuery.com right here.

Hope this helps. Your website is looking really good btw!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1