jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ListBox › Cannot have multiple ListBoxes on a page?

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  edmilic 12 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Cannot have multiple ListBoxes on a page? Posts
  • June 13, 2012 at 2:14 am Cannot have multiple ListBoxes on a page? #4866

    edmilic
    Member

    I was trying to put 2 list boxes on a page and I noticed that the ListBox generates DOM nodes with ids.

    For example I see divs with the following ids that get generated when I create a list box.

    id=”listBoxContent”
    id=”verticalScrollBar”
    id=”verticalScrollBar”
    id=”bottomRight”

    This looks like a mistake.

    June 13, 2012 at 3:12 am Cannot have multiple ListBoxes on a page? #4869

    Peter Stoev
    Keymaster

    Hi edmilic,

    To add a ListBox, create a DIV tag with unique ID, select it with jQuery and call the jqxListBox constructor. There’s no problem to have as many ListBoxes on a single page as you wish. In addition, the IDs of the elements inside the jqxListBox are generated dynamically and they depend on the ListBox’s id.

    Example of creating 6 ListBoxes

    <!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.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait"
    		        ];
                    // Create a jqxListBox
                    $("#jqxWidget0").jqxListBox({ source: source, width: 200, height: 250});
                    $("#jqxWidget1").jqxListBox({ source: source, width: 200, height: 250 });
                    $("#jqxWidget2").jqxListBox({ source: source, width: 200, height: 250 });
                    $("#jqxWidget3").jqxListBox({ source: source, width: 200, height: 250 });
                    $("#jqxWidget4").jqxListBox({ source: source, width: 200, height: 250 });
                    $("#jqxWidget5").jqxListBox({ source: source, width: 200, height: 250 });
                });
            </script>
            <div id='jqxWidget0'>
            </div>
            <div id='jqxWidget1'>
            </div>
            <div id='jqxWidget2'>
            </div>
            <div id='jqxWidget3'>
            </div>
            <div id='jqxWidget4'>
            </div>
            <div id='jqxWidget5'>
            </div>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    June 13, 2012 at 3:44 am Cannot have multiple ListBoxes on a page? #4870

    edmilic
    Member

    My list box DIVs did not have Id’s. I was using a selector to find an element on the page with a certain class.

    Added ID’s to my list boxes and works like a charm now.

    Thanks Peter.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.