Pedsdude Posted June 9, 2009 Share Posted June 9, 2009 I've followed the Tizag Ajax tutorial (link) and have almost got it working, however, I've come across a problem. http://www.codjumper.com/---test2.php?game=cod4&map=Backlot When you click one of the submit buttons (which I plan to change to images in the future, although it's worth resolving this main issue first), it'll show the related demos below, i.e. database entries that have "demosFrom" as the value shown (in this case: 72, 75 or 256). My problem is that no matter which one you click on, it always uses the first 'from', as it is the first one that's set as the input for the 'from' ID. Here's a section of my code to make things clearer: <form name='myForm'> <center> <table background="http://www.codjumper.com/images/overheads/<?php echo strtolower($game); ?>/<?php echo strtolower($map); ?>.jpg" width="800" height="640" border="1" style="border-collapse: collapse; border: solid;"> <tr> <?php mysql_select_db($database_pedscon, $pedscon); while($counter <= 399){ $counter++; $query_demos = "SELECT * FROM demos WHERE demosGame = '$game' AND demosMap = '$map' AND demosFrom = '$counter'"; $demos = mysql_query($query_demos, $pedscon) or die(mysql_error()); $row_demos = mysql_fetch_assoc($demos); $totalRows_demos = mysql_num_rows($demos); if($totalRows_demos !== 0){ echo '<input type="hidden" id="from" value="'.$counter.'"><input type="hidden" id="game" value="'.$game.'"><input type="hidden" id="map" value="'.$map.'">'; echo '<td width="40" height="32" align="center" background=""><input type="button" onclick="ajaxFunction()" value="'.$counter.'" />'; } else { echo '<td width="40" height="32" align="center" background="images/faded.png">'; } echo '</td>'; if((is_int($counter / 20))&&($counter !== 400)){ echo '</tr><tr>'; } } ?> </tr></table> </center> </form> <br><br> <div id='ajaxDiv'></div> As you can see, because the code is being repeated by "while($counter <= 399){", the "<input type="hidden" id="from" value="'.$counter.'">" is being repeated each time, and the only value it is taking is the first case of "$counter", which in this case is 72. How would I fix it so that it doesn't keep trying to put different values into the same form ID, so that it takes the correct value? The query result once clicked works fine, the only problem is the fact that each time it repeats the code it does "<input type="hidden" id="from" value="'.$counter.'">" but with a different value for $counter each time. Any help on the matter would be greatly appreciated! Thank you in advance, Phil Quote Link to comment Share on other sites More sharing options...
Stooney Posted June 10, 2009 Share Posted June 10, 2009 The issue is in repeating id="from". ID is supposed to be a unique value, meaning two elements cannot have the same ID. You need to use arrays. <input type="hidden" id="from[]" value="'.$counter.'"> (make the change to all elements which repeat and use the same id). You will also need to edit your javascript to account for this. If you were using jquery I could give you the code, but I noticed you're not in which case I could really only make something sloppy (I learned jquery syntax before getting decent with regular javascript, oh well) Quote Link to comment Share on other sites More sharing options...
Pedsdude Posted June 11, 2009 Author Share Posted June 11, 2009 The issue is in repeating id="from". ID is supposed to be a unique value, meaning two elements cannot have the same ID. You need to use arrays. <input type="hidden" id="from[]" value="'.$counter.'"> (make the change to all elements which repeat and use the same id). You will also need to edit your javascript to account for this. If you were using jquery I could give you the code, but I noticed you're not in which case I could really only make something sloppy (I learned jquery syntax before getting decent with regular javascript, oh well) Thank you for the response. I am however unclear as to how I would achieve this in terms of what to type. Here's the javascript on that same page: <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var game = document.getElementById('game').value; var map = document.getElementById('map').value; var from = document.getElementById('from').value; var queryString = "?game=" + game + "&map=" + map + "&from=" + from; ajaxRequest.open("GET", "---query.php" + queryString, true); ajaxRequest.send(null); } //--> </script> And here is ---query.php: <?php //Select Database mysql_select_db($database_pedscon, $pedscon); // Retrieve data from Query String $game = $_GET['game']; $map = $_GET['map']; $from = $_GET['from']; // Escape User Input to help prevent SQL Injection $game = mysql_real_escape_string($game); $map = mysql_real_escape_string($map); $from = mysql_real_escape_string($from); //build query $query = "SELECT * FROM demos WHERE demosGame = '$game' AND demosMap = '$map' AND demosFrom = '$from' ORDER BY demosID DESC"; $queryz = 'SELECT * FROM demos WHERE demosGame = '.$game.' AND demosMap = '.$map.' AND demosFrom = <font color="red"><b>'.$from.'</b></font> ORDER BY demosID DESC'; //Execute query $demos = mysql_query($query); $display_string = '<table width="530" align="center" cellpadding="2">'; // Insert a new row in the table for each person returned while($row_demos = mysql_fetch_array($demos)){ $display_string .= '<tr><td width="180" height="145" align="left" valign="top">'; $display_string .= '<a href="'.$PHP_SELF.'?ID='.$row_demos['demosID'].'"><img src="files/images/'.$row_demos['demosImage'].'" border="1" height="115" width="150" alt="'.$row_demos['demosName'].'"></a></td>'; $display_string .= '<td valign="top" align="left">'; $display_string .= '<b>Name:</b> '.$row_demos['demosName'].'<br>'; $display_string .= '<b>Map:</b> <a href="maps.php?map='.$row_demos['demosMap'].'">'.str_replace("_", " ", $row_demos['demosMap']).'</a><br>'; $display_string .= '<b>Game:</b> '.strtoupper($row_demos['demosGame']).'<br>'; $display_string .= '<b>Type:</b> '.$row_demos['demosType'].'<br>'; $display_string .= '<b>Requirements:</b> '; $display_string .= '<br><b>Description:</b><br />'; $display_string .= $row_demos['demosDesc'].'<br>'; $display_string .= '<b>Download: </b><a href="'.$PHP_SELF.'?ID='.$row_demos['demosID'].'"><font color="#34bfe7"><b>Click Here</b></font></a><br>'; $display_string .= '<b>Downloaded:</b> '.strtoupper($row_demos['demosDownloads']).' times<br>'; $display_string .= '<a href="faqs.php#watch"><b><font color="lime">How do I watch demos?</font></b></a><br><br></td></tr>'; } echo "Query: " . $queryz . "<br><br><br>"; $display_string .= "</table><br>"; echo $display_string; ?> Any further help would be greatly appreciated, and I thank you for your response thus far Quote Link to comment Share on other sites More sharing options...
Pedsdude Posted June 21, 2009 Author Share Posted June 21, 2009 For those interested, I've managed to solve this (or at least I solved with a very similar problem and so I'm assuming it works for this too). Before I started looping, I did: <input type="hidden" name="selectedtype"> I then changed: <input type="button" onclick="ajaxFunction()" value="'.$counter.'" /> to: <a href="#" onclick="ajaxFunction(\''.$counter.'\')"> In the javascript/Ajax coding, I changed the first line from: function ajaxFunction(){ to: function ajaxFunction( selected ){ I then changed: var from = document.getElementById('from').value; to: var from = selected; Problem solved! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.