And add it to wpDataTables settings/Custom JS and CSS/Custom JS field.
It also didn't work because you didn't find the correct ID of the input in the modal. There's a data atribute in the table data-wpdatatable_id which shows the ID of the table. At the moment, the ID of the table is generated starting from "1", and it is oddly incremented, so there are multiple different IDs on a page. This means that if you have 3 tables on a page, they would be table_1, table_3 and table_5.
What you did was add the class for the column, not the input field in the edit modal.
The scripts you're including for the input mask should be in the header, not in the footer.
I certainly thank you for this suggestion, and we will consider adding it as a column type in the plugin.
I really appreciate you looking into this with your developers. However, it didn't work. My workaround was to add the code below to the code block of the Divi theme for phone number and date formatting, including placeholders for each.
It's not perfect but it suffices for now until I learn to be more proficient at writing JS code. What this code doesn't do (which I would like for it to do) is to format as the user enters numbers. No further action is required on your part.
My custom JS is not working.
(".wp-phone").inputmask({"mask": "(999) 999-9999"});
Steps to reproduce:
1) Added wp-phone class to the Phone column in the Beneficiaries table, ID 9.
2) Added above JS in Settings.
3) Added a new entry to the Beneficiaries table but the Phone input field is not masked as expected.
Thanks.
Hi again Perla
I'm not sure about this, so it has been forwarded to one of our developers for testing.
I'll get back to you as soon as I get a response from him.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello again Perla.
You should write the script like this:
jQuery(window).load(function(){jQuery("#table_1_phone").inputmask({"mask":"(999) 999-9999"});
});
And add it to wpDataTables settings/Custom JS and CSS/Custom JS field.
It also didn't work because you didn't find the correct ID of the input in the modal. There's a data atribute in the table data-wpdatatable_id which shows the ID of the table. At the moment, the ID of the table is generated starting from "1", and it is oddly incremented, so there are multiple different IDs on a page. This means that if you have 3 tables on a page, they would be table_1, table_3 and table_5.
What you did was add the class for the column, not the input field in the edit modal.
The scripts you're including for the input mask should be in the header, not in the footer.
I certainly thank you for this suggestion, and we will consider adding it as a column type in the plugin.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Aleksandar,
I really appreciate you looking into this with your developers. However, it didn't work. My workaround was to add the code below to the code block of the Divi theme for phone number and date formatting, including placeholders for each.
It's not perfect but it suffices for now until I learn to be more proficient at writing JS code. What this code doesn't do (which I would like for it to do) is to format as the user enters numbers. No further action is required on your part.
<script>
jQuery(document).ready(function($) {
$("input[data-key='phone']").attr({ placeholder : '(xxx) xxx-xxxx' });
$("input[data-key='phone']").keyup(function() {
$(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1) $2-$3"));
});
});
</script>
<script>
jQuery(document).ready(function($) {
$("input[data-key='dateofbirth']").attr({ placeholder : 'xx/xx/xxxx' });
$("input[data-key='dateofbirth']").keyup(function() {
$(this).val($(this).val().replace(/^(\d{2})(\d{2})(\d)+$/, "$1/$2/$3"));
});
});
</script>
Thanks!
Thank you for your feedback, Perla
I will forward this to our development team for review.
It really is a good suggestion, and I hope it will be added to the plugin soon.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi again Perla.
We're not sure why it's not working on your end. You can see that it works on our end (see attachment).
In file wp-content/plugins/wpdatatables/source/class.wpdatatable.php around line 2522 you will find this:
wp_enqueue_script('wdt-jquery-mask-money', WDT_JS_PATH . 'maskmoney/jquery.maskMoney.js', array('jquery'), WDT_CURRENT_VERSION, true);Below that, please enter this:
wp_enqueue_script('wdt-jquery-inputmask', 'https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js', array('jquery'), WDT_CURRENT_VERSION, false);Then in Custom JS field (wpDataTables settings/custom JS and CSS) add this:
jQuery(window).load(function(){jQuery("#table_1_phone").inputmask({"mask":"(999) 999-9999"});
});
And then create a table with a column which is named "phone", and it should work.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thanks, Aleksandar.
Unfortunately, it didn't work. Since I already have a workaround, I'll just keep what i have.
Thanks.
Alright, Perla
If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables