jQuery UI Widgets Forums Navigation Ribbon Incorrect class application found (v3.9.1)

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Peter Stoev 4 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Incorrect class application found (v3.9.1) #80535

    gedmarc
    Blocked

    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

    Incorrect class application found (v3.9.1) #80536

    gedmarc
    Blocked

    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.

    Incorrect class application found (v3.9.1) #80537

    gedmarc
    Blocked

    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 Stoev
    Keymaster

    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


    gedmarc
    Blocked

    Please highlight which mistake was used.

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


    gedmarc
    Blocked

    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.

    • This reply was modified 4 years, 6 months ago by  gedmarc.

    gedmarc
    Blocked

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


    Peter Stoev
    Keymaster

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.