[SOLUCIONADO] Conseguir mostrar el resultado de acciones sql mediante ajax en tiempo real?

[kukiko11]

Que tal foreros... me explico... he estado desarrollando una web dinamica y bueno como todos sabran ajax es la salvacion general a la hora de evitar la recarga de pagina cuando se trata de utilizar formularios y mostrar resultados en tiempo real...

La cosa es que no he tenido ningun tipo de problema al enviar cualquier tipo de formulario mdiante ajax... ya sea de contacto, comentarios, valoraciones lo que sea... enviar la info no ha sido problema. el detalle esta al momento de mostrar los resultados despues de hacer el envio de dichos formularios... por ejemplo.

para un sistema de valoracion que estoy empleando logro enviar el form sin problemas pero no se que pasos habria de seguir para que de manera inmediata se muestre la actualizacion hecha por el form sin tener que recargar la pagina. alguna idea para esto?

[Alexis88]

Si deseas mostrar la actualización en la página en la cual se encuentra el formulario, solo tienes que obtener la respuesta del servidor y asignarla como contenido de algún elemento del documento.

Código Javascript:

var ajax = new XMLHttpRequest();
ajax(método /* GET|POST|PUT|DELETE */, ruta /* ejemplo.php */, asíncrono /* true|false */);
ajax.send(valores /* query string (a=1&b=2), null o sin argumentos */);
ajax.addEventListener("load", function(){
    if (this.status == 200){
        elemento.innerHTML = this.responseText;
    }
}, false);
 

La respuesta es obtenida cuando se completa la petición exitosamente.

Un saludo

[kukiko11]

um pero no entiendo a la hora de establecer los valores y rutas... por lo general es entre ' '... o es tal cual como lo planteas. en mi caso estoy lidiando con este script y codigo:

archivo.php

Código PHP:

  <?php
include ("conexiondb.php");
include('config.php');
 
//establecemos la variable que contendra el id del comentario a puntuar
$id= quitar($_POST['num-comentario']);
//consultamos la cantidad actual de puntos tanto positivos como negativos
$consultar_positivo= mysql_query("SELECT positivo FROM comentarios WHERE id='$id' ");
//hacemos el arreglo con los resultados
$row= mysql_fetch_array($consultar_positivo);
 
//declaramos variable que contenga el punto positivo a sumar para el comentario
$sumar_positivo = quitar($_POST['punto']+1);
//establecemos una variable para los puntos positivos actuales
$cantidad_positivo=$row['positivo']; 
//vamos actualizando los puntos positivos conforme se use el boton de puntuar positivo
if ($cantidad_positivo>=0){
$puntuar_positivo= mysql_query("UPDATE `comentarios` SET `positivo` = '$sumar_positivo' WHERE `comentarios`.`id` = '$id' "); 
//si se actualizan los puntos positivos, se notifica
if ($puntuar_positivo) {
 
    echo "Gracias!";
 
//si no; se indica el error
}else{
    echo "Error con el servidor, intente mas tarde";
}
}
?>   

script:

$(document).ready(
function() {
$().ajaxStart(
function() {
$('.loading').show();
$('.resultado-valoracion').hide();
}).ajaxStop(
function() {
$('.loading').hide();
$('.resultado-valoracion').fadeIn('slow');
});
$('.form-positivo').submit(
function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {

$('.resultado-valoracion').html(data).fadeIn('slow');
}
})
return false;
});
})

[Alexis88]

¿Y cuál es el problema que se presenta cuando ejecutas ese código?

A primera vista, parece estar todo en orden, pero solo tú sabes lo que realmente ocurre ahí.

[sanandresm]

Podrias usar sockets, no nesecitas enviar una peticion para recibir algo sino que en cualquier momento podrias recibir o enviar algo.

[kukiko11]

de hecho si estaba bien... solo me estaba faltando imprimir una nueva variable con el nuevo dato resultado del envio del form. ahora el detalle esta en que al mostrarlos con un script si hago uso de los metodos show() o fadeIn() llamando al elemento por el id (#id) me funciona la valoracion solo en el primer div o comentario... y si lo hago con clases $(.class) no importa cual boton presione se me muestra en todos los comentarios el mismo resultado... es un error demasiado molesto en la vida jder x.x me esta costando lidiar con los divs cargados dinamicamente

[Alexis88]

El problema utilizando el mismo identificador es evidente puesto que es un valor que no debe repetirse y, si se repite, solo se considera al primer elemento que lo posea.

Por lo que explicas, entiendo que se trata de un sistema de comentarios. Debes de asociar la función con cada elemento, de forma que cuando ejecutes la petición, la respuesta pueda ser establecida en el elemento en cuestión. Por ejemplo, en este demo asocio el proceso de mostrar/ocultar a cada grupo de comentarios. Podrías tomar eso como referencia para hacer lo que buscas.

Un saludo

[kukiko11]

Iniciado por Alexis88

El problema utilizando el mismo identificador es evidente puesto que es un valor que no debe repetirse y, si se repite, solo se considera al primer elemento que lo posea.

Por lo que explicas, entiendo que se trata de un sistema de comentarios. Debes de asociar la función con cada elemento, de forma que cuando ejecutes la petición, la respuesta pueda ser establecida en el elemento en cuestión. Por ejemplo, en este demo asocio el proceso de mostrar/ocultar a cada grupo de comentarios. Podrías tomar eso como referencia para hacer lo que buscas.

Un saludo

el problema del ejemlo es que los elementos son estaticos... es decir los 4 estan establecidos o estructurados manualmente. en mi caso los comentarios son dinamicos y apartir de una sola estructura html... se van generando los demas cuyos ids van en incremento... por eso es que no se como asignar la funcion a cada elemento por separado cuando estos son dinamicos

[Alexis88]

Cuando tengas que asignar una misma función a varios elementos, ya sea que estos sean estáticos o dinámicos, lo conveniente es delegar al elemento que contendrá a dichos elementos o a un elemento ancestro de los mismos, el evento que disparará la ejecución de la función.

Código Javascript:

document.addEventListener("evento", function(event){
    if (event.target.className == "clase"){
        //Instrucciones
    }
}, false);
 

De esta forma, detectamos la ejecución del evento en el documento, pero puede ser en otro elemento ancestro de los elementos a los cuales deseas afectar. Mediante la propiedad target del objeto del evento, puedes tomar al elemento que ha sido afectado directamente por el evento. Una vez hecho esto, tomas a la clase del elemento en cuestión y la comparas con la que asignaste a los elementos estáticos o dinámicos y, si es la misma, ejecutas las acciones que desees.

Para casos así, es conveniente utilizar una clase que identificadores únicos.

Un saludo