Hi, I have implemented the functionality described here, which allows me to use more robust masking in Oracle APEX. It works great for page items, and I even figured out how to get it to work with elements in an Interactive Report. However, I'm having trouble getting it to work for elements in an Interactive Grid. Here is what I did for IR (code placed in “Execute when Page Loads”):
var im = new Inputmask("(999) 999-9999");
Array.from($("td[headers='PhoneColumn'"))
.forEach((element) =>
{
im.mask(element);
});
This works so long as the IR column that has the phone number has a Static ID of “PhoneColumn”. When I put this code for an IG, however, it doesn't work, which isn't necessarily surprising since an IG works completely different from an IR. So I tried this:
var im = new Inputmask("(999) 999-9999");
var model = apex.region("ig").widget().interactiveGrid("getViews", "grid").model;
var phoneKey = model.getFieldKey("PHONE");
model.forEach(function(row) {
//im.mask(row[phoneKey]);
console.log(row[phoneKey]);
});
I know I am able to access the actual data because when the console.log
executes, I get the values I would expect (various phone numbers). But when I uncomment the line im.mask(row[phoneKey]);
I get an error: Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '1234561234' is not a valid selector.
(I replaced the true phone number with a dummy one.)
My understanding of JavaScript (and web programming) is relatively weak. What I take away from this is that I'm basically not “selecting” the correct DOM element around which to apply the mask. Or, in other words, I can't apply the mask directly to the phone number values, the mask needs to be applied to a “container” around the values… or something like this, I think. And I'm not sure what APEX JS API to use to get the correct element, or if that's even possible.
In any case, I'm wondering how to get the mask to be applied to the phone numbers in this IG. It should be an editable IG, so the phone numbers could be entered, deleted, modified, etc. all with the mask being there.
Thank you!