Ajout de la fonction jquery charger plusieurs contenus

Question

J'ai besoin de suggestions parce que je deviens fou avec un petit problème à propos de l'insertion de données dans une page html en utilisant la fonction jquery et la requête ajax.

Je possède ce bloc HTML avec un contenu différent sous les éléments ul ... dans <ul class="pre-wed-list "> il y a quelques images que j'insérer directement dans le code html, à la place dans <ul class="pre-wed-list" id="rudr_instafeed"></ul> i besoin de photos que je prends de mon flux de instagram (il travaille déjà) avec une requête ajax rapportée ci-dessous. Ici, nous avons le code html

<div class="container"> 
       <div class="row"> 

        <!-- Nav Tabs --> 
        <ul class="nav nav-tabs" role="tablist"> 
         <li role="presentation" class="active"><a href="#pre-wed" aria-controls="pre-wed" role="tab" data-toggle="tab">Engagement</a></li> 
         <li role="presentation"><a href="#rudr" aria-controls="#rudr" role="tab" data-toggle="tab">#blabla</a></li> 
        </ul><!-- .nav .nav-tabs --> 

        <!-- Tab Panes --> 
        <div class="tab-content"> 
         <div role="tabpanel" id="pre-wed" class="tab-pane active fade in tab-content-each"> 
          <ul class="pre-wed-list "> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 
           <li><a href="images/blabla/blabla1.jpg" data-lightbox="pre-wed"><img src='images/blabla/blabla1.jpg' alt="blabla" /></a></li> 


          </ul> 
         </div> 
         <div role="tabpanel" id="rudr" class="tab-pane fade tab-content-each"></div> 
         <ul class="pre-wed-list" id="rudr_instafeed"></ul> 
         </div> 
       </div><!-- .row --> 
      </div><!-- .container --> 
     </section><!-- .instagram-feed --> 

Ici, nous avons demande ajax:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var token = '44386xx.e90c004.xxxxxxxxxxxxx', 
    num_photos = 10; 

$.ajax({ 
    url: 'https://api.instagram.com/v1/users/self/media/recent', 
    dataType: 'jsonp', 
    type: 'GET', 
    data: {access_token: token, count: num_photos}, 
    success: function(data){ 
     console.log(data); 
     for(x in data.data){ 
      $("#rudr_instafeed").append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>'); 
     } 
    }, 
    error: function(data){ 
     console.log(data); 
    } 
}); 
}); 

    </script> 

demande Ajax fonctionne correctement, le contenu que j'ai besoin est chargé, mais le problème est que la fonction append jquery

$("#rudr_instafeed").append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');

charger correctement le contenu des photos à partir du flux instagram, mais pas seulement dans #rudr_instafee (que j'ai besoin d'avoir), mais même sous mon im âges bloquent en <ul class="pre-wed-list "> </ul>.

Je demande à la communauté une aide à résoudre, je suis très peur pour elle, je ne parviens pas à le résoudre :(.

Merci. Cordialement

Answer 1

ok i ont résolu heureusement, problème était une mauvaise position pour la fermeture, sous le code html corrigé

<div role="tabpanel" id="rudr" class="tab-pane fade tab-content-each"> 
<ul class="pre-wed-list" id="rudr_instafeed"></ul> 
</div> 

parfois trop de travail et la fatigue peut faire une blague. Merci pour l'instant.