Jump to content

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


chef
Go to solution Solved by chef,

Recommended Posts

chef

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 by chef
Link to comment
Share on other sites

  • Solution
chef

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...