Actualizar campo de BD mediante imagen

[AlZuwaga]

Paso a explicar con una imagen el funcionamiento actual... en realidad el cómo lo haría normalmente sin usar Ajax (ya que todavía no lo he desarrollado):



La columna llamada Vig. (Vigencia) tiene una serie de checkboxes para marcar los registros vigentes y desmarcar los que ya no lo son. Al finalizar, el operador debería hacer click sobre el botón "Actualizar vigencias" para que los cambios se reflejen en la BD (todos los checkbox están dentro de un form, tienen como name vigencia[] y como value el id del registro en cuestión)

Lo que pretendo hacer es, mediante Ajax, colocar una imagen en lugar del checkbox y que, al hacer click sobre ella, automáticamente se establezca el estado del campo (ordenanzas.vigencia) a la negación del estado actual (es decir, si está a 1 que pase a 0 y viceversa)

¿Algún ejemplo práctico/fácil de implementar que conozcan?

Gracias.

EDIT: La imagen que lanza la acción debería cambiar de estado también. Nuevamente gracias.

[AlZuwaga]

Estoy casi terminándolo guiándome de un ejemplo de listas anidadas mediante Ajax y haciendo algunos cambios por aquí y por allí. Pero me está fallando algo. Mañana lo veo y si lo soluciono lo pego acá.

[AlZuwaga]

Una aproximación totalmente mejorable (tanto en Javascript como en PHP... auqne para mis necesidades es válido -al menos por el momento-):

JS:

Código:

function nuevoAjax(){
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp = false;
	try
	{
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			// Creacion del objet AJAX para IE
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(E) { xmlhttp = false; }
	}
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp=new XMLHttpRequest(); }

	return xmlhttp;
} //nuevoAjax()

function modificaVigencia(id_ord, actual){
	ajax = nuevoAjax();
	ajax.open("GET", "ejecutor.php?id_ord=" + id_ord + "&actual=" + actual, true);
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 1){
			// Mientras carga muestro una imagen de "preload"
			span = document.getElementById("vig_" + id_ord);
			span.innerHTML = "<img src=\"images/progress.gif\" width=\"16\" height=\"16\" />";
		} // if readyState==1
		if(ajax.readyState == 4){
			document.getElementById("vig_" + id_ord).innerHTML = ajax.responseText;
		} // if readyState==4
	} // function()
	ajax.send(null);
} // function modificaVigencia()

===========================================

tablita.php:

Código:

<table width="100%" border="0" cellpadding="5" cellspacing="1">
        <tr>
          <th scope="col">Provincia</th>
          <th scope="col">Municipio</th>
          <th scope="col">Tema</th>
          <th scope="col">Ordenanza</th>
          <th scope="col">Vig.</th>
          <th scope="col">A&ntilde;o</th>
          <th scope="col">Mes</th>
          <th scope="col">Acciones</th>
        </tr>
<?
$resultado = mysql_query($sql);
while($datos = mysql_fetch_array($resultado)){
?>
        <tr>
          <td><? echo $datos['provincia']; ?></td>
          <td><? echo $datos['municipio']; ?></td>
          <td><? echo tipo_ord($datos['id_tema']); ?></td>
          <td><a href="ver.php?id_ord=<? echo $datos['id_ord']; ?>&id_tema=<? echo $id_tema; ?>" title="Ver datos completos de ordenanza"><? echo $datos['nombre']; ?></a></td>
          <td><span id="vig_<? echo $datos['id_ord']; ?>"><img src="images/vig_<? echo($datos['vigente'] == 0 ? "0" : "1"); ?>.jpg" width="16" height="16" alt="Vigencia" onclick="modificaVigencia('<? echo $datos['id_ord']; ?>', '<? echo $datos['vigente']; ?>')" /></span></td>
          <td><? echo $datos['anio']; ?></td>
          <td><? echo $datos['mes']; ?></td>
          <td><a href="ord_edit.php?id_ord=<? echo $datos['id_ord']; ?>&amp;id_tema=<? echo $id_tema; ?>"><img src="images/edit.png" alt="Editar" width="16" height="16" border="0" title="Editar" /></a> <a href="ord_del_exe.php?id_ord=<? echo $datos['id_ord']; ?>&amp;archivo=<? echo $datos['archivo']; ?>&amp;id_tema=<? echo $id_tema; ?>" onclick="return window.confirm('Est&aacute; seguro que desea eliminarlo?')"><img src="images/drop.png" alt="Eliminar" title="Eliminar" width="16" height="16" border="0" /></a> <a href="/dondeestanlosarchivos/<? echo $datos['archivo']; ?>"><img src="/xxxxxxx/images/<? echo tipo_archivo($datos['archivo']); ?>" alt="Ver archivo" width="16" height="16" border="0" title="Ver archivo" /></a></td>
        </tr>
<?
}//while
?>
      </table>

===========================================




ejecutor.php

Código:

<?
if(isset($_GET['id_ord'])){
	$id_ord = $_GET['id_ord'];
	$actual = $_GET['actual'];
	if($actual == 0){
		$proximo = 1;
	}
	else{
		$proximo = 0;
	}
	$sql = "UPDATE ml_ordenanzas SET vigente = $proximo WHERE id_ord = $id_ord";
//	echo $sql ; exit();
	mysql_query($sql);
	
	echo "<img src=\"images/vig_" . $proximo . ".jpg\" width=\"16\" height=\"16\" alt=\"Vigencia\" onclick=\"modificaVigencia('" . $id_ord . "', '" . $proximo . "')\" />";
}
else{
	echo "ERROR!!!!";
}
?>

Miusta el Ajax!!!!