jQuery UI Widgets Forums Lists DropDownList Cannot open dropdownlist on a jqxWindow

This topic contains 3 replies, has 2 voices, and was last updated by  mrallaris 5 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • mrallaris
    Participant

    Hello,

    I am trying to display a dropdownlist in a jqxWindow. I have put the jqxDropDownList definition inside of the window’s initContent function. I have other dropdownlists on the page (not in the window) so I know that all the required libraries are in place. I have done a console.log of the vendorAdapter and it is loaded with all of the data. I have tried changing the widget to a comboBox and I get the same result.

    Any ideas?

    Thanks.

    HTML:

    
    <div id="selectVendorWindow">
    	<div id="selectVendorWindowHeader">
    		<span id="captureContainer" style="float: left; font-weight: bold">Please Select a Vendor</span>
    	</div>
    	<div id="selectVendorWindowContent" style="overflow: hidden; padding-left: 10px; padding-top: 10px">
    		<input class='input_text selectVendorInput editable' type="text" style="width: 175px; border: 1px solid #aaa" id="selectVendorInput" />
    		<input type="hidden" id="selectVendorTypeHidden" />
    		<input type="button" value="OK" style="margin-bottom: 5px;" id="selectVendorOK" onClick='selectVendorOK()' />
    	</div>
    </div>
    

    JS:

    
    var vendorSource = {
    	datatype: "json",
    	datafields: [
    		{name: 'vendorName', type: 'string'},
    		{name: 'vendorID', type: 'number'}
    	],
    	url: '../wo/wo.controller.php',
    	data: {
    		func: "autoCompleteVendors"
    	}
    }
    
    var vendorAdapter = new $.jqx.dataAdapter(vendorSource);
    
    $('#selectVendorWindow').jqxWindow({
    	width: 300, 
    	height: 500, 
    	resizable: false,
    	isModal: true,
    	autoOpen: false,
    	initContent: function () {
    		$("#selectVendorInput").jqxDropDownList({ selectedIndex: 0, theme: 'ui-smoothness', source: vendorAdapter, displayMember: vendorName", valueMember: "vendorID", width: 100, height: 18 });
    	}
    });
    

    Nadezhda
    Participant

    Hello mrallaris,

    Here is an example which shows how to put jqxDropDownList in jqxWindow. Please, check if you are include all necessary script references and make sure you are using the latest jQWidgets version(3.7.1).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.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>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var url = "../sampledata/customers.txt";
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'CompanyName' },
                            { name: 'ContactName' }
                        ],
                        url: url,
                        async: false
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    $("#jqxwindow").jqxWindow({
                        height: 300,
                        width: 300,
                        initContent: function () {
                            $("#dropDownList").jqxDropDownList({
                                selectedIndex: 0, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25
                            });
                        }
                    });
                });
            </script>
            <div id='jqxwindow'>
                <div>Header</div>
                <div>
                    <div id='dropDownList'>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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


    mrallaris
    Participant

    Hi Nadezhda – thank you very much for your reply.

    I have all the required libraries loaded (which I can confirm because I am using various dropdownlists on the same page). I have also updated my JQWidgets library from 3.4.0 to 3.7.1. Unfortunately there is no change in the result.

    I didn’t mention in my original posting that all of this is happening inside of a JQTabs widget which itself exists inside of jqWindow. So I have a window with a tabs widget and on one of the tabs I want to open another window with a dropdownlist. As I said, I have dropdown lists working within the tabs, it just won’t work on this dropdownlist in the popup window.

    Just to reiterate – the adapter is populating correctly with the data. But the widget is not populating from the adapter’s data. I’ve tried stepping through the code to see where the hang up is but I’m not having any luck.

    Any more suggestions?

    Thanks


    mrallaris
    Participant

    Hello Again – I figured it out. I was using an input for the dropdownlist instead of a div. Stupid mistake – thanks for the help.

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

You must be logged in to reply to this topic.