jquery append DoubleClick for Publishers (DFP) ads in one div

I am using DoubleClick for Publishers (DFP) ads, but when I using jquery append, loading DoubleClick for Publishers (DFP) ads in one div, the ads block is empty. How to do it so that the ads could show nomorlly?

Demo link

Thanks.

<?php header("Content-type: text/html; charset=utf-8"); ?>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<?php if(!$_POST['number']){ ?>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type='text/javascript'>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    (function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') + 
    '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    })();
</script>
<script type='text/javascript'>
    googletag.cmd.push(function() {
        googletag.pubads().enableAsyncRendering();
        googletag.defineSlot('/17177879/ads_300_250_white_right', [300, 250], 'div-gpt-ad-1-1').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $(".bnews").live('click',function(){
        var nnum = $(this).attr('rel');
        googletag.cmd.push(function() {
            googletag.pubads().enableAsyncRendering();
            googletag.defineSlot('/17177879/ads_300_250_white_right', [300, 250], 'div-gpt-ad-' + nnum + '-1').addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
        $(this).css('display','none');
        $.ajax({
            url: "1.php", 
            dataType: "html",
            type: 'POST',
            data: 'number=' + nnum,
            success: function(data){ 
                $("#cc-wrap").append(data); 
            }               
        });
    });
});
</script>
<h1 class="bnews" rel="2">Append to div</h1>
<!-- some content here -->
<!-- ads_300_250_white_right -->
<div id='div-gpt-ad-1-1' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1-1'); });
</script>
<div id="cc-wrap"></div>
<?php }else{ ?>
<h1 class="bnews" rel="<?php echo ($_POST['number']+1); ?>">Append to div</h1>
<!-- some content here -->
<!-- ads_300_250_white_right -->
<div id='div-gpt-ad-<?php echo $_POST["number"]; ?>-1' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-<?php echo $_POST["number"]; ?>-1'); });
</script>
<?php } ?>

Solution

You need to remove the two calls to the googletag.pubads().enableSingleRequest() function... it looks like this is stopping you from requesting more ads after you have appended. When I commented out that piece of code in the two places you are using it the script started working... it still seems a little bit broken though.

This is your example with the line commented so that it works:

<?php header("Content-type: text/html; charset=utf-8"); ?>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<?php if(!$_POST['number']){ ?>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type='text/javascript'>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    (function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') +
    '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    })();
</script>
<script type='text/javascript'>
    googletag.cmd.push(function() {
        googletag.pubads().enableAsyncRendering();
        googletag.defineSlot('/17177879/ads_300_250_white_right', [300, 250], 'div-gpt-ad-1-1').addService(googletag.pubads());
        //googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $(".bnews").live('click',function(){
        var nnum = $(this).attr('rel');
        googletag.cmd.push(function() {
            googletag.pubads().enableAsyncRendering();
            googletag.defineSlot('/17177879/ads_300_250_white_right', [300, 250], 'div-gpt-ad-' + nnum + '-1').addService(googletag.pubads());
            //googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
        $(this).css('display','none');
        $.ajax({
            url: "1.php",
            dataType: "html",
            type: 'POST',
            data: 'number=' + nnum,
            success: function(data){
                $("#cc-wrap").append(data);
            }
        });
    });
});
</script>
<h1 class="bnews" rel="2">Append to div</h1>
<!-- some content here -->
<!-- ads_300_250_white_right -->
<div id='div-gpt-ad-1-1' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1-1'); });
</script>
<div id="cc-wrap"></div>
<?php }else{ ?>
<h1 class="bnews" rel="<?php echo ($_POST['number']+1); ?>">Append to div</h1>
<!-- some content here -->
<!-- ads_300_250_white_right -->
<div id='div-gpt-ad-<?php echo $_POST["number"]; ?>-1' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-<?php echo $_POST["number"]; ?>-1'); });
</script>
<?php } ?>

Let me know if you have any more questions.