Editor [open event] is "blocking?" my access to inputs in a form.

Tester2017

I have a form with a table field openingHours. This is a string composed of the opening hours of all the weekdays.

E.g.:

Monday 09:00 - 17:00
Tuesday 09:00 - 22:00

And the composed string will be day number, opening hours and minutes and closing hours and minutes, which will result in this example to:

109001700209002200

The field opening hours is invisible and I use 7 "help" fields, one for every day. When the form is submitted I will put the values of all those 7 fields in the field openingHours.

I use a slider to set the hours for every weekday. And I also have a button to clear the fields. Everything is working fine. But I got in trouble if a use the Editor event open. During this event I want to initialize the weekdays, setting the opening hours as found in the database. This works, but then I am not able anymore to change the weekdays with the slider nor clear the values with a button.

JavaScript:

....;

editor.on(`open`, function(e, mode, action)
{

    var day     = ``;

    var dayTmp  = editor.field(`restaurants.opening_hours`).val().substr(0,16);

    day += (dayTmp.substr(0,8) == `xxxxxxxx` || dayTmp.substr(0,8) == ``)
            ? ``
            : dayTmp.substr(0,2) + `:`  + dayTmp.substr(2,2) + `-` + dayTmp.substr(4,2) + `:`  + dayTmp.substr(6,2);
    ....;


    $(`#Monday_range`).val(day);

    ....;
});

HTML (only one day and the function to clear the values of the weekdays:

....

<div class="form-group">
    <div class="col-sm-offset-1 col-sm-10">
        <div class="checkbox col-sm-3">
            <label><input type="checkbox" class="cb-weekday" id="Monday"><?= lang('Monday'); ?></label>
        </div
        <div class="col-sm-3">
            <input class="form-control txt-weekday" id="Monday_range" name="Monday_range" readonly>
        </div>
    </div>
</div>

....


/*  Clear the values of the openings hours of the days selected. */
function clearRange () {

    $('.cb-weekday').each(function(i) {
        if (this.checked) {
            inputId = this.id + '_range'; 
            $('input[id=' + inputId + ']').attr('value', ''); 
        };
    });
};

The function clearRange is functioning until I have used the open event of the editor. Then it will not clean anymore the value of the input field. (To understand I used some days in the open event and others not. Those others I can still manipulate)

The most strange part (at least for me) is that I can still change the values in the console.

I must have missed something. Any suggestion is appreciated.

allan

I would suggest you use the Editor API to set values in the Editor form - field().val() for example.

Using DOM or jQuery methods directly risks bypassing some critical code in Editor for the value processing.

Allan

Tester2017

@Allan, but those 7 "help" fields are not making part of the "real" editor fields. The editor field is openingsHours. The 7 "help" fields are only inputs which values will be used to build the value of the editor field openingsHours. So I can not access them by field().val() unless I define them as editor fields.

allan

Could you link to a page showing the problem so I can trace the issue through?

Thanks,
Allan

Tester2017

@Allan,
At this moment my project is on localhost and I need to resolve one other issue before I can put it on the production server. As soon as I have done this I will notify you and give you access to the "problem" page.

Already thanks in advance.

Tester2017

@Allan, already resolved my issue.

instead of using:

$(`#Monday_range`).val(day)

I needed to use:

$(`#Monday_range).attr(`value`, day);

allan

Interesting. Thanks for letting me know.

Allan