en utilisant jquery/ajax pour envoyer/mettre à jour div quand on clique sur le lien

Question

J'ai 2 couches que je dois mettre à jour individuellement si un utilisateur clique sur l'un d'entre eux.

<div id=wrapper> 
    <div id=upvote> 
     //This div can be filled by upvote.php?id=X 
     <? echo getUpVote(); ?> 
     <a href=#><img src=upv.png></a> 
    </div> 
    <div id=downvote> 
     //This div can be filled by downvote.php?id=X 
     <? echo getdownVote(); ?> 
     <a href=#><img src=downv.png></a> 
    </div> 
</div> 

Lorsque l'utilisateur clique sur l'image de vote vers le haut ou vers le bas, je dois effacer le contenu de la div, faire un appel ajax dans le fichier php respectif (obtenir demande), et se fanent dans le contenu chargé.

Comment puis-je faire cela?

Answer 1

requête AJAX peut être fait avec $.get et vous pouvez effacer la DIV en utilisant les fonctions d'animation de jQuery comme fadeOut

Voici un code sur la façon dont vous pouvez acchive ce que vous voulez:

$('#IdOfOneAnchor').click (function() { 
    var myDiv = $('#IdOfYourDiv'); 
    myDiv.fadeOut(); 
    $.get (
     'url/to/your/script.php', 
     { 
      // put params you need here 
     }, 
     function (response) { 
      myDiv.html (response).fadeIn(); 
     } 
    ); 

    return false; 
}); 

hors cours vous devra changer les sélecteurs pour correspondre à vos DIVs/liens ...

Answer 2

Attachez un gestionnaire de clic aux étiquettes d'ancrage. Trouvez l'URL à utiliser en fonction de l'ID du div conteneur, puis appelez load pour remplacer le contenu du wrapper. Fade out/in aux points appropriés. Assurez-vous que vous renvoyez false du gestionnaire de clic d'ancrage pour annuler l'action par défaut.

$('#upvote,#downvote').find('a').click(function() { 
    var url = $(this).closest('div').attr('id') + '.php?id=X'; 
    $('#wrapper').fadeOut(); 
       .load(url, function() { 
        $('#wrapper').fadeIn(); 
       }); 
    return false; // cancel click action 
}); 

Answer 3

Pour ajouter un gestionnaire de clic à un élément jQuery vous pouvez le faire:

$("#upvote").click(clickHandler); 

Où clickHandler est une fonction. Puisque vous voulez une image fade out vous pouvez faire ceci:

$("#upimg").hide('slow'); 

provoquera un élément avec id = « upimg » à disparaître lentement. Vous pouvez également utiliser fadeTo (opacity) pour obtenir un effet similaire.

L'appel AJAX peut être effectué avec un appel à charger.

$('#div').load('url', {}, callback); 

où sera rempli avec un élément « div » id = avec le résultat de l'appel url, le {} est en option et le rappel est une fonction que vous pouvez inclure à exécuter après la charge. La fonction de rappel peut être utilisée pour intégrer le nouveau contenu.

var clickHandler = function(){ 
    $("#upimg").hide('slow'); 

    $('#div').load('url', {}, callback); 

} 

var callback = function(){ 
    $('#div').show('slow'); 
}