Sistema de votacion con jquery

wanamingo2 · #1 (**permalink**) 08/11/2016, 07:39

Estoy haciendo un sistema de votación con jquery-ajax. Se trata del típico jquery que al hacer clic en un div (al votar), se envian datos a un archivo intermedio que procesa los datos (en este caso up_vote.php), y posteriormente se actualiza el div con los nuevos datos. Funciona perfectamente, dando de resultado =2 (variable enviada mas uno).

En una segunda fase intento presentar el resultado de la votación en otro div (en otro sitio de la página). El problema es, que se refresca el div, pero resultado es incorrecto, mostrando 1 en lugar de 2 (parece como si la variable no hubiera sido enviada, o el div se refrescara antes de recibir el resultado).

Os dejo el código completo por si alguien lo quiere probar...

Index.html__________________

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="myjquery.js"></script>
</head>
<body>
 
<script type="text/javascript">
$(function(){
  $(".n_vote").click(function() 
    {
    var id_field = $(this).attr("id");
    var parent = $(this);
     $.ajax({
                 type: "POST",
                 url: "up_vote.php",
                 data: {id_field: id_field, name: name},
                 cache: false,
        success: function(html){
            //mostrar los resultados en el mismo div
            parent.html(html); 
            //y tambien mostrar los resultados en div #results
            $("#results").load("up_vote.php"); 
    }  
             });
    return false;
    });
});
</script>
 
 
<div class="vote_system">
<div class="n_vote" name="up" id="1">Pincha aqui para mostrar resultado</div>
</div>
<!--  muestra el resultado correcto=2 -->
______________________________
 
<br>
Mostrar resultado en otro div: 
<br>
<div class="results" id="results">
</div>
<!--  muestra incorrecto el resultado=1 -->
 
</body>
</html>

up_vote.php__________________

Código PHP:

Ver original<?php
$id_field=$_POST['id_field'];
echo 'Resultado=';
echo $id_field+1;
?>

Soy un poco torpe con jquery. ¿Alguien con más experiencia me puede explicar porqué el segundo div no muestra el resultado correcto?, ¿que sucede y cómo resolvelo?

AngelKrak · #2 (**permalink**) 08/11/2016, 14:54

lo que quieres es cargar el Resultado que se proceso con AJAX, no cargar el archivo directamente, por eso solo te muestra 1, necesitas cargar el Archivo Procesado con ajax

Código Javascript:

Ver original$(function(){
  $(".n_vote").click(function() 
    {
    var id_field = $(this).attr("id");
    var parent = $(this);
     $.ajax({
                 type: "POST",
                 url: "up_vote.php",
                 data: {id_field: id_field, name: name},
                 cache: false,
        success: function(html){
            //mostrar los resultados en el mismo div
            parent.html(html); 
            //y tambien mostrar los resultados en div #results
            $("#results").html(html); 
    }  
             });
    return false;
    });
});

Demo
http://main.xfiddle.com/9948020e/s.php