Incorrect class application found (v3.9.1)

[gedmarcBlocked]

Hi There

In facing the problem “Invalid Selector” I’ve gone through this forum extensively and have found the only response is our html is wrong.
I have gone over this a few times to ensure, however I do believe the widget library is behaving incorrectly on class allocation making the HTML wrong.
Please review
HTML Code

<div id="UpdateDiv" class="jqxRibbon">
	<ul id="jwd5f68d">
		<li>Home Screen</li>
		<li>Source Code</li>
		<li>System Log</li>
	</ul>
	<div id="jw148663">
		<div id="gettingStarted" class="demoPanel JQXPanel">
			<H1 class="demoHeader ui-state-highlight">Getting Started</H1>
		</div>
	</div>
</div>

As you can see, the demoPanel is definitely there and valid, however after calling .ribbon(), the getting started div classes get completely replaced instead of appended.
The below is the DOM after running .jqxRibbon().

<div class="jqx-widget-content jqx-widget-content-metrodark jqx-ribbon-content-section jqx-ribbon-content-section-metrodark jqx-ribbon-content-section-top jqx-ribbon-content-section-top-metrodark jqx-rc-b jqx-rc-b-metrodark" id="gettingStarted" style="display: block;">
<h1 class="demoHeader ui-state-highlight" id="jw3d0697">Getting Started</h1>
</div>

As you can see, the JQXWidget removes the existing class allocation, and is creating its own error.

This causes the method $(‘.demoPanel’).jqxPanel(); to return the error
Invalid Selector – .demoPanel! Please, check whether the used ID or CSS Class name is correct.

Please advise how to fix, or a fix date for the bug? both demoPanel and JQXPanel classes are getting removed.
This behaviour is seen throughout all your components, and kind of makes us look silly when you just come back and say its our code.

Thanks.
Kind Regards,
Marc Magon

[gedmarcBlocked]

In order to get around this bug for the meantime, I have had to do the following

var divClasses = [];
function jqxWidgetPreCallClassFix(jqxWidgetID)
{
    $('#' + jqxWidgetID + ' > div > div').each(function(i, val){
        
        divClasses[i] = $(this).attr('id') + '-' + $(this).attr('class');
        //alert('Index ' + i + '-' + divClasses[i]);
        //divClasses.push($(this).attr('id') + '-' + $(this).attr('class'));
    });
}

function jqxWidgetPostCallClassFix(jqxWidgetID)
{
    for	(index = 0; index < divClasses.length; index++) 
    {
        var stringArr = divClasses[index].split('-');
        var compID = stringArr[0];
        var oldClasses = stringArr[1];
        //alert('Old Classes ' + index + '-' + divClasses[index]);
        $('#' + compID).attr('class',oldClasses + ' ' + $('#' + compID).attr('class'));
    } 
}

Before running any .jqxRibbon, .jqxTree, .jqxNavigationBar I am required to run the pre method before the call, and the post method after the call to get around this.
Very intensive!

Please can this be prioritized as it is an obvious bug.

[gedmarcBlocked]

Confirmed hack fixes the problem, javascript looks like this

jqxWidgetPreCallClassFix('UpdateDiv');
$('#UpdateDiv').jqxRibbon({
  theme : "metrodark",
  height : "100.0%"
});
jqxWidgetPostCallClassFix('UpdateDiv');

The DOM Output after calling the post call class fix function now looks like this

demoPanel JQXPanel jqx-widget-content jqx-widget-content-metrodark jqx-ribbon-content-section jqx-ribbon-content-section-metrodark jqx-ribbon-content-section-top jqx-ribbon-content-section-top-metrodark jqx-rc-b jqx-rc-b-metrodark jqx-panel jqx-panel-metrodark jqx-widget jqx-widget-metrodark jqx-rc-all jqx-rc-all-metrodark

And the Invalid Selector problem is now solved with a terrible terrible hack.
Looking forward to 3.9.2 where this is fixed properly

[Peter StoevKeymaster]

Hi gedmarc,

Invalid Selector is caused because you used Invalid jQuery Selection. That’s it. This is not a bug. This is exception that we raise on purpose to point out that the user made a mistake.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gedmarcBlocked]

Please highlight which mistake was used.

Invalid JQuery selection? $(‘.ClassName’) is most certainly valid?

[gedmarcBlocked]

I’m very sure, that the error is on your side, with the removal of the classes, instead appending the classes.

Please re-evaluate your response.

[gedmarcBlocked]

It is either terrible coding on your side, or it is a bug.

[Peter StoevKeymaster]

Hi gedmarc,

1. Ribbon’s HTML Structure is incorrect. It should be:

<div id="jqxRibbon">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <div>
        <div>
            Content 1</div>
        <div>
            Content 2</div>
        <div>
            Content 3</div>
    </div>
</div>

which means a Content DIV tag for each Title tag.

2. You cannot create widgets from the HTML Structure’s tags. You can add/remove/update widgets only inside these DIV tags as shown in any of our demos about the Ribbon widget.

3. We remove CSS Classes from HTML Elements which are part of the widget’s HTML structure. Otherwise, these CSS Classes or styles could break the widget’s functionality. If you want to add custom CSS Classes or custom HTML Elements, you should do that for the HTML Elements which you put inside the Ribbon Panels

4. Invalid Selector is always raised by an error caused by the user and that is the purpose of the exception. It points out that the user did something wrong. Unfortunately, this in your case is true, too. I would suggest you to read my suggestions and apply them to your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts