problemas para crear un abm usando ajax con jquery

cristian_cena · #1 (**permalink**) 16/12/2010, 18:20

Hola amigos.
Comentarles que estoy queriendo crear un abm, alta, baja y modificacion de registros con ajax. En otras palabras, pasar un abm tradicional hecho en php y mysql a ajax.

bien, al grano.

La insercion de registros ya la he hecho y funciona perfecto. Consta de dos paginas, una el index y la otra la que procesa las variables del formulario e inserta el registro.

index.php

Código:

<form action="inserta.php" method="get">
	<input type="text" name="nombre" id="nombre"/>
	<input type="submit" value="+" id="enviar"/>
</form>
<script type="text/javascript">
var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#enviar");
  x.click(presionSubmit);
}

function presionSubmit()
{
  var v=$("#nombre").attr("value");
  $.get("inserta.php",{nombre:v}); 
  return false;
}
</script>

inserta.php

Código:

<?php 
require_once("conexion.php");
$sql= "insert into registros
values
(null, '".$_GET{"nombre"}."')
";
$res=mysql_query($sql,$conect);
?>

Como les dije funciona perfecto pero tengo el problema que una vez que se hace el "insert into" el index no se refrezca automaticamente.

Es lógico que esto ocurra porque traigo los registros de este modo:

Código:

<?php
$consulta="
select * from registros
";
$respuesta=mysql_query($consulta,$conect);
while($reg=mysql_fetch_array($respuesta))
{
?>
<tr class="registros">
	<td><span class="id"><?php echo $reg['id']?></span></td>
	<td><span class="nombre"><?php echo $reg['nombre']?></span></td>
</tr>
<?php
}
?>

He aquí mi problema.
¿Como traer registros sin usar $.get o $.post?

He intentado solucionarlo, aunque sin éxito, del siguiente modo:

Creé una pagina llamada pagina.php la cual alojé dentro de una carpeta llamada cargas.

Dentro de pagina.php incluí:

Código:

<?php
$consulta="
select * from registros
";
$respuesta=mysql_query($consulta,$conect);
while($reg=mysql_fetch_array($respuesta))
{
?>
<tr class="registros">
	<td><span class="id"><?php echo $reg['id']?></span></td>
	<td><span class="nombre"><?php echo $reg['nombre']?></span></td>
</tr>
<?php
}
?>

y luego en index.php dentro de <head></head>

Código:

<script type="text/javascript">
$(document).ready(function(){	
$('#cargamos').load('cargas/pagina.php');
});
</script>

Bien, esto no funcionó.

Me han comentado que para resolver este problema debo usar json.
Pero no tengo idea de como llevar a cabo esta tarea usando json.

Desde ya le agradezco si pueden compartirme un link, tutorial o ejemplo.

Sin mas, un fuerte abrazo.

/////////////////

Edito:

En este enlace pueden ver en funcionamiento el trabajo.

Notaran que luego de hacer click en el boton "+" se inserta el registro sin refrescar la pagina.
Pero no muestra el registro hasta que no pulsamos f5.

chicohot20 · #2 (**permalink**) 17/12/2010, 17:14

Se me ocurre que despues de insertar(en inserta.php) el archivo te imprima el dato que ingresaste y eso lo recuperes con el $get y agregas esa info a tu tabla del index.

caricatos · #3 (**permalink**) 17/12/2010, 17:44

Tema movido desde AJAX

tredio · #4 (**permalink**) 17/12/2010, 19:18

aca te prepare un ejemplo de como podrias hacerlo, no tengo php instalado asi que no lo pude probar, pero por ahi va la cosa:

index.php

Código PHP:

Ver original<head>
    <title>Prueba</title>
    <style>
        #listado{width:200px;}
    </style>
    
    <script type="text/javascript">
        $(document).ready(function(){
                var actualizar = function(){
                    $.post('insertar.php',{
                        accion:'actualizar'
                    },function(respuesta){
                        var tabla = $('<table/>').appendTo('#listado');
                        for( var i=0; i<respuesta.length; i++){
                            var fila = $('<tr/>').appendTo(tabla);
                            var id = $('<tr/>').text(respuesta[i][0]).appendTo(fila);   
                            var nombre = $('<tr/>').text(respuesta[i][1]).appendTo(fila);   
                        }
                    });     
                }
            
                $('#enviar').click(function(){
                    var nombre =$.trim($('#nombre').val());
                    if(nombre != ''){
                        $.post('insertar.php',{
                            accion:'insertar',
                            nombre:nombre   
                        },function(respuesta){
                            if(respuesta){
                                alert('el registro fue insertado correctamente')    ;
                                actualizar();
                            }
                        }); 
                    }else{
                        alert('el nombre no debe estar vacio'); 
                    }
                                        return false;
                });
                
                actualizar();
        });
    </script>
</head>
 
<body>
    <form action="inserta.php" method="get">
        <input type="text" name="nombre" id="nombre"/>
        <input type="submit" value="+" id="enviar"/>
    </form>
    <div id="listado"></div>
</body>

insertar.php

Código PHP:

Ver original<?php 
require_once("conexion.php");
 
$accion = $_REQUEST['accion'];
 
if($accion == 'actualizar'){
    $sql = 'SELECT * FROM registros';   
    $res=mysql_query($sql,$conect);
    $arreglo = '';
    while($reg=mysql_fetch_array($respuesta)){
        $arreglo[] = array($row['id'],$row['nombre']);
    }
    echo json_encode($arreglo);
}elseif ($accion == 'insertar'){
    $sql = 'INSERT INTO registros values(null, '.$_REQUEST['nombre'].')';   
    $res=mysql_query($sql,$conect);
    echo json_encode(true);
}else{
    echo 'Accion invalida';
}
 
?>