className no longer working in the new Editor release

rf1234

Hi Allan,

I had implemented masking of phone numbers using Editor 1.5.6 using className and it worked fine. I noticed today that with Editor 1.6 it is no longer working. I tried it with id and it worked again. Here is the code including the code for the masking which now is doubled unfortunately because I still need to keep the className for scope that is outside of DataTables.

I get no error message by the way. I simply don't see the masking any longer and cannot enter anything into the phone number fields.

Kind regards
Roland

var userPhoneEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'actions.php?action=tblUserPhone',
            data: function ( d ) {
                var selected = userTable.row( {selected: true} ); 
                if (selected.any()) {
                    d.user = selected.data().user.id;
                }
            }
        },
        table: "#tblUserPhone",
        fields: [ {
                label: "Phone Type:",
                name:  "phone.type",
                type:  "select",
                options: [
                    { label: "Work", value: "work" },
                    { label: "Mobile", value: "mobile" },
                    { label: "Alternate", value: "alternate" }
                ]
            }, {
                label: "Country Code:",
                name:  "phone.countrycode",
                //className: "phoneCountryCode"  // id: ... can also be set
                id: "tblPhoneCountryCode"
            }, {
                label: "Area Code:",
                name:  "phone.areacode",
                //className: "phoneAreaCode"
                id: "tblPhoneAreaCode"
            }, {
                label: "Number:",
                name:  "phone.phone",
                //className: "phonePhoneNumber"
                id: "tblPhonePhoneNumber"
            }
        ]        
    } );
    
    userPhoneEditor
            .on('open', function() {
                maskPhone();
    }); 

//duplication with id's due to dt bug
function maskPhone() {
    $.myMask.definitions['b'] = "[0-9 ]";
    $.myMask.definitions['c'] = "[0-9-xX ]";
    $.myMask.definitions['8'] = "[1-9]";
    $(".phoneCountryCode").myMask("+8?bb",{placeholder:"_"});
    $(".phoneAreaCode").myMask("9?bbbb",{placeholder:"_"});
    $(".phonePhoneNumber").myMask("89c?cccccccccccc",{placeholder:"_"});
    $("#tblPhoneCountryCode").myMask("+8?bb",{placeholder:"_"});
    $("#tblPhoneAreaCode").myMask("9?bbbb",{placeholder:"_"});
    $("#tblPhonePhoneNumber").myMask("89c?cccccccccccc",{placeholder:"_"});    
    //$("#date").myMask("9b.9b.99bb",{placeholder:"DD.MM.YYYY"});
}
   

allan

If you comment that fields.className option back in, and then right click on the field in the editor form and find the containing div for the field in the browser's inspector. Is the class there?

Thanks,
Allan

rf1234

Hi this is what it looks like with className commented back in and id commented out. No class.

<input id="DTE_Field_phone-countrycode" 
type="text" class="form-control">

This is the posted version. The right id shows up.

<input id="tblPhoneCountryCode" 
type="text" class="form-control">

allan

It should appear on the div element a few up from the input. Attached is a screenshot showing myTestClass being applied to the field.

Allan

rf1234

Sorry, but it isn't there either

<div data-dte-e="input-control" 
class="DTE_Field_InputControl" style="display: block;">
<input id="DTE_Field_phone-countrycode"
type="text" class="form-control"></div>

And a little more:

<div class="DTE_Field DTE_Field_Type_text
DTE_Field_Name_phone.countrycode phoneCountryCode">
<label data-dte-e="label" class="col-lg-4 control-label" for="DTE_Field_phone.countrycode">Country Code:
<div data-dte-e="msg-label" class="DTE_Label_Info"></div>
</label><div data-dte-e="input" class="col-lg-8 controls">
<div data-dte-e="input-control" 
class="DTE_Field_InputControl" style="display: block;">
<input id="DTE_Field_phone-countrycode" 
type="text" class="form-control"></div>
<div data-dte-e="multi-value" 
class="well well-sm multi-value"
style="display: none;">Multiple values
<span data-dte-e="multi-info" class="small" 
style="display: none;">The selected items contain
different values for this input. To edit and set
all items for this input to the same value,
click or tap here, otherwise they will retain
 their individual values.</span>
</div><div data-dte-e="msg-multi"
class="well well-sm multi-restore"
style="display: none;">Undo changes</div>
<div data-dte-e="msg-error" class="help-block"
style="display: none;"></div>
<div data-dte-e="msg-message" 
class="help-block" style="display: none;">
</div><div data-dte-e="msg-info" class="help-block">
</div></div></div>

allan

It's in the first line of the second block of code there:

<div class="DTE_Field DTE_Field_Type_text DTE_Field_Name_phone.countrycode phoneCountryCode">

I think the issue is that the selector here:

$(".phoneCountryCode").myMask("+8?bb",{placeholder:"_"});

is not correct. It should perhaps be:

$(".phoneCountryCode input").myMask("+8?bb",{placeholder:"_"});

The fields.className option should never have been applied to the input element directly. It could have been with the attr option.

Allan

rf1234

Why should the className option never have been applied to the input element directly? You are doing it with the id option yourself! (see above)
Now it is inconsistent: In case I use "className" I need to code this:

$(".phoneCountryCode input").myMask("+8?bb",{placeholder:"_"});

If I use "id" I need to code this:

$("#tblPhoneCountryCode").myMask("+8?bb",{placeholder:"_"});

Because the id option attaches the id to the input element directly whereas className attaches the class to the containing div. In addition my preferred solution (attaching the class to the input element) worked in the previous Editor release.

Even though it is inconsistent I can live with this solution. I had to change my own HTML and moved my classes from the input field to the containing divs. And now this code works for your and my HTML:

$(".phoneCountryCode input").myMask("+8?bb",{placeholder:"_"});
$(".phoneAreaCode input").myMask("9?bbbb",{placeholder:"_"});
$(".phonePhoneNumber input").myMask("89c?cccccccccccc",{placeholder:"_"});

Unfortunately this code requires that the class names may not be applied to the input element directly any longer. If you do this the selector does not find the class.

allan

Why should the className option never have been applied to the input element directly?

That wasn't a feature that I had planned to put into Editor. If that was happening with the 1.5 releases, it was a mistake!

In addition my preferred solution (attaching the class to the input element) worked in the previous Editor release.

You can use the attr option for that:

name: 'myField',
attr: {
  "class": 'myClass'
}

For the text field type the attr option will apply the attributes to the input tag.

Allan

rf1234

This indeed is a much better solution. Got rid of "className" and "id" and will use the "attr" option now. Many thanks. Didn't find it in the reference though. "fields.attr" has no match whereas "fields.name", "fields.type" etc. can be found.

allan

It is detailed in the text reference documentation.

Allan

rf1234

Great you answered another question I had in mind: How do I set a placeholder
Thanks again, Allan!