Looking for an toggle script

[Muiter]

I'm looking for an toggle script (ajax/php) so I can change some values in my database.I found this one for an example but that is only for ASP http://www.asp.net/ajax/ajaxcontroltoolkit...ggleButton.aspxDoes anybody know an good script that i can use? Requirements:changing icons when clicking;updates database with yes or no;php;

[Muiter]

Any help please

[thescientist]

what do you have so far? what exactly do you want it do?

[Muiter]

I have an image. When I click on it there should be an action taken in my database.What I have for now is:

<td onclick="toggleContact('.$row['id'].')"><img title="'.$lang['delete'].'" src="images/icon/delete_sm.png"></td>

var xmlhttp;function toggleContact(str){xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="ajax_toggle_contact.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=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;}

<?php$q=$_GET["q"];require('../config.php');require('language.php');$sql="UPDATE contactpersoon SET actief = 'nee' WHERE id = '".$q."' ";// resultaat van queryif(!$res = mysql_query($sql,$con)){	trigger_error(mysql_error().'<br />In query: '.$sql);}?>

[thescientist]

so what's happening currently? Are you getting any errors? my first concern is how that HTML <td> is being generated. Shouldn't you be echoing out the PHP variables? Or is that part of an echo statement? In the source, it should just be a number, letter etc, to be passed to the toggle function.

[dsonesuk]

you first need to give the cell a id reference so we can target it to return changed value and icon.

echo '<tr><td id="row'.$row['id'].'"><img title="'.$lang['delete'].'" src="images/icon/delete_sm.png"></td></tr>'."\n";

second, because, you need to pass the cell id to function stateChanged(), you have to make is global

var xmlhttp;var hold_rowid="";function toggleContact(str){hold_rowid=str;xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="ajax_toggle_contact.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("row"+hold_rowid).innerHTML=xmlhttp.responseText;  //this now identifies which cell to target and change.}}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;}

now to update database and cell icon

<?php require('../config.php');require('language.php');mysql_select_db($database, $con);$id=$_GET["q"];	$sql = "SELECT actief FROM contactpersoon WHERE id=$id";	$query = mysql_query($sql, $con) or die(mysql_error());//deterime if value is already yes or no		while($myrow = mysql_fetch_assoc($query))		{		if($myrow['actief'] =='no')			{			$changeToAlt='yes';			}		else			{			$changeToAlt='no';			}		}		$sql="UPDATE contactpersoon SET actief=$changeToAlt WHERE id=$id"; 	$query = mysql_query($sql, $con) or die(mysql_error());//toggle table row icon to alternativeif($changeToAlt=='yes')	{echo '<img title="'.$lang['delete'].'" src="images/icon/delete_sm.png">'."\n";	}else	{echo '<img title="'.$lang['otherlang'].'" src="images/icon/otherimage.png">'."\n";}	?>

this may need adjusting to suit your needs, ut it should bring you closer to what you trying to achieve.

[Muiter]

It seems that this is what I need but I'm getting toggleContact not defined.... I have added the mouse click like <td id="row'.$row['id'].'" onclick="toggleContact('.$row['id'].')"><img title="'.$lang['delete'].'" src="images/icon/delete_sm.png"></td>

[dsonesuk]

That usually means it can't find the function that is being called, is it external, or embedded in page? if external make sure path and name of file are correct.

[dsonesuk]

I would not use the onclick event on the td cell but use a anchor link instead, when onclick is used on td, it is very erratic, and does not always change instantly, try

echo '<td id="row'.$row['id'].'"><a href="java script:void(null)" onclick="toggleContact('.$row['id'].')"><img title="'.$lang['delete'].'" src="images/icon/delete_sm.png"></a></td>';

this means you have to include this anchor in the response, unless you add id to the anchor itself, that should work, your choice.

if($changeToAlt=='yes')	{echo '<a href="java script:void(null)" onclick="toggleContact('.$row['id'].')"><img title="'.$lang['delete'].'" src="images/icon/delete_sm.png"</a>>'."\n";	}else	{echo '<a href="java script:void(null)" onclick="toggleContact('.$row['id'].')"><img title="'.$lang['otherlang'].'" src="images/icon/otherimage.png"></a>'."\n";}

Note: posting here adds a space between javascript

[Muiter]

It's working but now it's messing op an other Ajax script. This script is used to open an new div when clicking on it, and close when clicking it again.Now it's also closed when I use the toggle script.Any new ideas? You made my day so far

function showDetails(str){if(document.getElementById("details"+str).innerHTML=="") //if empty proceed to show details{xmlhttp=GetXmlHttpObject();if (xmlhttp==null){alert ("Browser does not support HTTP Request");return;}var url="includes/js/ajax_details_adres.php";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);divnumber=str;}else{document.getElementById("details"+str).innerHTML=""; //if NOT empty, clear the details from div}}function stateChanged(){if (xmlhttp.readyState==4){document.getElementById("details"+divnumber).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;}

[dsonesuk]

this toggle row script wouldn't happen to be inside, one of these toggle div element? clicking the table row, may also cause the div function to run also, and since they use the same query string variable 'q' there maybe a conflict try change the 'q' querystring to a different one, but remember to change the value in the php $_GET['q'] reference as well.

[Muiter]

The toggle script is inside the other element. Changing the q to u does not solve this problem.

[dsonesuk]

The onclick event in the inner container, bubbles up to parent/s also. So you have to turn it off try adding 'event.cancelBubble=true;' to the inner triggered event container onclick="toggleContact('.$row['id'].');event.cancelBubble=true;"

[Muiter]

That is not working. The event is trigged by onclick="showDetails('.$row['id'].');"

[Muiter]

Back yo this problem. I have setting-up an new code that is not in an some Ajax script.

					while ($row = mysql_fetch_array($res))					{						echo '<tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">								  <td onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>									<td onclick="setHighlighted(this),showDetails('.$row['id'].');">'.$row['bestelno'].'</td>									<td onclick="setHighlighted(this),showDetails('.$row['id'].');">'.$row['omschrijving'].'</td>';									if(empty($row['aantal_huidig']))									{									  echo '<td width=25 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>											  <td width=25 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>';									}									else									{									  echo '<td width=25 onclick="toggleSlijtd('.$row['id'].')"><img title="'.htmlentities($lang['slijtdeel_minus']).'" src="images/icon/arrow_minus.png" /></td>											  <td width=25 align="right" onclick="setHighlighted(this),showDetails('.$row['id'].');">'.$row['aantal_huidig'].'</td>';									}									echo '<td width=50 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>';									if(empty($row['in_bestelling']))									{									  echo '<td width=65 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>';									}									else									{									  echo '<td width=65 align="right" onclick="setHighlighted(this),showDetails('.$row['id'].');">'.$row['in_bestelling'].'</td>';									}									echo '<td width=35 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>';									if($row['prijs'] == 0.00)									{									  echo '<td width=75 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>';									}									else									{									  echo '<td width=75 align="right">€ '.$row['prijs'].'</td>';									}									echo '<td width=50 onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>									<td onclick="setHighlighted(this),showDetails('.$row['id'].');">'.$row['catagorie'].'</td>									<td onclick="setHighlighted(this),showDetails('.$row['id'].');">'.htmlentities($row['leverancier']).'</td>								  <td onclick="setHighlighted(this),showDetails('.$row['id'].');"></td>							  </tr>							  <tr>								  <td colspan="13"> <div id="details'.$row['id'].'"></div> </td>							  </tr>';					}

My first problem is where the new arrow and number is shown.