Ajax/MySQL - but with repeated database queries

[Pedsdude]

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

[Stooney]

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)

 

 

[Pedsdude]

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

[Pedsdude]

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!