I'm building a simple content app using PhoneGap + jquery mobile. My AdMob banner is placed at the bottom of each page. The ads appear correctly, but I need them to update/refresh as the user transitions back and forth between pages. Because I'm using jqm's ajax transitions, the pages are cached, and the scripts never reload. I also tried to find an option within the AdMob admin options to set the refresh frequency, but it doesn't appear to exist if I'm using the website embed code.

I tried this:

var admobscript = '<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"><\/script>';
$('#admobbanner').html(admobscript);

But no luck. It feels like an ugly solution anyway and I have a feeling I'm missing something much more elegant. Thanks in advance.

• jquery
• jquery-mobile
• cordova
• admob

If you read through the documentation they offer a few ways to fetch ads:

You could do something like:

_admob.fetchAd(document.getElementById('admobbanner'));

or you could store the ad in an iframe and refresh it like:

<iframe id="admob_ad" style="position: absolute; width: 320px; height: 48px; left: 0px; top: 0px;" noresize="noresize" frameborder="0" src="http://your_site.com/your_admob_web_page.html"></iframe>

<script>
   ...
   // refresh the IFRAME where you want to display a new ad
   var adIframeEl = document.getElementById("admob_ad");

   adIframeEl.src = adIframeEl.src;
   ...
</script>