error .. even number of child div elements required?

[d_lMember]

I’m embedding jqxNavigator (and other jqxWidgets) into panels in a jqxDockPanel layout.
I copied and pasted the jqxNavigatorBar demo source (Default Functionality) from here
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnavigationbar/index.htm

But on loading the embedded code in jqxDockPanel page I get this error …

Invalid jqxNavigationBar structure. Please add an even number of child div elements that will represent each item’s header and content.

I count the number of child div elements inside root div id=”jqxNavigatorBar” to be an even number (6) as copied and pasted exactly from the default demo.

Any ideas why I get this error message?   Perhaps mismatched div elements?

…

I tried changing the embedded jqxNavigationBar to sit in another panel .. in fact ‘content’ .. and I get the same error.

However using exactly the same copied and pasted jqxNavigationBar code I managed to get it working in a more basic merge of  the two default demos jqxDockPanel and jqxNavigationBar.

So it seems that my more complex jqxDockPanel (too complex to post here)  has a problem.

What debugging approach is suggested?  I can inspect content of different divs using this debugging script.

       // trace div elements
            var h = $(“#jqxDockPanel”).html(); // get html
            var t = $(“#jqxDockPanel”).text(); // get text
            
            alert (h);
            alert (t);
            
            var h = $(“#content”).html(); // get html
            var t = $(“#content”).text(); // get text
            
            alert (h);
            alert (t);

 

 

[Peter StoevKeymaster]

Hi d_l,

If the structure that you created for jqxNavigationBar is not correct, i.e you do not have pairs of header/content, you will end up with such error message. From your post, I cannot say what is wrong on your side so please, post a sample which demonstrates that behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[d_lMember]

I decided to start again from the ground up.

I recreated jqxDockPanel (with 10 panels) but initially without nested jqxWidgets.
That worked.

I nested jqxNavigationBar into a target panel in jqxDockPanel.
That worked.

I’ve not changed the embedded jqxNavigatorBar code which generated my earlier error.
So the conclusion is there is some conflict with other code..

I intend to keep adding widgets into panels one by one until I find where the framework breaks.

I’m hoping to find some sort of generic debugging process to use such as Firefox -> Firebug logging.

https://getfirebug.com/logging

This will be useful as I continue adding nested widgets.

I’ve found this online validator useful for flagging errors in element matching.

http://validator.w3.org

But unfortunately it doesn’t show where there are missing tags (if any).

[Author]

Posts