Editar contenido usando Mootools, php y mysql

p3rikl3s · #1 (**permalink**) 12/11/2009, 09:10

Hola amigos foreros ! , en esta ocasión me acerco a ustedes porque realmente necesito orientación con respecto a una aplicación que estoy desarrollando. Estoy trabajando con formularios y quiero modificar el contenido usando ajax, todo funciona bien hasta el momento de hacer el request al archivo guardar.php, que como dice su nombre, es quien recibe los datos por POST, hace la consulta SQL y actualiza el registro. Esto es en teoria, pero en la practica no funciona esto ultimo.

Sin mas rodeos, aqui esta el codigo (para que funcione necesitan la libreria mootools, si nembargo no es necesario que la tenga porque mi problema es con el request o con el php...eso creo. Por eso publique aqui y en el foro de ajax):

Archivo editable.html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>

<script type="text/javascript">
window.onload = function() {
var paras = document.getElementById('content').getElementsByTa gName('p');
if(paras.length) {
paras[0].className = paras[0].className + ' intro';
}
};
</script> <style type="text/css">
.editable:hover { background:#eee; }
.textarea textarea{ height:200px; padding:3px; }
.editable-empty { background:#fffea1; padding:20px; border:1px dashed #fc0; }
.box { border:1px solid #ccc; padding:5px; display:block; width:95%; }
</style>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//once the dom is ready
window.addEvent('domready', function() {
//find the editable areas
$$('.editable').each(function(el) {
//add double-click and blur events
el.addEvent('dblclick',function() {
//store "before" message
var before = el.get('html').trim();
//erase current
el.set('html','');
//replace current text/content with input or textarea element
if(el.hasClass('textarea'))
{
var input = new Element('textarea', { 'class':'box', 'text':before });
}
else
{
var input = new Element('input', { 'class':'box', 'value':before });
//blur input when they press "Enter"
input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });
}
input.inject(el).select();
//add blur event to input
input.addEvent('blur', function() {
//get value, place it in original element
val = input.get('value').trim();
el.set('text',val).addClass(val != '' ? '' : 'editable-empty');

//save respective record
var url = 'guardame.php?id=' + el.get('rel') + '&content=' + el.get('text');
var request = new Request({
url:url,
method:'post',
onRequest: function() {
alert('making ajax call :: ' + url);
}
}).send();
});
});
});
});
</script>

</head>
<body>






<p>Dale doble-click en H1 verde (Editable Title) para editar y guardar el titulo. El H1 tiene un atributo rel de "32" -- que corresponde al registro que va ser actualizado en la BD. Clickea fuera del input o text tarea para guardar tu modificacion.</p>



<h1 class="editable" rel="32" style="color:darkgreen;" title="Article Title">Editable Title</h1>
<p class="editable textarea" title="Content Paragraph" rel="33">
This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.
This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.
This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.
This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.
This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.
This is an editable paragraph. This is an editable paragraph. This is an editable paragraph. This is an editable paragraph.
</p>

<div class="clear"></div>
</div></div>
</body>


</html>

Archivo guardame.php:

Código PHP:

  <?php  

include("include/conectar.php"); 
  
  if(isset($_POST['content']))
{
    
    $query = "UPDATE prod_ord SET unidad = '".mysql_real_escape_string(stripslashes($_POST['content']))."' WHERE orden = ".$_POST['id'];
    $result = mysql_query($query);
}  

?>