Uncaught TypeError: this.itemsContainer in Ultima 2.1.1

[Netinium]

When running Ultima theme version 2.1.1 template on PrimeFaces 11.0.6 and I think also on all PrimeFaces 10 versions I get:

Code: Select all

Uncaught TypeError: this.itemsContainer is undefined
    init http://localhost:7002/myapp/javax.faces.resource/js/layout.js.xhtml?ln=ultima-layout:1095
    Class.extend/e[d]< http://localhost:7002/myapp/javax.faces.resource/core.js.xhtml?ln=primefaces&v=11.0.6&e=11.0.4:24
    c http://localhost:7002/myapp/javax.faces.resource/core.js.xhtml?ln=primefaces&v=11.0.6&e=11.0.4:24
    createWidget http://localhost:7002/myapp/javax.faces.resource/core.js.xhtml?ln=primefaces&v=11.0.6&e=11.0.4:18
    cw http://localhost:7002/myapp/javax.faces.resource/core.js.xhtml?ln=primefaces&v=11.0.6&e=11.0.4:18
    <anonymous> http://localhost:7002/myapp/mypage.xhtml:875

It seems to happen on pages where no SelectOneMenu exists, but I am not sure.
How can I prevent this Uncaught TypeError ?

If I disable the line:

Code: Select all

this.itemsContainer.children('.ui-selectonemenu-item:first').css({'display': 'none'});

the error goes away, but I do not understand the consequence of it.

I could not figure out where "itemsContainer" is defined. But I have minimal javascript knowledge.

I ensured my layout.js is in sync with the template version 2.1.1
I did look at 4.1.0 version of layout.js, but it has changed a lot and uses other names for elements, but it no longer contains the 'itemsContainer' line.
I cannot upgrade to ultima 3.0.0 or 4.1.0 because there are too big layout changes. 2.1.1 works very good with PF 11 except for this error message.

Hope you can help.

[mert.sincan]

Hi,

New PrimeFaces SelectOneMenu widget doesn't have itemsContainer element. That's why you need to update PrimeFaces and Ultima versions together. Or you should override SelectOneMenu widget. Exp;

Code: Select all

if(PrimeFaces.widget.SelectOneMenu) {
    PrimeFaces.widget.SelectOneMenu = PrimeFaces.widget.SelectOneMenu.extend({
        init: function(cfg) {
            this._super(cfg);

            var $this = this;
            if(!this.disabled && this.jq.parent().hasClass('md-inputfield')) {
                var panel = $(this.jqId + '_panel');
                var itemsContainer = panel.find('.ui-selectonemenu-items');
                
                itemsContainer.children('.ui-selectonemenu-item:first').css({'display': 'none'});   // This line has been updated
                
                if (this.input.val() != "") {
                    this.jq.addClass("ui-state-filled");
                }

                this.input.off('change').on('change', function() {
                    $this.inputValueControl($(this));
                });
                
                if(this.cfg.editable) {
                    this.label.on('input', function(e) {
                        $this.inputValueControl($(this));
                    }).on('focus', function() {
                        $this.jq.addClass('ui-state-focus');
                    }).on('blur', function() {
                        $this.jq.removeClass('ui-state-focus');
                        $this.inputValueControl($(this));
                    });
                }
            }
        },
        
        inputValueControl: function(input) {
            if (input.val() != "")
                this.jq.addClass("ui-state-filled"); 
            else
                this.jq.removeClass("ui-state-filled");
        }
    });
}

Best Regards,

[Netinium]

Thank you, this works.

[mert.sincan]

Glad to hear, thanks a lot for the update!