Click here to Skip to main content
15,909,325 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello all,
Update
I have investigated several times until now - and it seems to be something with the following error: "TypeError: $(...).inputmask is not a function" by executing the line
$('[data-inputmask]').inputmask();
in the childpages with an UpdatePanel.
End Update

I have tried to make use of RobinHerbots InputMask and inherited the functionality in my ASPX's masterpage and it works nearly fine. But only on some of my inherited pages it works fine and shows the inputmask on hover and focus. On other ASPX-pages it does not show the inputmask on hover and focus. I have based my coding on this jsfiddle: https://jsfiddle.net/sotosamper1234/7vddjcwu/

I have googled a lot without finding the answer until now :-(

So my question is what do I have to do for making the inputmask visible on hover and on focus on all my inherited ASPX-pages inherited from SitePage.Master?

I am very new to JavaScript - so maybe there is something which for me is new to learn.

Thanks in advance,
Michael

What I have tried:

In my SitePage.Master I have called the RobinHerbots code by adding the following:
ASP.NET
<script type="text/javascript" src="Inputmask-5.x/jquery.js?v="+<%# DateTime.Now.ToString("ddMMyyyyhhmmss") %> ></script>
<script type="text/javascript" src="Inputmask-5.x/dist/jquery.inputmask.js?v="+<%# DateTime.Now.ToString("ddMMyyyyhhmmss") %> ></script>

In my pages I have called the input mask in this way:

ASP.NET
<asp:TextBox ID="txtAddADate" runat="server" Text="" Width="150px" data-inputmask="'alias': 'FreEconomic-datetime'"></asp:TextBox>

JavaScript
// start RobinHerbots inheritance...
var customInputmask = (function () {
    var config = {
        extendDefaults: {
            showMaskOnHover: true,
            showMaskOnFocus: true
        },
        extendDefinitions: {},
        extendAliases: {
            'FreEconomic-datetime': {
                alias: "datetime",
                inputFormat: "dd.mm.yyyy"
            },
            'FreEconomic-decimal': {
                alias: 'currency',
                prefix: '',
                radixPoint: ',',
                groupSeparator: '.',
                autoGroup: false,
            }
        }
    };

    var init = function () {
        Inputmask.extendDefaults(config.extendDefaults);
        Inputmask.extendDefinitions(config.extendDefinitions);
        Inputmask.extendAliases(config.extendAliases);
        $('[data-inputmask]').inputmask();
    };

    return {
        init: init
    };
}());
$(document).ready(function () {
    customInputmask.init();
}());
// end RobinHerbots inheritance
Posted
Updated 4-Feb-22 8:28am
v11
Comments
Richard MacCutchan 29-Jan-22 8:45am    
The chances of someone here having experience of this, and coming here to QA and finding your question, is not very high. You will probably get help quicker by asking the person who created the project.
MichaelEriksen 29-Jan-22 8:50am    
Thanks for writing this comment - I will have it in mind.

1 solution

The solution was to change the outer UpdatePanel to a normal Panel in C#. So after this change everything works fine.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900