Chargement De Contenu Via Ajax

Ok, donc je suis assez nouveau à l'ajax et le chargement de contenu externe et apprécierais toute réflexion à mon problème.

J'ai actuellement un div caché qui est vide où le contenu ajax devrait se charger en une fois qu'un lien est cliqué.

<div id="#ajax-wrap"></div>

J'ai actuellement une liste de liens qui ont tous la même classe et j'aimerais avoir lorsque l'on clique dessus, la vierge div de faire un glisser de la bascule et puis les charger dans le contenu de la page vers laquelle le lien a été pour.

Lien:

<a href="always a different url" class="home-right"></a>

Actuel jQuery:

$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});

Être comme je suis nouveau à l'Ajax et le chargement du contenu externe, je voudrais savoir comment charger le contenu de la page du lien que la maison de la #content tag. Donc en gros, je voudrais un .home-right lien, #ajax-wrap glisse bascule, puis l'Ajax serait d'extraire le contenu de la page liée (qui est toujours aléatoire lien) et c'est #content div, de la mettre le contenu dans #ajax-wrap.

Merci d'avance pour toute aide, les gars!

InformationsquelleAutor user975876 | 2013-05-17
  1. 3

    Vous souhaitez définir le ajax pour les liens. Exigences:

    1. L'écriture d'un gestionnaire de liens.
    2. Nous devons annuler le comportement par défaut du navigateur lorsque quelqu'un clique sur un lien (qui redirige vers la page).
    3. Suppression des anciennes données ajax reçu de serveur et de faire de la #ajax-wrap frais.
    4. Charge de la télécommande à la page via ajax et le configurer pour #ajax-wrap.
    5. Maintenant, faites-le glisser vers le bas.
    //Document Ready
$(function () {

    //attaching click handler to links
    $("a.home-right").click(function (e) {
        //cancel the default behaviour
        e.preventDefault();

        //get the address of the link
        var href = $(this).attr('href');

        //getting the desired element for working with it later
        var $wrap = $('#ajax-wrap');

        $wrap
            //removing old data
            .html('')

            //slide it up
            .slideUp()

            //load the remote page
            .load(href + ' #content', function () {
                //now slide it down
                $wrap.slideDown();
            });
    });

});
    • Vous rock! C'est précisément ce dont j'avais besoin. Je vous remercie beaucoup.
    • Votre accueil. Si cela a aidé, vous pouvez l'accepter.
    • y aurait-il un moyen d'avoir un bouton de fermeture une fois que le contenu est affiché? Par exemple, si je voulais faire de l'élément #fermer-bouton en mesure de fermer le contenu qui a été faites glisser vers le bas, comment aurais-je l'intégrer dans ce code?
    InformationsquelleAutor
  2. 1

    Vous pouvez simplement utiliser la ajax comme ceci:

    $("a.home-right").click(function () {
  $.ajax({
    type: "get",
    url: "YOUR URL HERE",
    success: function(data){
           $('#ajax-wrap').html(data);
          $('#ajax-wrap').slideToggle();
    },
    error: function(){
      alert("An error occured");
    }
  });
});
    • Vous n'êtes pas le réglage de l'HTML dans #ajax-wrap?
    • Pardonnez-moi, mais que voulez-vous dire par la mise en au HTML dans #ajax-wrap?
    • il faut mettre de #content de l'ajax en réponse #ajax-wrap
    • #content il est placé à l'intérieur de la #ajax-wrap? par exemple, <div id="#ajax-wrap"> <div id="content"></div> </div>
    • J'ai mis à jour le code
    InformationsquelleAutor Lian
  3. 0

    essayez ceci:

    $(function(){
    $("a.home-right").click(function () {
          $('#ajax-wrap').slideUp();                                  
           var url = $(this).attr("href")                                 
          $.ajax({
            type: "get",
            url: url,
            success: function(msg){
                $('#ajax-wrap').html(msg)        
                $('#ajax-wrap').slideDown();
            },
            error: function(){
              alert("An error occured");
            }
      });
    })

})
    InformationsquelleAutor Binhvi
  4. 0

    Utilisation obtenez de l':

    //Inside click handler
$.get('url_that_returns_data')
  .done(function(response){
    var $response = $(response);
    $('#ajax-wrap').html($response.find('#content')).slideToggle();
  });
    • Ce ne sera pas slideToggle?
    • je pense que tu veux dire $('#ajax-wrap').load('the_url_that_returns_data #content').slideToggle()
    • ah ok, je n'ai pas compris la question.
    InformationsquelleAutor juanpastas