Editar contenido usando Mootools, php y mysql 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...eso creo):
Archivo editable.html:
Cita:
<!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>
<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);
}
?> 
