Limit the number of multiplier contents

em

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

Gr

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

em

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

Gr

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

Gr

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

Forums

Limit the number of multiplier contents