Masked input fields

[crynos]

Can someone help me to add mask on form fields? I'm trying to use the MASKED INPUT PLUGIN (http://digitalbush.com/projects/masked-input-plugin/), but without success (I'm new in php and ajax stuff).

For example, how can i use a mask like "mask("(999) 999-9999");" on a

ramal: { title: 'Ramal', width: '10%' },

Here is my code till now:

<link href="themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="scripts/jtable/themes/metro/red/jtable.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
<script src="scripts/jtable/localization/jquery.jtable.ptbr.js" type="text/javascript" ></script>
<script src="scripts/jquery.maskedinput.min.js" type="text/javascript" ></script>   

<div id="PeopleTableContainer" style="width: 1200px;">
</div>
<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jTable
        $('#PeopleTableContainer').jtable({
            title: 'Lista de Contatos',
            paging: true,
            pageSize: 2,
            sorting: true,
            defaultSorting: 'setor ASC',
            actions: {
                listAction: 'AcaoContatos.php?action=list',
                createAction: 'AcaoContatos.php?action=create',
                updateAction: 'AcaoContatos.php?action=update',
                deleteAction: 'AcaoContatos.php?action=delete'
            },
            fields: {
                idcontatos: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },

                setor: {
                    title: 'Setor',
                    width: '10%'
                },

                spekx: {
                    title: 'Spekx',
                    width: '10%'
                },

                nome: {
                    title: 'Nome',
                    width: '20%'
                },

                ramal: {
                    title: 'Ramal',
                    width: '10%'
                },

                telefones: {
                    title: 'Telefones',
                    width: '10%'
                },

                cargo: {
                    title: 'Cargo',
                    width: '10%'
                },

                email: {
                    title: 'Email',
                    width: '20%'
                },

                teste: {
                    title: 'teste',
                    width: '20%'
                }

            }
            }
        });

        //Load person list from server
        $('#PeopleTableContainer').jtable('load');

    }
     jQuery(function($){

$("#teste").mask("99/99/9999");});

    );

</script>

[botoko]

Hi crynos,

Not sure if this is the correct way or not but I used the formCreated event and applied my mask to the field like so.

$('#active').jtable({
    title: 'Active',
    columnResizable: false,
    columnSelectable: false,
    paging: true,
    pageSize: 20,
    actions: {
        listAction: '/Get',
        deleteAction: '/Delete',
        updateAction: '/Update',
        createAction: '/Create'
    },
    fields: {
        test: {
            title: 'Test',
            width: '6%'
       }
    },
    formCreated: function (event, data) {
        data.form.find('[name=test]').mask('99-99-9999');
    }
});

http://jtable.org/ApiReference#event-formCreated

[crynos]

It didn't work for me, or i did something wrong...

Take a look:

$('#PeopleTableContainer').jtable({ title: 'Lista de Contatos', paging: true, pageSize: 500, sorting: true, defaultSorting: 'setor ASC', actions: { listAction: 'AcaoContatos.php?action=list', createAction: 'AcaoContatos.php?action=create', updateAction: 'AcaoContatos.php?action=update', deleteAction: 'AcaoContatos.php?action=delete' }, fields: { idcontatos: { key: true, create: false, edit: false, list: false },

                setor: {
                    title: 'Setor',
                    width: '10%'
                },

                spekx: {
                    title: 'Spekx',
                    width: '10%'
                },

                nome: {
                    title: 'Nome',
                    width: '20%'
                },

                ramal: {
                    title: 'Ramal',
                    width: '10%'
                },

                fixo: {
                    title: 'Fixo',
                    width: '10%'
                },

                formCreated: function (event, data) {
    data.form.find('[name=fixo]').mask('99-99-9999');
},

[botoko]

Could be a typo but put formCreated outside of fields:

$('#PeopleTableContainer').jtable({ title: 'Lista de Contatos', paging: true, pageSize: 500, sorting: true, defaultSorting: 'setor ASC', actions: { listAction: 'AcaoContatos.php?action=list', createAction: 'AcaoContatos.php?action=create', updateAction: 'AcaoContatos.php?action=update', deleteAction: 'AcaoContatos.php?action=delete' }, fields: { idcontatos: { key: true, create: false, edit: false, list: false }, setor: { title: 'Setor', width: '10%' },

spekx: { title: 'Spekx', width: '10%' },

nome: { title: 'Nome', width: '20%' },

ramal: { title: 'Ramal', width: '10%' },

fixo: { title: 'Fixo', width: '10%' }

}, formCreated: function (event, data) { data.form.find('[name=fixo]').mask('99-99-9999'); } });

[crynos]

This way, the grid doesn't load. And i can't see the error text on chrome debugg window.

        $('#PeopleTableContainer').jtable({
            title: 'Lista de Contatos da SUPCD',
            paging: true,
            pageSize: 500,
            sorting: true,
            defaultSorting: 'setor ASC',
            actions: {
                listAction: 'AcaoContatos.php?action=list',
                createAction: 'AcaoContatos.php?action=create',
                updateAction: 'AcaoContatos.php?action=update',
                deleteAction: 'AcaoContatos.php?action=delete'
            },
            fields: {
                ...
                                       }
            formCreated: function (event, data) 
      {data.form.find('[name=fixo]').mask('99-99-9999'); }
                                                     }); 

[crynos]

Found my error, but the mask still doesn't work .

$('#PeopleTableContainer').jtable({ title: 'Lista de Contatos da SUPCD', paging: true, pageSize: 500, sorting: true, defaultSorting: 'setor ASC', actions: { listAction: 'AcaoContatos.php?action=list', createAction: 'AcaoContatos.php?action=create', updateAction: 'AcaoContatos.php?action=update', deleteAction: 'AcaoContatos.php?action=delete' }, fields: { ... }, formCreated: function (event, data) {data.form.find('[name=fixo]').mask('99-99-9999'); } });

[botoko]

Your code looks good. Which masked input plugin are you using? I used the plugin by digitalBush

[crynos]

Ohhh man.. Very sorry... i've created a test.php and i got my index. php.

I did the changes on index.php but i forgot to uncoment the jquery.maskedinput.min.js line... lol

Works very well!!!! thank you ALOT!!!!

[crynos]

To mask the other fields, do i repeat the code:

formCreated: function (event, data) {data.form.find('[name=OTHER]').mask('(999)999-9999'); }

??

[botoko]

Glad it worked. For other other fields you can repeat the code. I formatted several fields.

    formCreated: function (event, data) {
        data.form.find('[name=Name]').autocomplete({
            source: newFormData.Names,
            minLength: 2
        });
        data.form.find('[name=ID]').mask('** ******-*');
        data.form.find('[name=Date]').datepicker();
    }