Forums

Limit the number of multiplier contents

emmexx 28 Jul, 2016
In this thread http://www.chronoengine.com/forums/posts/f5/t99923/how-to-set-end-count-in-multiplier-container.html?hilit=multiplier+button (locked) Bob answered with an example of js code.
Bob added:

Note that this allows for the fact that some lines may be deleted and new ones added.



I had already wrote a similar code but the problem is that when you get to the limit you hide the add button and there's no way to show it again.
I tried to add an event handler linked to the remove button (.multiplier-remove-button) but it doesn't fire. I suppose the problem is that the button is destroyed before my handler runs.

Can somebody or Bob :-) explain to me how he could manage to make his code work?

Thank you
maxx
GreyHead 28 Jul, 2016
Hi maxx,

The example that you linked to handles that case - if a multiplier is deleted then the Add button will show again. Basically it counts the multipliers and if the count is less than the limit shows the Add button, if it's at the limit it hides the Add button.

Bob
emmexx 28 Jul, 2016
Sorry Bob but it can't work.
Your calculate() function runs only when the you click on the add button, as per code you wrote in that post.
If you want to run calculate() when you remove a multiplier content there must be an event handler for the .multiplier-remove-button elements.

I solved the problem by adding the following line to jQuery(document).ready():
jQuery('.multiplier-container').on('click', '.multiplier-remove-button', calculate);

Previously I didn't consider that the remove buttons don't exist when the document is ready. Using delegation it works.

Thank you
maxx
GreyHead 28 Jul, 2016
Answer
Hi Maxx,

Apologies, you are quite right. I went back and found the 'final' version of that code which did do both:
 . . .
  jQ('#garment_multiplier .multiplier-add-button').click(delayUpdate);
  jQ('#garment_multiplier').on('click', '.multiplier-remove-button', delayUpdate );
  jQ('#garment_multiplier').on('change', '.update', calculateGarmentPrice );
  updateGarments();

  /**
  This function delays the execution of the calculate function
  to allow time for the multiplier code to add the new item.
  */
  function delayUpdate(){
    setTimeout(updateGarments, 500);
  }

  function updateGarments(){
    var i, quantity, max_quantity, g_id, diff, new_g_id_list;

    max_quantity = 100;

    /** There is a hidden input with the class g_id
    that has the item number set as its value.
    We find all the current values here */
    g_id = jQ('#garment_multiplier :input').filter('.g_id');
    new_g_id_list = g_id.map(
      function(){
        return this.value;
      }
    ).get();
. . .

Bob
GreyHead 28 Jul, 2016
Hi Maxx,

Apologies, you are quite right. I went back and found the 'final' version of that code which did do both:
 . . .
  jQ('#garment_multiplier .multiplier-add-button').click(delayUpdate);
  jQ('#garment_multiplier').on('click', '.multiplier-remove-button', delayUpdate );
  jQ('#garment_multiplier').on('change', '.update', calculateGarmentPrice );
  updateGarments();

  /**
  This function delays the execution of the calculate function
  to allow time for the multiplier code to add the new item.
  */
  function delayUpdate(){
    setTimeout(updateGarments, 500);
  }

  function updateGarments(){
    var i, quantity, max_quantity, g_id, diff, new_g_id_list;

    max_quantity = 100;

    /** There is a hidden input with the class g_id
    that has the item number set as its value.
    We find all the current values here */
    g_id = jQ('#garment_multiplier :input').filter('.g_id');
    new_g_id_list = g_id.map(
      function(){
        return this.value;
      }
    ).get();
. . .

Bob
This topic is locked and no more replies can be posted.