Created table using Ajax but can't change td inner html for a specific table element

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • thatcollegeguy
    New Member
    • Nov 2009
    • 10

    Created table using Ajax but can't change td inner html for a specific table element

    Below are my 3php and 2js files.

    I create a table using ajax/php and then want to change the values in the tables add(+ number for teamid) id's for each specific td in the table. I don't know if I have the entirely wrong approach, but my code is below. Any or all help is appreciated!

    What currently happens is that the getdivision.php script works perfectly and gives me an entire table of correct data. The problem is that when I click add or remove in a td element in tha ttable, the entire table disappears and I only get the data that I want to input into the single td element where the entire table used to display at.

    edited to display the current situation/results.

    Best,

    ThatCollegeGuy

    teamreports.php

    Code:
    <?php 
    include 'dbc.php';
    page_protect();
    
    $myid = $GET[id];
    
    $query = "SELECT * FROM teamreports";
    $teamreport = mysql_query($query);
    
    $num_rows = mysql_num_rows($teamreport);
    
    
    ?>
    
    
    <html>
    <head>
    <title> <? echo "Team Reports"; ?> </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="teamreports.js"></script>
    <script type="text/javascript" src="sorttable.js"></script>
    <script type="text/javascript" src="selectdivision.js"></script>
    
    </head>
    <body>
    <div id="container">
    <div id="top">
    <img src="http://smarterfootball.com/images/sfootball_logo_original.jpg">
    </div>
    <div id="login">
    <?
    if (isset($_SESSION['user_id'])) {?>
    
    Welcome <? echo $_SESSION['user_name'];?> 
    <br />
      <a href="myaccount.php">My Account</a> | 
      <a href="mysettings.php">Settings</a> | 
        <a href="logout.php">Logout </a>
    
    <? } 
    /*******************************END**************************/
    ?>
    </div>
    <?
    include 'membernavigation.php';
    ?>
    
    <h3> Team Reports </h3>
    
    <form>
    Select a Division:
    <select name="users" onchange="showUser(this.value)">
    <option value="0" selected>Select a Division</option>
    <option value="I">Division I</option>
    <option value="I-AA">Division I-AA</option>
    <option value="II">Division II</option>
    <option value="III">Division III</option>
    </select>
    <br />
    Select a State:
    <select name="state" onchange="getState(this.value)">
    	<option value="0">Select a State</option>
    	<option value="Alabama">Alabama</option>
    	<option value="Alaska">Alaska</option>
    	<option value="Arizona">Arizona</option>
    	<option value="Arkansas">Arkansas</option>
    	<option value="California">California</option>
    	<option value="Colorado">Colorado</option>
    	<option value="Connecticut">Connecticut</option>
    	<option value="Delaware">Delaware</option>
    	<option value="District of Columbia">District of Columbia</option>
    	<option value="Florida">Florida</option>
    	<option value="Georgia">Georgia</option>
    	<option value="Hawaii">Hawaii</option>
    	<option value="Idaho">Idaho</option>
    	<option value="Illinois">Illinois</option>
    	<option value="Indiana">Indiana</option>
    	<option value="Iowa">Iowa</option>
    	<option value="Kansas">Kansas</option>
    	<option value="Kentucky">Kentucky</option>
    	<option value="Louisiana">Louisiana</option>
    	<option value="Maine">Maine</option>
    	<option value="Maryland">Maryland</option>
    	<option value="Massachusetts">Massachusetts</option>
    	<option value="Michigan">Michigan</option>
    	<option value="Minnesota">Minnesota</option>
    	<option value="Mississippi">Mississippi</option>
    	<option value="Missouri">Missouri</option>
    	<option value="Montana">Montana</option>
    	<option value="Nebraska">Nebraska</option>
    	<option value="Nevada">Nevada</option>
    	<option value="New Hampshire">New Hampshire</option>
    	<option value="New Jersey">New Jersey</option>
    	<option value="New Mexico">New Mexico</option>
    	<option value="New York">New York</option>
    	<option value="North Carolina">North Carolina</option>
    	<option value="North Dakota">North Dakota</option>
    	<option value="Ohio">Ohio</option>
    	<option value="Oklahoma">Oklahoma</option>
    	<option value="Oregon">Oregon</option>
    	<option value="Pennsylvania">Pennsylvania</option>
    	<option value="Rhode Island">Rhode Island</option>
    	<option value="South Carolina">South Carolina</option>
    	<option value="South Dakota">South Dakota</option>
    	<option value="Tennessee">Tennessee</option>
    	<option value="Texas">Texas</option>
    	<option value="Utah">Utah</option>
    	<option value="Vermont">Vermont</option>
    	<option value="Virginia">Virginia</option>
    	<option value="Washington">Washington</option>
    	<option value="West Virginia">West Virginia</option>
    	<option value="Wisconsin">Wisconsin</option>
    	<option value="Wyoming">Wyoming</option>
    </select>
    
    </form>
    <br />
    <div id="txtHint"><b>Created table will go here.</b></div>
    
    <?
    include 'footer.php';
    ?>
    
    ------------------------------------------------------------------------
    ------------------------------------------------------------------------
    ------------------------------------------------------------------------
    
    getdivision.php
    
    
    <?php
    	include('dbc.php');
    	include('functions.php');
    	page_protect();
    
        $query = "SELECT * FROM myschools WHERE id = '$_SESSION[user_id]'";
        $myschools = mysql_query($query);
        $myschool_num_rows = mysql_num_rows($myschools);
    	
    	
    $q=$_GET["q"];
    $state=$_GET["state"];
    
    if (!$state)
    {
       $sql="SELECT * FROM teamreports WHERE division = '".$q."' ORDER BY university";
    }
    else
    {
       $sql="SELECT * FROM teamreports WHERE state = '".$state."' ORDER BY university";
    }
    
    
    $result = mysql_query($sql);
    
    echo '<table class="sortable" border="0">';
    echo"<tr>
    <th>University</th>
    <th>Division</th>
    <th>Conference</th>
    <th>State</th>
    <th>Add to My List</th>
    </tr>";
    
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo '<td><a href="teamreport.php?id=' . $row['id'] . '">' . $row['university'] . '</a></td>';
      echo "<td>" . $row['division'] . "</td>";
      echo "<td>" . $row['conference'] . "</td>";
      echo "<td>" . $row['state'] . "</td>";
    
      $k=0;
      $p=0;
    
      while ($k < $myschool_num_rows)
      	{
       	if ($row['university']== mysql_result($myschools,$k,'university'))
      	   {
    	   if (mysql_result($myschools,$k,'inactive')==1)
    		  {
    		  echo '<td valign="bottom" id="add' . $row[id] . '"><div id="ad' . $row[id] . '"><form method="post">
    		  <input type="hidden" name="school" value="' . mysql_result($myschools,$k,"university") . '">
    		  <input type="hidden" name="teamid" value="' . mysql_result($myschools,$k,"teamid") . '">
    		  <input type="submit" value="Remove" onclick="addSchool(' . $teamid . '); return false"></form></div>';
    		  $p=1;
    		  }
    	   }
      	$k++;
      	}    
      if ($p==0)
      	 {
    	 echo '<td valign="bottom" id="add' . $row[id] . '"><div id="ad' . $row['id'] . '"><form method="post">
    	 <input type="hidden" name="school" value="' . $row['university'] . '">
    	 <input type="hidden" name="teamid" value="' . $row['id'] . '">
    	 <input type="image" name="add" class="add-btn" src="http://www.smarterfootball.com/images/btn.gif" alt="submit" title="submit" onclick="addSchool(' . $teamid . '); return false" /></form></div>';
      	 }
      echo "add" . $row['id'];
      echo "</td>";
      echo "</tr>";
      }
    echo "</table>" . $state;
    
    ?> 
    
    
    -----------------------------------------------------------------------------------
    ----------------------------------------------------------------------------------
    changebutton.php
    
    
    <?php
    	include('dbc.php');
    	include('functions.php');
    	page_protect();
    
    $teamid=$_GET["teamid"];
    
    $query = "SELECT university FROM teamreports WHERE id = '$teamid'";
    $result = mysql_query($query);
    $myuniversity = mysql_fetch_array($result);
    
    	
    $university=$myuniversity["university"];
    	
    
    
    $sql="SELECT * FROM myschools WHERE teamid = '$teamid' AND id = '$_SESSION[user_id]'";
    
    $result = mysql_query($sql);
    $myschools = mysql_fetch_array($result);
    $num_rows = mysql_num_rows($result);
    
    if ($num_rows==0)
    {
        $sql_insert = "INSERT into `myschools`
      	(`id`,`university`,`teamid`,`inactive`)
    	VALUES
    	('$_SESSION[user_id]','$university','$teamid',1)
    	";
    	mysql_query($sql_insert,$link) or die("Insertion Failed:" . mysql_error()); 	
    
       	echo '<div id="add' . $teamid . '"><form method="post">
    	<input type="hidden" name="school" value="' . $university . '">
    	<input type="hidden" name="teamid" value="' . $teamid . '">
    	<input type="submit" value="Remove" onclick="addSchool(' . $teamid . '); return false"></form></div>';   
    }
    else if ($num_rows > 0)
    {
    if ($myschools['inactive']==1)
       {
    	 echo '<div id="add' . $teamid . '"><form method="post">
    	 <input type="hidden" name="school" value="' . $university . '">
    	 <input type="hidden" name="teamid" value="' . $teamid . '">
    	 <input type="image" name="add" class="add-btn" src="http://www.smarterfootball.com/images/btn.gif" alt="submit" title="submit" onclick="addSchool(' . $teamid . '); return false" /></form></div>';
    
     	 $sql_insert = "UPDATE `myschools` SET inactive=0 WHERE university = '$university' AND id = '$_SESSION[user_id]'";
    	 mysql_query($sql_insert,$link) or die("Insertion Failed:" . mysql_error());
       }
    else
       {
       	 echo '<div id="add' . $teamid . '"><form method="post">
    	 <input type="hidden" name="school" value="' . $university . '">
    	 <input type="hidden" name="teamid" value="' . $university . '">
    	 <input type="submit" value="Remove" onclick="addSchool(' . $teamid . '); return false"></form></div>';
    
    	 $sql_insert = "UPDATE `myschools` SET inactive=1 WHERE university = '$university' AND id = '$_SESSION[user_id]'";
    	 mysql_query($sql_insert,$link) or die("Insertion Failed:" . mysql_error());
    
       }
    }
    
    ?> 
    
    
    ---------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------
    teamreports.js
    
    var xmlhttp;
    var logcloser;
    function addSchool(str)
    {
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
      {
      alert ("Browser does not support HTTP Request");
      return;
      }
       		var url="changebutton.php";
       		url=url+"?teamid="+str;
       		url=url+"&sid="+Math.random();
    		
    xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState != 4) {
    				    document.getElementById("add" + str).innerHTML='<img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif">';					
                    }
                    if (xmlhttp.readyState == 4) {
    				    document.getElementById("add" + str).innerHTML=stateChanged(str,xmlhttp.responseText);
    
                    }
                }
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
    }
    
    
    function stateChanged(str, responseMsg)
    {
    	if (xmlhttp.readyState==4)
    	{
    		document.getElementById("add" + str).innerHTML=xmlhttp.responseText;
    
    	}
    }
    
    
    function GetXmlHttpObject()
    {
    if (window.XMLHttpRequest)
      {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      return new XMLHttpRequest();
      }
    if (window.ActiveXObject)
      {
      // code for IE6, IE5
      return new ActiveXObject("Microsoft.XMLHTTP");
      }
    return null;
    }
    
    
    
    ---------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------
    selectdivision.js
    
    
    
    var xmlhttp;
    
    function getState(str)
    {
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
      {
      alert ("Browser does not support HTTP Request");
      return;
      }
    var url="getdivision.php";
    url=url+"?state="+str;
    url=url+"&sid="+Math.random();
    xmlhttp.onreadystatechange=stateChanged;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
    }
    
    
    function showUser(str)
    {
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
      {
      alert ("Browser does not support HTTP Request");
      return;
      }
    var url="getdivision.php";
    url=url+"?q="+str;
    url=url+"&sid="+Math.random();
    xmlhttp.onreadystatechange=stateChanged;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
    }
    
    function stateChanged()
    {
    if (xmlhttp.readyState!=4)
    {
    document.getElementById("txtHint").innerHTML='<div align="center"><img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif"></div>';
    }
    if (xmlhttp.readyState==4)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
    }
    
    function GetXmlHttpObject()
    {
    if (window.XMLHttpRequest)
      {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      return new XMLHttpRequest();
      }
    if (window.ActiveXObject)
      {
      // code for IE6, IE5
      return new ActiveXObject("Microsoft.XMLHTTP");
      }
    return null;
    }
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Change the line:
    Code:
    document.getElementById("add" + str).innerHTML=stateChanged(str,xmlhttp.responseText);
    to
    Code:
    document.getElementById("add" + str).innerHTML=xmlhttp.responseText;

    Comment

    • thatcollegeguy
      New Member
      • Nov 2009
      • 10

      #3
      I made the change and I am still getting the same error.

      TCG

      Comment

      • thatcollegeguy
        New Member
        • Nov 2009
        • 10

        #4
        I just used firebug to get a better idea of the code that is showing in my html page after the first basic ajax change. I assumed that I missed a </td> to make it not work correctly, but this was not the case. Maybe this can help someone help me debug the current coding.

        Code:
        <td id="add73" valign="bottom">
        <div id="ad73">
        <form method="post">
        <input type="hidden" value="Albany" name="school"/>
        <input type="hidden" value="73" name="teamid"/>
        <input class="add-btn" type="image" onclick="addSchool(); return false" title="submit" alt="submit" src="http://www.smarterfootball.com/images/btn.gif" name="add"/>
        </form>
        </div>
        add73
        </td>
        Last edited by Dormilich; Nov 24 '09, 03:13 PM. Reason: Please use [code] tags when posting code

        Comment

        • Plater
          Recognized Expert Expert
          • Apr 2007
          • 7872

          #5
          I don't see a javascript Add function. If your add function is being done in backend code with a submit form, then things are probably being wiped out by the page reload

          Comment

          • thatcollegeguy
            New Member
            • Nov 2009
            • 10

            #6
            it's on line 285 - addSchool(str) in teamreports.js

            if you still think your solution can solve the problem - what changes can I make in order to fix it?

            Thanks!

            Comment

            Working...