jQWidgets Forums

Tagged: autoCloseOnClick, click, close, destroy, dropdown, initialization, item, jqxMenu, Menu

This topic contains 9 replies, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

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

Author

Manually collapse dropdown when item clicked Posts

August 21, 2013 at 1:54 am Manually collapse dropdown when item clicked #27232

Participant

I have a jqx-menu that is PARTLY populated dynamically using data downloaded from the server after the page loaded. I am using javascript to add dynamic menu items to some top level item (final menu is only 1 level deep below top level).

I am aware I can populate the menu using an array, but I prefer to do the above method rather than use the source property, because I need to rename some other menu items depending on what the user selects.

The way the code works at the moment is perfect, except with the dynamically added menu items, the dropdown menu stays open after the user clicks it.

Is there some markup I can/should add to my dynamically added menu items so that the dropdown menu dissappears/collapses once an item is selected?

The current behaviour is such that the dropdown only disappears when the mouse if moved off the menu.

Kind Regards,

Fritz

August 21, 2013 at 5:36 am Manually collapse dropdown when item clicked #27250

Dimitar

Participant

Hello Fritz,

Please check if you have set the property autoCloseOnClick to true. Also make sure to update to the latest version of jQWidgets (3.0.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 22, 2013 at 1:49 am Manually collapse dropdown when item clicked #27327

Fritz45

Participant

Hi Dimitar

Yes, I have added autoCloseOnClick = true and also replaced all my jqxWidgets with version 3.0.1.

But the problem still persists. I think I may not be adding the right classes when I add the menu items programatically. At the moment I am doing this:

for (var i = 0; i < data.length; i++) {
var s = data[i];
$statsDropDown.append("” + s + ““);
}

Where $statsDropDown is a jquery reference to this html:

<ul id="statsDropDown">
     <li><a href="#">Setup not loaded or loading...</a></li>
</ul>

AFTER the items are dynamically added, I call:

$(“#jqxMenu”).jqxMenu({height: 30 });
$(“#jqxMenu”).addClass(“topmenu”); //this is just to add custom background colour
$(‘#jqxMenu’).jqxMenu({ autoCloseOnClick: true });

With this code, the menu does NOT close when a dropdown item is clicked. If I do not programmatically add items, it does close.

Any ideas?

August 22, 2013 at 5:54 am Manually collapse dropdown when item clicked #27346

Dimitar

Participant

Hi Fritz,

Here is a working example. Please check it out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#addItem").click(function () {
                $("#lastUl").append("<li><a href='#Become an affiliate'>Become an affiliate</a></li>");
                $("#jqxMenu").jqxMenu({ width: '670', height: '30px', theme: theme });
                $("#jqxMenu").css('visibility', 'visible');
            });
        });
    </script>
</head>
<body>
    <button id="addItem">
        Add item</button>
    <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
        <ul>
            <li><a href="#Home">Home</a></li>
            <li>Solutions
                <ul style='width: 250px;'>
                    <li><a href="#Education">Education</a></li>
                    <li><a href="#Financial">Financial services</a></li>
                    <li><a href="#Government">Government</a></li>
                    <li><a href="#Manufacturing">Manufacturing</a></li>
                    <li type='separator'></li>
                    <li>Software Solutions
                        <ul style='width: 220px;'>
                            <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                            <li><a href="#Mobile">Mobile</a></li>
                            <li><a href="#RIA">Rich Internet applications</a></li>
                            <li><a href="#TechnicalCommunication">Technical communication</a></li>
                            <li><a href="#Training">Training and eLearning</a></li>
                            <li><a href="#WebConferencing">Web conferencing</a></li>
                        </ul>
                    </li>
                    <li><a href="#">All industries and solutions</a></li>
                </ul>
            </li>
            <li>Products
                <ul>
                    <li><a href="#PCProducts">PC products</a></li>
                    <li><a href="#MobileProducts">Mobile products</a></li>
                    <li><a href="#AllProducts">All products</a></li>
                </ul>
            </li>
            <li>Support
                <ul style='width: 200px;'>
                    <li><a href="#SupportHome">Support home</a></li>
                    <li><a href="#CustomerService">Customer Service</a></li>
                    <li><a href="#KB">Knowledge base</a></li>
                    <li><a href="#Books">Books</a></li>
                    <li><a href="#Training">Training and certification</a></li>
                    <li><a href="#SupportPrograms">Support programs</a></li>
                    <li><a href="#Forums">Forums</a></li>
                    <li><a href="#Documentation">Documentation</a></li>
                    <li><a href="#Updates">Updates</a></li>
                </ul>
            </li>
            <li>Communities
                <ul style='width: 200px;'>
                    <li><a href="#Designers">Designers</a></li>
                    <li><a href="#Developers">Developers</a></li>
                    <li><a href="#Educators">Educators and students</a></li>
                    <li><a href="#Partners">Partners</a></li>
                    <li type='separator'></li>
                    <li>By resource
                        <ul>
                            <li><a href="#Labs">Labs</a></li>
                            <li><a href="#TV">TV</a></li>
                            <li><a href="#Forums">Forums</a></li>
                            <li><a href="#Exchange">Exchange</a></li>
                            <li><a href="#Blogs">Blogs</a></li>
                            <li><a href="#Experience Design">Experience Design</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Company
                <ul id="lastUl" style='width: 180px;'>
                    <li><a href="#About">About Us</a></li>
                    <li><a href="#Press">Press</a></li>
                    <li><a href="#Investor">Investor Relations</a></li>
                    <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                    <li><a href="#Careers">Careers</a></li>
                    <li><a href="#Showcase">Showcase</a></li>
                    <li><a href="#Events">Events</a></li>
                    <li><a href="#ContactUs">Contact Us</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 22, 2013 at 11:02 pm Manually collapse dropdown when item clicked #27486

Fritz45

Participant

Hi Dimitar

Thanks, this is basically what I was already doing. I have now found that the problem seems to be caused by the following:

I am doing this:

jQuery(document).ready(function () {
    
   //I initialize the menu so it will look good when page loads (menu only partly populated)
    $("#jqxMenu").jqxMenu({ height: 30 });  
    $("#jqxMenu").addClass("topmenu");
    
    //pseudoCode:
    gotoServerAndLoadMenuData()
    
});
gotoServerAndLoadMenuData() {
   //build menu here using code like:
    $("#lastUl").append("<li><a href='#Become an affiliate'>Become an affiliate</a></li>");
    $("#jqxMenu").jqxMenu({ height: 30 });  
    $('#jqxMenu').jqxMenu({ autoCloseOnClick: true });
}

Now the problem (of menu not closing on click of an item) goes away if I do not initialize the menu when the page loads. So in other words if I do this:

jQuery(document).ready(function () {
    
   //DO NOT initialize menu
   //pseudoCode:
    gotoServerAndLoadMenuData()
    
});
gotoServerAndLoadMenuData() {
   //build menu here using code like:
    $("#lastUl").append("<li><a href='#Become an affiliate'>Become an affiliate</a></li>");
    $("#jqxMenu").jqxMenu({ height: 30 });  
    $('#jqxMenu').jqxMenu({ autoCloseOnClick: true });
}

This works, whereas the topmost code shows the menu but it does not collapse. Can you maybe explain why this is?

August 26, 2013 at 5:39 am Manually collapse dropdown when item clicked #27652

Dimitar

Participant

Hi Fritz,

Unfortunately, jqxMenu does not support dynamically adding of new items. Thus, your menu source should be loaded before the menu’s initialization.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 26, 2013 at 6:10 pm Manually collapse dropdown when item clicked #27729

Fritz45

Participant

Thanks Dimitar, but I am not just adding items. I am simply initializing the menu twice. Once with few items and once with more.

Why is the behaviour different after the second initialization?

Fritz

August 27, 2013 at 4:57 am Manually collapse dropdown when item clicked #27749

Dimitar

Participant

Hi Fritz,

The second call of:

$("#jqxMenu").jqxMenu({ height: 30 });

is not an initialization, because the menu has already been initialized once (initialization takes place just once). It is, rather, a change of properties (in this case, no properties are actually changed).

If you would like to initialize the menu a second time, you would have to remove the menu first by calling the destroy method.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 27, 2013 at 9:49 pm Manually collapse dropdown when item clicked #27816

Fritz45

Participant

Thanks Dimitar, it is now much clearer to me since I was under the impression the second call also initializes the menu.

However, if I place the destroy method before the second call, then the menu is not shown anymore (not the dynamically added items or the static ones).

So there is a first call when the page loads, to show the menu with static items. The code looks like this:

$("#jqxMenu").jqxMenu({ height: 30 });
    $("#jqxMenu").addClass("topmenu");

Then, when some data is loaded from the server, the second call to build the menu looks like this:

$("#jqxMenu").jqxMenu("destroy");
 $("#jqxMenu").jqxMenu({height: 30 });
 $("#jqxMenu").addClass("topmenu");
 $('#jqxMenu').jqxMenu({ autoCloseOnClick: true });

But after this call, nothing is shown in the menu area anymore.

Please bear with me to sort this out.

Kind Regards,

Fritz

August 28, 2013 at 5:00 am Manually collapse dropdown when item clicked #27826

Dimitar

Participant

Hi Fritz,

The destroy method removes the elements of the menu from the DOM. To initialize it again, you would have to append all needed HTML elements, too.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.