javascript - Replacing content on click of a dynamically created button and an AJAX call -
i have dynamically created menu buttons when clicked fire ajax call php script, on success returned data displayed within specific div
using $("#imageframe").append(...)
. of buttons in menu created same way , have same function appending data 1 div
.
the issue have emptying div
before appending new content.
i have tried .empty()
- .html('')
- .empty().append(<html code>)
-.replacewith()
. have put these before ajax post , within success callback. best have achieved far emptying div, it's if once empty command run , successful script goes no further.
the click ajax function
<script type="text/javascript"> $(document).ready(function() {//ready func $(".albumname").click(function(){//click var albumid = this.id; $.post("includes/viewgallery.php",{albumid:albumid},function(data) {//json console.log(data); data = jquery.parsejson(data); $.each(data, function(key, val) {//iterate each data var albumname = val.albumname; var photoid = val.photoid; var photoname = val.photoname; var photourl = val.photourl; var thumbid = val.thumbid; var thumbname = val.thumbname; var thumbnailurl = val.thumbnailurl; var href = "http://217.199.187.191/mandingaarts.co.uk"; $('#imageframe').append('<a href="'+href+'' +photourl+ '" target="#lightbox"><img class="thumbnail" src="'+href+'' +thumbnailurl+ '"/></a>'); })//iterate each data });//json });;//click });//ready func
$(document).ready(function() {//ready func $(".albumname").click(function(){//click var albumid = this.id; $('#imageframe').empty(); $.post("includes/viewgallery.php",{albumid:albumid},function(data) {//json console.log(data); data = jquery.parsejson(data); $.each(data, function(key, val) {//iterate each data var albumname = val.albumname; var photoid = val.photoid; var photoname = val.photoname; var photourl = val.photourl; var thumbid = val.thumbid; var thumbname = val.thumbname; var thumbnailurl = val.thumbnailurl; var href = "http://217.199.187.191/mandingaarts.co.uk"; $('#imageframe').append('<a href="'+href+'' +photourl+ '" target="#lightbox"><img class="thumbnail" src="'+href+'' +thumbnailurl+ '"/></a>'); })//iterate each data });//json });//click });//ready func
a sample of working in snippet below:
//$(function(){ ... }); alternative document.ready(...) $(function(){ $("#imageframe li").on("click", function(){ $("#imageframe").empty(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="imageframe"> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </div>
Comments
Post a Comment