jQuery Functions not executing properly

Viewed 128

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

  • 's have been appended.

    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

  • 's there is a script tag that have. . .

    <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.

  • 2 Answers
    Related