Resolved multiple ajax / php problem (quite complicated)

paddyfields · 04-11-2012, 08:27 PM

Hi there, if you can help with this you are the best person ever! It's a bit long winded so please bare with me.

A user can save events to their personal area. The details are stored in its own table with event ID and the member ID. A PHP statement says IF it's not saved then display a 'save' button, and if it is then show an 'unsave' button. each button calls the appropriate AJAX function.

This works. However I now have a page which lists all the events available at a certain venue (via php/sql), with this button next to EACH of the events, and now it won't work.

the php (main page)

Code:

<?php
$query = mysql_query("SELECT * FROM venue JOIN gig ON venue.venueid = gig.venueid WHERE gig.venueid = '$venueid' ORDER BY gigdate");
							
if($row = mysql_fetch_array($query)){
do
{
?>
								
<div id="venue_listingbox">
									
<?php
$gigid = $row['gigid'];
$savedsearch = mysql_query("SELECT * FROM savedgig WHERE memberid='$themember' AND gigid='$gigid'");
			
$row = mysql_fetch_array($savedsearch);
									
if(empty($row))
{
echo "<div id=\"savedEvent\"><img height=\"20px\" src=\"Images/icons/unsaved.gif\" onclick=\"ajaxSaveEvent()\"/></div>";          
}
else
{
echo "<div id=\"savedEvent\"><img height=\"20px\" src=\"Images/icons/saved.gif\" onclick=\"ajaxUnSaveEvent()\"/></div>";
}
?>


}
while.. {blah blah blah...}

the AJAX

Code:

<!-- save gig -->
<script language="javascript" type="text/javascript">
 
//Browser Support Code
function ajaxSaveEvent(){
var ajaxRequest;  // The variable that makes Ajax possible!
try{
// not relevent // 
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById("savedEvent").innerHTML=ajaxRequest.responseText;
}
else
{
document.getElementById("savedEvent").innerHTML = "<img src='Images/icons/loading.gif' />";
}
}
var memberid = <?php echo $themember; ?>;
var gigid = <?php echo $gigid; ?>;
var queryString = "?mem=" + memberid + "&gig=" + gigid;
ajaxRequest.open("GET", "saveevent_save.php" + queryString, true);
ajaxRequest.send(null); 
}
</script>

The other AJAX is the same yet refers to function ajaxUnSaveEvent, and calls saveevent_forget.php

And the PHP it calls... saveevent_save.php

Code:

<?php
include("connect.php");
$gigid = $_GET['gig'];
$memberid = $_GET['mem'];
$sql="INSERT IGNORE INTO savedgig (memberid, gigid) VALUES ('$memberid','$gigid')";if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}

echo "<img height=\"20px\" src=\"Images/icons/saved.gif\" onclick=\"ajaxUnSaveEvent()\"/>";
?>

The other is the same, yet deletes from the table and is called saveevent_forget.php

So!
Sorry, I realise this is a lot of information.

I have a feeling it's due to the innerHTML trying to replace the same DIV ID, but I can't think of a way to give each Div its own unique ID?

Any help would be fantastic!

Cheers

paddyfields · 04-11-2012, 09:45 PM

Ok so I've played around with the innerHTML as in my head this theory works. The DIV needs it's own unique id, so i've done this;

PHP

Code:

if(empty($row))
{
echo "<div id=\"mydiv$gigid\"><img height=\"20px\" src=\"Images/icons/unsaved.gif\" onclick=\"ajaxSaveEvent()\"/></div>"; 
}
else
{
echo "<div id=\"mydiv$gigid\"><img height=\"20px\" src=\"Images/icons/saved.gif\" onclick=\"ajaxUnSaveEvent()\"/></div>";
}
?>

and edited the AJAX

Code:

document.getElementById("mydiv<?php echo $gigid; ?>").innerHTML=ajaxRequest.responseText;

But it's still no good?

The AJAX is included in the DO WHILE loop by the way, so each one it produces should be unique to that DivID