Geek Answers Handbook

JQuery functions do not execute properly

I have three <ul>that I want to combine and turn into a slider (I use bxslider ). This 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 bottom lines of jQuery in the chrome console, one line at a time, everything works fine.

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 jQuery in the php / html template or in the Chrome console at the same time, only the first line is executed, and I stay 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? This seems to be related to the code execution order.

UPDATE

I noticed that in the console, if I put a debugger just before the code runs, I get the following error after adding

.
Uncaught ReferenceError: optionsPrice is not defined    bundle.js 110

This should cause a 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 in

there is a script tag that is.,
<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_.......

.

+4
2

jquery jquery ready:

$(function() {
  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
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <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>
  </body>

</html>
Hide result
0

HTML

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

CSS

    body{color:#000;}
li {
  font-size: 18px;
  line-height: 50px;
}
.wrapper{
  height: 200px;
  background: #d8d8d8;
}

JS

    jQuery('ul.products-grid').children('li').appendTo('.wrapper ul.products-grid:first'); 
jQuery('.wrapper ul.products-grid').not(':first').remove(); 
jQuery('ul.products-grid').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 3,
    slideMargin: 10
});

, codepen. http://codepen.io/prashen/pen/pyjRvo

0

More articles:


All Articles