I have three <ul>'s which I want to merge and turn into a slider (I'm using the bxslider). It is something like...
<div class="wrapper">
<ul class="products-grid">
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
<ul class="products-grid">
<li>Product 4</li>
<li>Product 5</li>
<li>Product 6</li>
</ul>
<ul class="products-grid">
<li>Product 7</li>
<li>Product 8</li>
<li>Product 9</li>
</ul>
</div>
When I execute the below lines of jQuery in the chrome console, one line at a time, everything works perfectly.
jQuery('ul.products-grid').children('li').appendTo('ul.products-grid:first');
jQuery('ul.products-grid').not(':first').remove();
jQuery('ul.products-grid').bxSlider({
slideWidth: 200,
minSlides: 1,
maxSlides: 3,
slideMargin: 10
});
But when I try to execute the jQuery in the php/html template or in the chrome console all at once, only the first line executes and I'm left with...
<div class="wrapper">
<ul class="products-grid">
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
<li>Product 6</li>
<li>Product 7</li>
<li>Product 8</li>
<li>Product 9</li>
</ul>
<ul class="products-grid">
</ul>
<ul class="products-grid">
</ul>
</div>
Any idea how I can fix this? It seems to have something to do with the order in which the code is executing.
UPDATE
I noticed that in the console if I put the debugger on just before the code executes I get the below error after the
Uncaught ReferenceError: optionsPrice is not defined bundle.js 110
This must be causing some conflict. Here is the full function from bundle.js
reloadPrice: function() {
var calculatedPrice = 0;
var dispositionPrice = 0;
var includeTaxPrice = 0;
for (var option in this.config.selected) {
if (this.config.options[option]) {
for (var i=0; i < this.config.selected[option].length; i++) {
var prices = this.selectionPrice(option, this.config.selected[option][i]);
calculatedPrice += Number(prices[0]);
dispositionPrice += Number(prices[1]);
includeTaxPrice += Number(prices[2]);
}
}
}
var event = $(document).fire('bundle:reload-price', {
price: calculatedPrice,
priceInclTax: includeTaxPrice,
dispositionPrice: dispositionPrice,
bundle: this
});
if (!event.noReloadPrice) {
optionsPrice.specialTaxPrice = 'true'; // line 110
optionsPrice.changePrice('bundle', calculatedPrice);
optionsPrice.changePrice('nontaxable', dispositionPrice);
optionsPrice.changePrice('priceInclTax', includeTaxPrice);
optionsPrice.reload();
}
return calculatedPrice;
},
And within the
<script type="text/javascript">
//<![CDATA[
var bundle = new Product.Bundle({"options":{"98":{"selections":{"2307":{"qty":1,"customQty":"0","price":2.5,"priceInclTax":1.88,"priceExclTax":1.88,"priceValue":0,"priceType":"0","tierPrice":{"32000-7":{"price_id":"738","website_.......
The full stack trace show's my line of code beforehand.