ayuda con una funcion de ajax

joaowizard · #1 (**permalink**) 27/10/2009, 10:31

Hola a todos ... una vez mas acudiendo a su sabiduría ... estoy queriendo modificar el texto sin recargar la página, y para ello estoy usando el plugin del siguiente enlace:

http://valums.com/edit-in-place/

este funciona con el texto de la página, le he hecho algunas modificaciones para que muestre texto de una base de datos y todo bien, pero resulta que estoy queriendo que el texto ingresado pues se actualice en mi base de datos, pero no se como hacerlo, tengo lo siguiente:

index.php

Código PHP:

 
<!DOCTYPE html> 
<html> 
<head> 
<?php  
        $link = mysql_connect("localhost","nombre","clave");  
        mysql_select_db("basededatos", $link); 
        $sql = "SELECT * FROM empresas WHERE id_empresa = 1"; 
        $result=mysql_query($sql,$link);  
        $row=mysql_fetch_array($result);     
?> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>jQuery editableText demo</title> 
 
    <link href="editableText.css" rel="stylesheet" type="text/css">     
    <!-- We will use jQuery hosted by Google--> 
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>     
    <script src="jquery.editableText.js" type="text/javascript"></script>     
    <script> 
 
         
        jQuery(function($){ 
            $('h1.editableText, p.editableText').editableText({ 
                newlinesEnabled: false 
            }); 
             
            $.editableText.defaults.newlinesEnabled = true; 
 
            $('div.editableText').editableText(); 
             
            $('.editableText').change(function(){ 
                var newValue = $(this).html(); 
                var divError=document.getElementById("error"); 
 
                //aca quiero llamar a mi ajax y actualizar los campos de mi base de datos 
            }); 
        }); 
         
    </script> 
    <style> 
        body { 
            background: #ffffff;/**fondo de la página*/ 
        } 
        .centered { 
            margin: 0 auto; 
            width: 450px; 
            padding: 50px; 
            background: #fff; 
            border: 1px solid gray; 
        } 
    </style>     
    <link href="../new_css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="centered"> 
         
        <div id="nombre" class="editableText" style="border:dashed thin #0033FF"> 
            <p class="logo_text"><?php echo $row['nombre'];?></p> 
          </div> 
         
        <div id="productos" class="editableText" style="border:dashed thin #0033FF">     
            <p><?php echo $row['productos'];?></p> 
        </div> 
             
        <div id="observacion" class="editableText" style="border:dashed thin #0033FF"> 
            <p><?php echo $row['observacion'];?></p> 
        </div>     
 
</div> 
</body>

hasta ahí todo bien, me funciona super bien, pero ahora quiero que los textos que se cambien pues que se actualice la base de datos, para ellos debería pasarle el id del campo, que está contemplado en id en cada div .. alguien tiene alguna idea de como hacerlo ..?? gracias de antemano

joaowizard · #2 (**permalink**) 27/10/2009, 18:49

solucionado ... al estar trabajando con jQuery pues el mismo trae incorporado un "módulo" de AJAX. Accedemos a la funcion de la siguiente manera:

Código:

.........	
$('.editableText').change(function(){
				
//Declaro y capturo variables que enviaré a mi UPDATE de base de datos

var newValue = $(this).html();//capturo el valor de lo que está dentro del DIV
				
//aca comienza el código de ajax
	$.ajax({
		type: "POST",
		url: "update.php",
		data: "dato="+newValue,
		success: function(id_empresa){
		alert( "Se actualizaron los datos: ");
		}
});

Para mas información ver:
http://www.cristalab.com/tutoriales/...-jquery-c226l/

Espero les sirva .. salu2