Emby UI coding CSS - Display 'block' and 'none' - JQuery interesting happenings...

[chef 3808]

While coding some Checkbox toggles in a plugin UI, I came across something interesting. this maybe Emby specific, but may also not be.

 

If I create an 'emby-checkbox' and wire up its state in a page load function as follows:

                        if (config.UserVeraIPOverride != null) {
                            if (config.UserVeraIPOverride == true) {
                                $('#chkOptionalVeraAddress', page).prop('checked', true);
                                $('#optionalId', page).css('display', 'block');
                            }
                            if (config.UserVeraIPOverride == false) {
                                $('#chkOptionalVeraAddress', page).prop('checked', false);
                                $('#optionalId', page).css('display', 'none');
                            }
                        } else {
                            $('#chkOptionalVeraAddress', page).prop('checked', false);
                        }

the first time the plugin page loads everything work, and all is fine.

 

 

This is where things get 'wierdy'.

 

If I change the checkbox's state using this code here:

                    $('#chkOptionalVeraAddress').change(function () {
                        if (this.checked) {
                            $('#optionalId').css('display', 'block');
                            ApiClient.getPluginConfiguration(pluginId).then(function (config) {
                                config.UserVeraIPOverride = true;
                                ApiClient.updatePluginConfiguration(pluginId, config).then(function (result) {
                                    Dashboard.hideLoadingMsg();
                                    Dashboard.processPluginConfigurationUpdateResult(result);
                                });
                            });
                        } else {
                            $('#optionalId').css('display', 'none');
                            ApiClient.getPluginConfiguration(pluginId).then(function (config) {
                                config.UserVeraIPOverride = false;
                                ApiClient.updatePluginConfiguration(pluginId, config).then(function (result) {
                                    Dashboard.hideLoadingMsg();
                                    Dashboard.processPluginConfigurationUpdateResult(result);
                                });
                            });
                        }
                    });

the configuration will update, and everything seems to be working.

 

Until, you click off the plugin and choose another Emby Option from the 'mainDrawer' menu in Dashboard (example: "Devices").

 

 

 

When you click back to the plugin page (I'm using the Dashboard 'mainDrawer' menu Option), the plugin UI does not load properly (referencing the first code stub example above).

 

 

The checkbox is in it's proper state, however the function attached to it's state change event is broken. 

 

 

Finally, if I click off the Plugin Configuration page again, and then click through two or more Emby Dashboard 'mainDrawer' menu options and return to the plugin page again,  everything works again without any problems.

 

It's weird. 

 

Any ideas?

Edited May 25, 2019 by chef

[chef 3808]

I found the issue. 

 

The problem was that I had some inline style tags in my HTML which where overriding the load function of the plugin