Problems with dynamic content in jquery Booklet (builtbywill)
The problems I'm having are several-fold. Firstly, this is only working in firefox at the moment. Chrome doesn't even give me an error and doesn't give me the alert in 'after'. Secondly, and this is the main problem, the code below is working to a degree; it gets as far as the first call on 'after' but I think I need to refresh the booklet somehow to realise that there are new divs in there.
Basically what I'm asking is can someone tell me why it isn't working in chrome and is there a way to refresh booklet so that it realises that there are two new divs?
If you need more code from me please let me know.
Thanks in advance
The jquery code
$(function() {
$('#booklet').booklet({
height: 600,
width: 960,
manual: false,
pageNumbers: false,
pagePadding: 0,
after: function(opts){
var btn = $('#next-page').attr('className');
//alert(btn);
$.get('../../ajax/getAjaxBrand/'+btn, function(data) {
alert(data);
$('#next-page').replaceWith(data);
});
}
});
});
The returned HTML
<div id="pager">
<div id="twotap-left">
<div class="twotap-image" style="background: url(http://localhost:8888/turner/catalogue/images/brand/single-page/) no-repeat;">
<img src="http://localhost:8888/turner/catalogue//images/fade-left.png" />
</div>
<div class="twotap-stuff">
<div class="twotap-title">
<h1 id="twotaph1" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">HOLLYWOOD JUSTICE</h1>
</div>
<div class="twotap-details">
<h3 id="dps-det" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">6 x 30MINUTE EPISODES</h3>
</div>
<div class="twotap-copy">
<p>Hollywood Justice takes an in-depth look at Hollywood's famously challenged. Each episode delves into the lives, details and history of Hollywood celebrities who’ve had brushes with the law. The show profiles the stars who've gone from fame to infamy, and sometimes back again, with a focus on their antics both in and out of the courtroom.</p>
</div>
<div class="twotap-clogo">
<img src=http://localhost:8888/turner/catalogue/images/logos/tru.png height='49px' />
</div>
</div>
</div>
</div>
<div id="pager">
<div id="two-tap-pf">
<img src="http://localhost:8888/turner/catalogue//images/fold-tra.png" />
</div>
<div id="twotap-right">
<div class="twotap-image" style="background: url(http://localhost:8888/turner/catalogue/images/brand/single-page/TRU-hot-purs.jpg) no-repeat;">
<div id="twotap-turner">
<img src="<?php echo base_url();?>/images/turner-small-b.png" />
</div>
</div>
<div class="twotap-stuff">
<div class="twotap-title">
<h1 id="twotaph1" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">HOT PURSUIT</h1>
</div>
<div class="twotap-details">
<h3 id="dps-det" class="typeface-js" style="font-family:TradeGothic;font-weight:bold;">.47 x 30 MINUTE EPISODES</h3>
</div>
<div class="twotap-copy">
<p>From high-speed chases to dangerous crashes, this adrenaline-pumping series shows the dangers our law enforcement professionals face every day. Each episode focuses on a different situation – from raging drunks to lawless kids, from female fugitives to the worst escape attempts of all time, this series shows cops 开发者_Go百科confronting all the most intense and hilarious challenges the country’s highways have to offer. Featuring the most amazing footage ever captured, much of it taken from dashboard-mounted cameras in the police vehicles themselves, each half-hour episode is a wild ride.</p>
</div>
<div class="twotap-clogo">
<img src=http://localhost:8888/turner/catalogue/images/logos/tru.png height='49px' />
</div>
</div>
</div>
</div>
<div id="next-page" class="house_of_clues">
</div>
That should work based on what I am using (works fine cross-browser):
$('.book').booklet({
autoCenter: true,
covers: true,
manual: false,
pageNumbers: false,
pagePadding: 0,
width: 840,
height: 570,
closed: true,
overlays: false,
prev: $('.nav a.prev'),
next: $('.nav a.next')
});
My booklet seems to work - not tried with callback for before()
or after()
, but I too want to know about refreshing the booklet to allow for dynamic AJAX content to be added...
精彩评论