Lógica y método para actualizar un enlace "como este" a través de Ajax

Volví a ver mi pregunta y me dijeron que había sido "eliminada voluntariamente por su autor", ¡pero no la eliminé! Así que no sé qué pasó allí. ¡Así que ahora tengo que preguntarlo todo de nuevo, y espero que esta vez se quede aquí!

Tengo una página con secuencias de comandos PHP que muestra una serie de imágenes. Estoy configurando un método mediante el cual un usuario conectado puede hacer clic en un enlace debajo de una imagen para "gustar" la imagen (convertirla en "favorita"), o "no me gusta" si ya es un favorito. El "estado similar" actual para el usuario se guarda en una base de datos MySQL (como 1 o 0).

Mi página PHP recorre los registros de imagen (junto con alguna lógica de paginación), sondea la base de datos y genera un enlace diferente debajo de cada imagen de acuerdo con el "estado similar" que se devuelve. Se dibuja una forma de enlace para una imagen que ya "me gusta" y otra forma para una que no es "me gusta" (cada una usa una de dos clases CSS diferentes para aparecer como íconos de tipo rollover para la retroalimentación visual).

Se parece a esto:

<?php
$step = 0;
while($row = $statement3->fetch()) {
$step++;
$ThisPhotoID = $row['photoid'];

echo '<img src="images/'.$ThisPhotoID.'.jpg" alt="" />';

echo '<div class="info">';
$statement4 = $db->prepare("SELECT COUNT(*) FROM `likes` WHERE `username` = ? AND `photoid` = ?");
$statement4->execute(array($username, $ThisPhotoID));
    if (!$statement4->fetchColumn() > 0) {
    //Favourite doesn't exist for this user, so invite to "like"...
    echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a>';
    }
    else {
    //Favourite does exist for this user, so check if already "liked" or not...
    $LikeState = 1;
    $statement5 = $db->prepare("SELECT COUNT(*) FROM `likes` WHERE `username` = ? AND `photoid` = ? AND `likestate` = ?");
    $statement5->execute(array($username, $ThisPhotoID, $LikeState));
        if ($statement5->fetchColumn() > 0) {
        //Favourite exists and it is liked, so invite to "unlike"...
        echo '<a href="#" id="linkid'.$step.'" title="Click to UNLIKE this photo" class="unlike">&nbsp;</a>';
        }
        else {
        //Favourite exists but it is not "liked", so invite to "like"...
        echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a>';
        }
    }
echo '</div>';
}
?>

Todo esto funciona bien y dibuja el enlace apropiado para cada imagen, según sea "me gusta" o no. Por el momento, las referencias de los enlaces son solo hashes, ya que me pregunto cómo hacer el procesamiento para cambiar el "estado similar".

Tengo un script de procesamiento listo, cuyo nombre podría poner en lugar de los hashes, que podría tomar la variable $ThisPhotoID en una cadena de consulta y actualizar la base de datos (cambiar el "estado similar") y luego volver a la página a través de un Encabezado PHP - tal vez a un ancla.

Ese script de procesamiento se vería así:

<?php
include("login.php");
$username = $session->username;

include('db_connect.php');

//This would be used in the link's query string...
$PhotoID = $_GET['photoid'];

//Get existing "likestate"...
$askstatement = $db->prepare("SELECT `likestate` FROM `likes` WHERE `username` = ? AND `photoid` = ?");
$askstatement->execute(array($username, $PhotoID));
$CurrentLikeState = $askstatement->fetchColumn(0); // Will be 1 or 0.

//Make new likestate...
if ($CurrentLikeState == 1) {
$NewLikeState = 0;
}
else {
$NewLikeState = 1;
}

//Change the like state...
$update_statement = $db->prepare("UPDATE `likes` SET `likestate` = ? WHERE `username` = ? AND `photoid` = ?");
$update_statement->execute(array($NewLikeState, $username, $PhotoID));

header("Location:mypage.php");
?>

Pero esto no es ideal, y me pregunto si sería posible realizar la actualización a través de Ajax, sin salir o actualizar la página, quizás usando JQuery. Por lo que puedo decir, para hacer esto, necesitaría incluir JQuery y:

  • insertar una función js
  • inserte un evento js onclick en cada enlace
  • construya la nueva forma del enlace en el archivo de procesamiento para que javacsript/ajax lo use como enlace de reemplazo

Necesito ayuda con el código javascript/ajax, pero también estoy un poco confundido en cuanto a cómo podría funcionar de todos modos: ¿no tendría javascript/ajax que dibujar mis enlaces en primer lugar, si va a cambiarlos después de actualizar la base de datos? (Si PHP genera los enlaces, ¿no se quedarán como PHP los genera?)

preguntado el 22 de mayo de 12 a las 19:05

Recomendaría leer un tutorial sobre ajax usando jQuery, creo que te ayudaría mucho. Debe imprimir sus enlaces con php y vincular eventos onclick a esos enlaces. -

He estado buscando ejemplos de Ajax, pero parece que no veo ninguno que emplee esta implementación: transformar los enlaces después de llamar al script de procesamiento. Si alguien tiene más ejemplos de código específicos (la función js usando los ID de enlace, el enlace al hacer clic, etc.), estaría extremadamente agradecido. -

2 Respuestas

Solo porque realmente no sé cómo comentar su pregunta, proporciono este comentario en esta sección. JQuery tiene dos funciones diferentes que podrías usar, que son las $.post() y $.ajax()-funciones.

podrías clasificar tus enlaces así:

<a class="like_link" title="<?php echo $picture_id; ?>">

y simplemente use la función de clic de jquery:

$('.like_link').click(function(){
     var id=$(this).attr("title");
     // Ajax-stuff
});

o algo por el estilo. Realmente no tengo la intención de que esto sea una respuesta, solo informativo.

contestado el 23 de mayo de 12 a las 01:05

Oh... y puedes usar el método jquery .load para actualizar la página - jmcguffee

Hice algo similar en el pasado y lo modifiqué a un ejemplo para usted.

Suponiendo que su html con enlaces se ve así:

<div id="allmylinks">
    <a href="toggle.php?link=foo">First link</a>
    <a href="toggle.php?link=bar">Second link</a>
</div>
$("div#allmylinks a").click(function(e){
    e.preventDefault();
    var link= $(this);
    $.get(
        $(this).attr('href'),
        function(data){
            console.log('Succesfull! '+data);
            link.attr('href',data);      // Set the new link
            $link.append(' was toggled');// Add some text
    });
    $(this).parents('div.entry-content').fadeOut('slow');
});

En toggle.php tuve esto:

if(isset($_REQUEST['link']))
    $link = $_REQUEST['link'];
else
    $link = "error";

// Validate link and process it
...

// If it's ajax
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest')
{
    // The new link
    echo 'toggle.php?link=toggled-'.$link;
}
// Not an ajax-request, redirect to previous page
else 
{
    header('Location: index.php');
    die();
}

contestado el 26 de mayo de 12 a las 13:05

Muchas gracias por sus ejemplos de fragmentos de código. Estoy tratando de ver si puedo reformular mi código para estar más en línea con su lógica. Pero tal como lo tenía, en el HTML generado por el bucle PHP (arriba) estaba identificando al individuo campo de golf, teniendo cada uno un ID único. (No le estaba dando una ID al div contenedor). Puede ver ejemplos de estos enlaces arriba, por ejemplo: echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a> - Fulano de Tal

Entonces, los enlaces en cada iteración del ciclo PHP toman una de tres formas (según el "El favorito existe..." comentarios anteriores), pero siempre tienen ID únicos como "linkid1", "linkid2", "linkid3", etc. Lo hice de esta manera para que cada aquí podría ser el objetivo del procesamiento ajax (en lugar de uno div como el div "allmylinks" en su ejemplo. ¿Se puede modificar la función js para que funcione para cada uno de estos enlaces identificados de forma única? ¿O es necesario apuntar a una ID de su div contenedor (habría muchos de estos por página)? - Fulano de Tal

Supongo que, para estar más en línea con su lógica, cada enlace podría reformularse como echo '<a href="processor.php?link='.$step.'&photoid='.$ThisID.'" title="Click to like this photo" class="like">&nbsp;</a>'; Pero entonces, mi secuencia de comandos de procesamiento (el equivalente de su toggle.php) necesita recibir dos parámetros para construir el nuevo enlace - el link y photoid. (Podría haber usado el photid como el link (para que fueran lo mismo), pero sucede que el photoid a menudo comienza con un número, y dado que las identificaciones no pueden comenzar con números, las hice separadas). ¡Me siento muy cerca pero no del todo! - Fulano de Tal

También me doy cuenta de que si modifico los datos para que sean como los suyos, habría un problema, ya que su función js solo toma una IDENTIFICACIÓN. Podría dar a cada div que contenga una identificación única, pero todavía habría muchos de estos divs en la página. - Fulano de Tal

Si modifica el jquery-selector a $("a.like"), Creo que funcionará como te gustaría. En realidad, no necesita el parámetro de enlace, lo usé para tener algo como variable. - Zombaya

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.