Se me presenta un problema con Jquery

JethCrew · #1 (**permalink**) 23/12/2015, 16:27

La verdad soy muy nuevo en este lenguaje ya que mi lenguaje para todo es php y muy poco javascript, intentaré explicar mi caso para ver si me pueden orientar un poco con este problema que no se como hacerlo.

Tengo un script de competencias de imagenes, al hacer click en alguna de ellas te manda al siguiente link (de ejemplo):

index.php?ganador=1&perdedor=2

Esto lo que hace es ver quien de las dos ganó y guardarlo en la base de datos (siendo la imagen con id 1 la ganadora).

Al finalizar y guardar en la base de datos hago que se actualice la página para que vuelva a mostrar otras dos imágenes diferentes.

Lo que quiero lograr es que se actualice solo la competencia de las dos imágenes usando ajax sin tener que recargar la página.

Ya vi muchos tutoriales pero no logro hacerlo funcionar alguna ayuda teórica o con código que puedan proporcionarme?

Se los agradecería mucho saludos y gracias.

xfxstudios · #2 (**permalink**) 24/12/2015, 09:16

si muestras el codigo es mas facil ayudarte basado en lo que tienes hasta ahora, es facil lo que quieres pero debo aclarar algo asi que muestra lo que tienes

JethCrew · #3 (**permalink**) 25/12/2015, 18:33

Aquí te dejo el código donde actualizo la base de datos y el html donde llamo la imagen a mostrar y el link dependiendo la variable, estan dentro de un div llamado faces que a su vez estos dos divs estan dentro de otro llamado dual. Espero tu respuesta y ver si puedes ayudarme.

Lo que tengo entendido es que debería de recargar solamente el div dual pero no encuentro la forma de hacerlo o si yo estoy en lo correcto, por eso pido su ayuda porfavor. Saludos y gracias por tu atención.

Código PHP:

Ver original// Si la calificación - actualizar la base de datos
if ($_GET['winner'] && $_GET['loser']) {
 
    // Obtener el ganador
    $result = mysql_query("SELECT * FROM images WHERE image_id = ".$_GET['winner']." ");
    $winner = mysql_fetch_object($result);
 
    // Obtener el perdedor
    $result = mysql_query("SELECT * FROM images WHERE image_id = ".$_GET['loser']." ");
    $loser = mysql_fetch_object($result);
 
    //Actualización de la puntuación ganadora
    $winner_expected = expected($loser->score, $winner->score);
    $winner_new_score = win($winner->score, $winner_expected);
        //test print "Winner: ".$winner->score." - ".$winner_new_score." - ".$winner_expected."<br>";
    mysql_query("UPDATE images SET score = ".$winner_new_score.", wins = wins+1 WHERE image_id = ".$_GET['winner']);
 
    // Actualizar la puntuación de un perdedor
    $loser_expected = expected($winner->score, $loser->score);
    $loser_new_score = loss($loser->score, $loser_expected);
        //test print "Loser: ".$loser->score." - ".$loser_new_score." - ".$loser_expected."<br>";
    mysql_query("UPDATE images SET score = ".$loser_new_score.", losses = losses+1  WHERE image_id = ".$_GET['loser']);
 
    // Inserte resultado de la batalla
    mysql_query("INSERT INTO battles SET winner = ".$_GET['winner'].", loser = ".$_GET['loser']." ");
 
    // Volver a la página principal
    header("Location: http://localhost/facemash/");
}
 
// Cerrar la conexión
mysql_close();
//////////////////////////////////////////////////////////////////////////
?>
 
<html lang="es">
<body>
<div id="dual">
        <div class="faces">
<a href="index.php?winner=<?=$images[0]->image_id?>&loser=<?=$images[1]->image_id?>">
<img id="img" class="photos" src="images/<?=$images[0]->filename?>">
</div>
<div class="faces">
<a href="index.php?winner=<?=$images[1]->image_id?>&loser=<?=$images[0]->image_id?>"> 
<img id="img" class="photos" src="images/<?=$images[1]->filename?>" />
</div>
</div>

luquebayort · #4 (**permalink**) 27/12/2015, 14:19

Lo que puedes hacer al enviar los datos por get con una funcion o un evento.
function comosellame(){

//Query
var dato="rescatas el dato querese en este caso el id, por ejemplo con el atributo data-id"
var id=$('#identificador').attr('data-id');
var id2=$('#identificador2').attr('data-id');
$.ajax({
type: 'GET',
url: 'paginadeproceso.php',
data : {
winer:id,
lost:id2
}
}).done(function(respuesta) {
$('#cuerpo').html(respuesta);
});

}

JethCrew · #5 (**permalink**) 31/12/2015, 02:21

Estoy usando esto pero no se la forma de activar esto para realizar lo que quiero podrías guiarme un poco y decirme si estoy bien en como aplicaría el código? soy muy nuevo en este lenguaje por favor si me puedes proporcionar ayuda te lo agradecería.

Código Javascript:

Ver original<script>
//Query
var dato="image_id"
var id1=$('#identificador').attr('image_id');
var id2=$('#identificador2').attr('image_id');
$.ajax({
type: 'GET',
url: 'index.php',
data : {
winner:id1,
loser:id2
}
}).done(function(respuesta) {
$('#dual').html(respuesta);
});
}
</script>

Zenok · #6 (**permalink**) 02/01/2016, 09:25

Cita:

Iniciado por JethCrew

Estoy usando esto pero no se la forma de activar esto para realizar lo que quiero podrías guiarme un poco y decirme si estoy bien en como aplicaría el código? soy muy nuevo en este lenguaje por favor si me puedes proporcionar ayuda te lo agradecería.

Código Javascript:

Ver original<script>
//Query
var dato="image_id"
var id1=$('#identificador').attr('image_id');
var id2=$('#identificador2').attr('image_id');
$.ajax({
type: 'GET',
url: 'index.php',
data : {
winner:id1,
loser:id2
}
}).done(function(respuesta) {
$('#dual').html(respuesta);
});
}
</script>

El código está bien, ¿Tal y como tienes ahora te funciona para guardar el ganador/perdedor en la DB?

Si es así, yo lo que haría es; después de hacer la petición GET sobre el archivo php que inserta el ganador/perdedor, obtendría las dos siguientes imágenes e imprimiría una respuesta json con un array. Por ejemplo:

Código PHP:

Ver originalarray(
    array('url' => 'URL_IMAGEN', 'id' => 'ID_IMAGEN'),
    array('url' => 'URL_IMAGEN2', 'id' => 'ID_IMAGEN2')
);

Y luego con el mismo script que tienes para procesar el ganador, en la respuesta la convertiría en tipo json:

Código Javascript:

Ver originalvar dato="image_id"
var id1=$('#identificador').attr('image_id');
var id2=$('#identificador2').attr('image_id');
$.ajax({
type: 'GET',
url: 'index.php',
data : {
winner:id1,
loser:id2
},
dataType: 'json'
}).done(function(respuesta) {
console.log(respuesta);
//CAMBIAR LA URL Y SU image_id DE LA IMAGEN 1 POR ESTOS
//respuesta[0].url
//respuesta[0].id
//CAMBIAR LA URL Y SU image_id DE LA IMAGEN 2 POR ESTOS
//respuesta[1].url
//respuesta[1].id
 
});
}