1

I am stuk now with following:

I have two sliders: one with quantity, other with contractperiod. if quantity goes up, price per piece goes down. if contractperiod goes up, price per piece will go down more.

I have now this: http://jsfiddle.net/vBVkL/16/ Somehow I cant it work to change the price per piece when I use batches.

    qty = ui.value;  //-> this works

    qty = batches[ui.value - 1]; //-> this doesn't work

Could someone help me out with this? Thanks!

3
  • Can you check this? jsfiddle.net/vBVkL/22 let me know if it isnt what you need, you didnt put parseInt
    – abhijit
    Sep 11, 2012 at 15:25
  • @abhi - You can't parseInt a range. The var qty will contain a string from the batches array: "1-50", "51-250", "251-1000", "1000+"
    – Tony
    Sep 11, 2012 at 15:32
  • no am not doin parseInt on range Tony, its on the string, index of the array qty = batches[parseInt(ui.value) - 1]
    – abhijit
    Sep 11, 2012 at 15:34

1 Answer 1

1

Change the following line in your slider handlers:

$("input").val(prices[contract][qty - 1]);

to

$("input").val(prices[contract][ui.value - 1]);

The original code is using the variable qty which is a string. When you try to deduct 1 from that it results in "Not a Number" which cannot be used to index the batches array.

There is also a problem with your prices arrays. They only contain three values but your sliders can select a fourth, you need to add a value to the end of these arrays:

var prices = {
    'none': [10, 9, 8, ?],
    '12 months': [9, 8, 7, ?],
    '24 months': [8, 7, 6, ?],
    '36 months': [7, 6, 5, ?],
};

Updated fiddle

What I'm not sure about is why the sliders do not animate correctly when the page first loads.

EDIT:

The reason the slider was not working when the page loads is because of the values used to initialise your variables:

var contract = 'Geen'

When the slider is moved the code $("input").val(prices[contract][qty - 1]); tried to look up the value Geen in your contracts array and fails, so the function ends because of the error and the jQueryUI never finishes it's work to update the slider. It's not until you move the second slider that the variable is set correctly.

Setting the initial value of contract to "None" means the code will execute correctly and the slider will animate.

You also had a bug where changing the Contract period slider ignored the value of the quantity slider when setting the price. The line:

$("input").val(prices[contract][ui.value - 1]);

in "slider2" event handler should be changed to:

$("input").val(prices[contract][$("#slider1").slider("value") - 1]);

Have a look at the updated fiddle where it all now works.

3
  • +1 i think this should solve your errors, you missed a typecast and array was bound less than the range.
    – abhijit
    Sep 11, 2012 at 15:35
  • Thanks! Now I am getting somewhere. Indeed the first slider is not animated correctly. Does someone has an idea how come?
    – Jerry
    Sep 12, 2012 at 7:46
  • @user1640644 - I had another look at the code and worked out the slider problem. See my updated answer.
    – Tony
    Sep 12, 2012 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.