jQuery numpad header title

Question

I'm using succesfully jQuery numpad (github page here) for numeric input related to a table with dynamic content. In each row there are 2 buttons (+ and -) that trigger numpad on click.

Since user can performs 2 kind of options (add or substract) I'm interested in adding a 'Add' or 'Substract' title on the head of the numpad to help user understand what action is actually performing.

An easy way to do so is modifying the default parameter template displayTpl adding <h2>Substract</h2> to default template prior to numpad initialization on page load.

$.fn.numpad.defaults.displayTpl = '<h2>Substract</h2><input type="text" class="form-control" />';
$('.numpad').numpad();  // initialise numpad

In this case every time users click on any button, the numpad is displayed with 'Substract' Title.

I have also tried to initialise the numpad in the 'on click' function:

$(".b_add" ).on( "click", function() {
    $.fn.numpad.defaults.displayTpl = '<h2>Add</h2><input type="text" class="form-control" />';
    $('.numpad').numpad();        // initialise numpad
    $related_input = $(this).parent('form').find('input[name="quantitat_add"]');
    $related_input.trigger( "click" );
});
$(".b_substract" ).on( "click", function() {
    $.fn.numpad.defaults.displayTpl = '<h2>Substract</h2><input type="text" class="form-control" />';
    $('.numpad').numpad();        // initialise numpad
    $related_input = $(this).parent('form').find('input[name="quantitat_substract"]');
    $related_input.trigger( "click" );
});

...but then it looks like a new instance of numpad is created on any click. It's ok with on click, but when users click several times on different '+' or '-' buttons of the table, several numpads are shown stacked. When you close the top one, you see the 2on one, and so on.

My questions:

-How can I have 2 different instances of numpad, created with different parameters (different titles), so that I can show the right one depending on the action add/substract requested by user?

-Alternatively ...is there a way I can change 'on-the-fly' the displayTpl option?

-Any other idea about how to solve it?

score 0 · Answer 1 · answered Mar 02 '18 at 16:22

I self answer the question, since I've found a simple nice way to solve it. It might be useful for someone else.

My solution:

I create once the numpad with a <h2> empty tag in displayTpl to be used as a title container. It's content will be dinamically modified depending on the action to perform:

$.fn.numpad.defaults.displayTpl = '<h2 id="numpad_title"></h2><input type="text" class="form-control" />';
$('.numpad').numpad();   // initialise numpad

$(".b_add" ).on( "click", function() {
    $("#numpad_title").html("Add");  // Set title to 'Add'
    $related_input = $(this).parent('form').find('input[name="quantitat_add"]');
    $related_input.trigger( "click" );
});
$(".b_substract" ).on( "click", function() {
    $("#numpad_title").html("Substract");    // Set title to 'Substract'     
    $related_input = $(this).parent('form').find('input[name="quantitat_substract"]');
    $related_input.trigger( "click" );
});

jQuery numpad header title

1 Answers1