[Custom Input Masks] Error - Cannot read the property 'value' of undefined

Me and my team are creating a web application in Version 11.7.1. There is more than one situation that we need to refresh a web block that uses the mask number with the option KeepMask = False. After the refresh, the following piece of code will be executed.

osAjaxBackend.BindAfterSubmit(function () {

$(elementID).inputmask('remove');

if (maskOpts.radixPoint !== "" && !(typeof $(elementID)[0].value === 'undefined') && $(elementID)[0].value.indexOf(".") !== -1)

$(elementID)[0].value = $(elementID)[0].value.replace(".", Inputmask.escapeRegex.call(this, maskOpts.radixPoint));

$(elementID).inputmask(mask, maskOpts);

    });

When you are trying to access the $(elementID)[0].value the following error occurs.

This issue happens due to $(elementID)[0] is 'undefined', so it is not possible to access to its value. A possible solution could be to add a new condition that check if the $(elementID)[0] is defined. Therefore it will be needed to add a new code line. The code would look like this:

osAjaxBackend.BindAfterSubmit(function () {

$(elementID).inputmask('remove');

if(!(typeof $(elementID)[0] === 'undefined')){

if (maskOpts.radixPoint !== "" && !(typeof $(elementID)[0].value === 'undefined') && $(elementID)[0].value.indexOf(".") !== -1)

$(elementID)[0].value = $(elementID)[0].value.replace(".", Inputmask.escapeRegex.call(this, maskOpts.radixPoint));

$(elementID).inputmask(mask, maskOpts);

}

});

Note: this issue only has arisen after the last version (3.0.10) was released!

Hi Henrique,

I would debug the value of ElementID, I am pretty sure it's undefined.

$(elementID)

Regards,

Daniel

Hi Henrique,

Daniël is right for some reason the ElementId you are passing in InputId is undefined. Can you show us what are you doing? The best would be replicate the problem in a simple module and share it here.

Regards,

Marcelo

Hi Henrique -  I was having the same issue and it only happened on certain refreshes.  It took me a few more hours than I would like to admit but finally figured it out.  I had refreshes on the mask that were in an IF statement.  I moved them out of the if and instead used the IF logic to display the elements.  Don't forget to change your ajax refreshes to refresh the IF statements.  And FINALLY it resolved the issue.  

Hope this helps

Cheers

Lisa

I have the same problem if I want the input in an IF but Lisa's fix does not work for me. My solution so far was to use the "hidden" class to keep my input in the DOM and hide it

Does someone has a better Idea how to do this? 

Edit: I ended up using Henrique Cavaleiro solution.

Same problem here with a dinamic list of fields.

Solution :

SyntaxEditor Code Snippet

 osAjaxBackend.BindBeforeSubmit(function () {
            if($( elementID ).length) {
                $(elementID).inputmask('remove');
            }            
        });

SyntaxEditor Code Snippet

osAjaxBackend.BindAfterSubmit(function () {
            if($( elementID ).length) {
                $(elementID).inputmask('remove');
                if (maskOpts.radixPoint !== "" && !(typeof $(elementID)[0].value === 'undefined') && $(elementID)[0].value.indexOf(".") !== -1)
                        $(elementID)[0].value = $(elementID)[0].value.replace(".", Inputmask.escapeRegex.call(this, maskOpts.radixPoint));
                $(elementID).inputmask(mask, maskOpts);
            }
        });