Foros del Web » Programando para Internet » Javascript » Frameworks JS »

problema con ajax

Estas en el tema de problema con ajax en el foro de Frameworks JS en Foros del Web. Hola, soy nuevo por aqui, encontré este foro buscando un poco por la red a ver si podia resolver mi problema. Les comento a ver ...
  #1 (permalink)  
Antiguo 08/11/2010, 19:05
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
problema con ajax

Hola, soy nuevo por aqui, encontré este foro buscando un poco por la red a ver si podia resolver mi problema.
Les comento a ver si me pueden ayudar, se trata de un menú con efecto slide como les muestro en esta imagen:


Todo funciona correctamente hasta tratar de eliminar un registro de la base de datos, osea al pasar por ajax, que el menú pierde la funcionalidad slide y ya no permite ver lo que contiene hasta recargar la página.
Os ilustro un poco:

como pueden observar no estoy muy experimentado aún con todo esto, os agradeceré mucho un poco de ayuda y espero haber explicado bien el problema que no soy el mejor expresándome.
Gracias por adelantado!

Os dejo por aquí el código para que lo miréis un poco.

CATEGORIAS.PHP
Código PHP:
<div id="categorias" >
    <div id="firstpane" class="menu_list">
<?php
    $itemscategorias 
mysql_query("select * from mn_categorias"$conexion);
    while (
$fila mysql_fetch_array($itemscategorias)){
    echo 
"<p  class=menu_head> " $fila['categorias'] . "</p>";
    echo 
"<div class=menu_body>";
    
$resultado mysql_query("select * from mn_subcategorias where id_categoria = $fila[id_categoria] order by subcategorias"$conexion);
        while(
$fila mysql_fetch_array($resultado)){
            echo 
"<div class=subcategorias>";
            echo 
"<a href=#>".$fila['subcategorias']."</a>";
            echo 
"<a style=cursor:pointer; onclick=eliminarDato(".$fila['id_subcategoria'].")><img src=eliminar.gif align=right height=13px width=13px></a>";
            echo 
"</div>";
        }
        echo 
"</div>";
    }
?> 
    </div>
</div>
CATEGORIAS.JS
Código PHP:
$(document).ready(function(){
    
//efecto slide en el elemento class="menu_body" cuando se haga click en el elemento con class="menu_head"
    
$("p.menu_head").click(function(){
        $(
this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    });
});
function 
objetoAjax(){
    var 
xmlhttp=false;
    try{
        
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(
e){
        try{
           
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(
E){
            
xmlhttp false;
          }
    }
    if (!
xmlhttp && typeof XMLHttpRequest!='undefined') {
        
xmlhttp = new XMLHttpRequest();
    }
    return 
xmlhttp;
}
function 
eliminarDato(id_subcategoria){
    
//donde se mostrará el resultado de la eliminacion
    
divResultado=document.getElementById('resultado');
    
    
//cuadro de confirmacion    
    
var eliminar confirm("¿eliminar?")
    if ( 
eliminar ) {
        
//instanciamos el objetoAjax
        
ajax=objetoAjax();
        
//uso del medotod GET
        //archivo que realizará el proceso de eliminación
        
ajax.open("GET""eliminacion.php?id_subcategoria="+id_subcategoria);
        
ajax.onreadystatechange=function() {
            if (
ajax.readyState==4) {
                
//mostrar resultados en esta capa
                
divResultado.innerHTML ajax.responseText
            
}
        }
        
//como hacemos uso del metodo GET
        //colocamos null
        
ajax.send(null)
    }


ELIMINACION.PHP
Código PHP:
<?php
require('conexion.php');
//variable GET
$idemp=$_GET['id_subcategoria'];
$elimina="DELETE FROM mn_subcategorias WHERE id_subcategoria=$idemp";
mysql_query($elimina,$conexion);

include(
'categorias.php');
?>

Última edición por crash1912; 09/11/2010 a las 08:21
  #2 (permalink)  
Antiguo 09/11/2010, 09:18
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

creo que es esto lo que no esta funcionando correctamente:
$(document).ready(function(){

pareceser que al enviar los datos a ELIMINACION.PHP y este hacer include a CATEGORIAS.PHP $(document).ready(function() deja de funcionar...

menudo lío me estoy haciendo madre mia....
  #3 (permalink)  
Antiguo 09/11/2010, 09:43
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

Si elimina correctamente, elimina esto: divResultado.innerHTML = ajax.responseText creo que está de más, supongo que son para tus pruebas.

En categorias.php a esta parte <a style=cursor:pointer; onclick...
agregale un class <a class='option' style=cursor:pointer; onclick...

y en el $(document).ready colocas esto:

$(".option").click(function(){
$(this).parent().remove();
});

A ver que resulta.
  #4 (permalink)  
Antiguo 09/11/2010, 10:06
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

hola, he probado tu solucion y funciona para eliminar, aunque me deja algunas dudas en el aire...

con esto solo elimina los datos de la pantalla segun veo, tambien tengo una funcion de editar y otra de agregar nuevos registros con lo cual esto no seria una solucion general, aunque para la funcion de eliminar viene como anillo al dedo.

$(".option").click(function(){
$(this).parent().remove();
});

Al eliminar la linea esta:
divResultado.innerHTML = ajax.responseText
no se recarga el contenido de por si, si no se le ayuda con el class=option que me has recomendado, pero no se... me suena a que quizá debe de haber otra forma..
  #5 (permalink)  
Antiguo 09/11/2010, 17:14
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

Muestranos tus funciones de editar, agregar nuevos. Si es posible todo
  #6 (permalink)  
Antiguo 09/11/2010, 17:59
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

Código PHP:
function actualizarDato(){
    
divResultado document.getElementById('resultado');
    
divFormulario document.getElementById('formulario');
    
ids=document.formact.id_subcategoria.value;
    
sub=document.formact.subcategorias.value;
    
idc=document.formact.id_categoria.value;
    
url=document.formact.url.value;
    
ajax=objetoAjax();
    
ajax.open("POST""actualizar.php",true);
    
ajax.onreadystatechange=function() {
        if (
ajax.readyState==4) {
            
divResultado.innerHTML ajax.responseText
            divFormulario
.innerHTML "<p>Actualizacion correcta</p>";
        }
    }
    
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  
ajax.send("id_subcategoria="+ids+"&subcategorias="+sub+"&id_categoria="+idc+"&url="+url)
}
function 
registrarDato(){
    
divResultado document.getElementById('resultado');
    
divFormulario document.getElementById('formulario');
    
sub=document.newreg.subcategorias.value;
    
idc=document.newreg.id_categoria.value;
    
url=document.newreg.url.value;
    
ajax=objetoAjax();
    
ajax.open("POST""registrar.php",true);
    
ajax.onreadystatechange=function() {
        if (
ajax.readyState==4) {
            
divResultado.innerHTML ajax.responseText
            divFormulario
.innerHTML "<p>Registro correcto</p>"
            
LimpiarCampos();
        }
    }
    
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
ajax.send("subcategorias="+sub+"&id_categoria="+idc+"&url="+url)
}
function 
LimpiarCampos(){
    
document.newreg.subcategorias.value="";
    
document.newreg.id_categoria.value="";
    
document.newreg.url.value="";
    
document.newreg.nombres.focus();

  #7 (permalink)  
Antiguo 09/11/2010, 18:04
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

Cita:
Iniciado por chicohot20 Ver Mensaje
Si elimina correctamente, elimina esto: divResultado.innerHTML = ajax.responseText creo que está de más, supongo que son para tus pruebas.

En categorias.php a esta parte <a style=cursor:pointer; onclick...
agregale un class <a class='option' style=cursor:pointer; onclick...

y en el $(document).ready colocas esto:

$(".option").click(function(){
$(this).parent().remove();
});

A ver que resulta.
yo creo que esta forma de hacerlo, permite que funcione pero cuando ocurra un error por parte de eliminar.php, o algun error de conexion con la base de datos, al recargar la página los registros eliminados, "re-aparecerían" no se si me explico, aunque es una forma interesante la verdad... pero creo que no es la solucion... :(
  #8 (permalink)  
Antiguo 09/11/2010, 19:23
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

aqui dejo un link para que puedan ver que sucede:
http://www.inforsound.com/categorias/
  #9 (permalink)  
Antiguo 09/11/2010, 19:38
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

Regresando al primero:

en eliminacion.php yo creo que el codigo debe ser así:
Código PHP:
Ver original
  1. <?php
  2. require('conexion.php');
  3. //variable GET
  4. $idemp=$_GET['id_subcategoria'];
  5. $idcat=$_GET['id_categoria'];
  6. $elimina="DELETE FROM mn_subcategorias WHERE id_subcategoria=$idemp";
  7. mysql_query($elimina,$conexion);
  8.  
  9. //include('categorias.php');  ELIMINALO, con esto está imprimiendo todo el menu
  10.  
  11. //ACA DEBES IMPRIMIR SOLO LAS SUBCATEGORIAS, LAS ACTUALIZADAS
  12. $resultado = mysql_query("select * from mn_subcategorias where id_categoria = $idcat order by subcategorias", $conexion);
  13.         while($fila = mysql_fetch_array($resultado)){
  14.             echo "<div class=subcategorias>";
  15.             echo "<a href=#>".$fila['subcategorias']."</a>";
  16.              echo "<a style=cursor:pointer; onclick=eliminarDato(".$idcat.",".$fila['id_subcategoria'].")><img src=eliminar.gif align=right height=13px width=13px></a>";
  17.             echo "</div>";
  18.         }
  19.        
  20. ?>

categorias.php

Código PHP:
Ver original
  1. <div id="categorias" >
  2.     <div id="firstpane" class="menu_list">
  3. <?php
  4.     $itemscategorias = mysql_query("select * from mn_categorias", $conexion);
  5.     while ($fila = mysql_fetch_array($itemscategorias)){
  6.     echo "<p  class=menu_head> " . $fila['categorias'] . "</p>";
  7.     echo "<div class=menu_body id=".$fila['id_categoria'].">";
  8.     $resultado = mysql_query("select * from mn_subcategorias where id_categoria = $fila[id_categoria] order by subcategorias", $conexion);
  9.         while($fila = mysql_fetch_array($resultado)){
  10.             echo "<div class=subcategorias>";
  11.             echo "<a href=#>".$fila['subcategorias']."</a>";
  12.             echo "<a style=cursor:pointer; onclick=eliminarDato(".$fila['id_categoria'].",".$fila['id_subcategoria'].")><img src=eliminar.gif align=right height=13px width=13px></a>";
  13.             echo "</div>";
  14.         }
  15.         echo "</div>";
  16.     }
  17. ?>
  18.     </div>
  19. </div>

y este es el JS, funciona con JQuery:

Código Javascript:
Ver original
  1. function eliminarDato(idcategoria,idsubcategoria){
  2.                 ajax(idcategoria,idsubcategoria)
  3.         }
  4.         function ajax(idcategoria,idsubcategoria){
  5.             $.ajax({
  6.               url: "eliminacion.php?id_subcategoria="+idsubcategoria+"&id_categoria="+idcategoria,
  7.               contentType:"application/x-www-form-urlencoded; charset=utf-8",
  8.               type:"GET",
  9.               error: function(){
  10.                alert('Error');
  11.               },
  12.               success: function(data){
  13.                   $("#"+idcategoria).html(data);
  14.                }
  15.             });
  16.         }

A ver que como te sale.
  #10 (permalink)  
Antiguo 10/11/2010, 07:49
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

me lanza el siguiente error despues de tratar de
eliminar un registro, en la linea que cita no hace
ninguna tarea de eliminacion, aunque tampoco
elimina el registro pero no lanza ningun error:

Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\menu\eliminacion.php on line 13

he copiado tal cual lo has puesto, en la linea 12-13 hay:

Código PHP:
$resultado mysql_query("select * from mn_subcategorias where id_categoria = $idcat order by subcategorias"$conexion);
        while(
$fila mysql_fetch_array($resultado)){ 

Última edición por crash1912; 10/11/2010 a las 07:55
  #11 (permalink)  
Antiguo 10/11/2010, 08:21
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

Que extraño, disculpame pero en PHP estoy de cero a la izquierda. Despues de haber eliminado una subcategoria (DELETE ... ) en esa parte se supone que debe imprimir las subcategorias que quedan de $idcat; y ese nuevo registro debe actualizarse en el slide.
  #12 (permalink)  
Antiguo 10/11/2010, 08:21
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

he estado haciendo unas pruebas, he comprobado lo que recibe el archivo eliminacion.php:

esto es lo que hay en la variable $idemp que recibe por GET id_subcategoria: 1 <--esto deberia ser el id de categoria--

esto es lo que hay en la varvariable $idcat que recibe por GET id_categoria:

esto es lo que intenta hacer $elimina: DELETE FROM mn_subcategorias WHERE id_subcategoria=1

lo cual me lleva a pensar que donde se lia todo un poco es en el JS:

Código PHP:
function eliminarDato(idcategoria,idsubcategoria){
                
ajax(idcategoria,idsubcategoria)
        }
        function 
ajax(idcategoria,idsubcategoria){
            $.
ajax({
              
url"eliminacion.php?id_subcategoria="+idsubcategoria+"&id_categoria="+idcategoria,
              
contentType:"application/x-www-form-urlencoded; charset=utf-8",
              
type:"GET",
              
error: function(){
               
alert('Error');
              },
              
success: function(data){
                  $(
"#"+idcategoria).html(data);
               }
            });
        } 
  #13 (permalink)  
Antiguo 10/11/2010, 08:29
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

Has visto categorias.php?
a la funcion eliminarDato se le envia dos parametros, verifica si esta enviando correctamente.
eliminarDato(".$fila['id_categoria'].",".$fila['id_subcategoria'].")>
  #14 (permalink)  
Antiguo 10/11/2010, 08:35
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

si, envia en $fila['id_categoria'] envia 3 y en $fila['id_subcategoria'] envia 49, parece que donde se pierden estos datos es en la funcion eliminar del JS...
  #15 (permalink)  
Antiguo 10/11/2010, 08:41
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

No lo creo acabo de probarlo. Intenta probar si llega correctamente a la funcion eliminarDato()
  #16 (permalink)  
Antiguo 10/11/2010, 08:45
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

claro es el intermedio, para recibir mal la id de la subcategoria (1, 2 o 3) tiene que pasar por el JS, y eso si lo recibe el eliminando.php.
Le llega a id_subcategoria el id_categoria...
Y al id_categoría no le llega nada...
Es un poco extraño la verdad
  #17 (permalink)  
Antiguo 10/11/2010, 08:49
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 5 meses
Puntos: 43
Respuesta: problema con ajax

Si lo publicas todo para revisarlo?
  #18 (permalink)  
Antiguo 15/11/2010, 11:20
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 14 años
Puntos: 4
Respuesta: problema con ajax

solucionado, la solucion es la que da chicohot20.

Muchas gracias por tu ayuda Chicohot20 y a este foro.

Etiquetas: ajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:05.