html - Append jquery function load multiple content -
i need suggenstions because i'm going crazy little problem insert data in html page using append jquery function , ajax request.
i have html block different content under ul elements...in <ul class="pre-wed-list "> there images insert directly in html code, instead <ul class="pre-wed-list" id="rudr_instafeed"></ul> need photos catch instagram stream ( working ) ajax request reported below. here have html code
<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 --> here have ajax request:
<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> ajax request works correctly, content need loaded problem append jquery function
$("#rudr_instafeed").append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');
charge correctly content photos instagram stream, not in #rudr_instafee ( need have ) under images block in <ul class="pre-wed-list "> </ul> .
i ask community helps solve it, i'm afraid it, don't succeed solve :(.
thank you. regards
ok have solved fortunately, problem wrong position closing, below html code corrected
<div role="tabpanel" id="rudr" class="tab-pane fade tab-content-each"> <ul class="pre-wed-list" id="rudr_instafeed"></ul> </div> sometimes work , tiredness can make joke. thank now.
wiki
Comments
Post a Comment