I have a page and I want to show and refresh different ads on different locations. I'm getting response from PHP File successfully via AJAX but unable to append them to specific placements.
HTML CODE
<script>var ads = [];</script>
<div id="ad-728x90">fhhfgh</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row">
<div class="col-md-8">
<img class="img-responsive img-rounded" src="http://placehold.it/900x350" alt="">
</div>
<!-- /.col-md-8 -->
<div class="col-md-4">
<h1>Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary btn-lg" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Well -->
<div class="row">
<div class="col-lg-12">
<div class="well text-center">
This is a well that is a great spot for a business tagline or phone number for easy access!
</div>
<div id="ad-300x250" class="ads"></div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
Javascript / jQuery code
<script type="text/javascript">ads.push("728x90", "300x250");</script>
<script>
$(document).ready(function()
{
function loadAds()
{
$.post('ads.php', { adID: ads }, function (e) {
if (e.status == 'error')
{
$('.ads').each(function ()
{
$(this).remove();
});
}
else if (e.status == 'ok')
{
var data = e.data;
$.each(data, function (adID)
{
$('#ad-' + adID).find('.ads').html();
});
}
}, 'json');
}
loadAds();
});
</script>
JSON Response:
{"status":"ok","data":{"728x90":" \t \t\t \t\t\t
728x90 ads</p> \t\t</div> \t</div>","300x250":" \t \t\t \t\t\t
300x250 ads</p> \t\t</div> \t</div>"}}