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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -