jQWidgets Forums

Tagged: DropDownList, initContent, jqxDropDownList, jqxwindow, json, window

This topic contains 3 replies, has 2 voices, and was last updated by mrallaris 10 years, 1 month ago.

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

Author

Cannot open dropdownlist on a jqxWindow Posts

March 24, 2015 at 2:55 pm Cannot open dropdownlist on a jqxWindow #69092

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 });
	}
});

March 25, 2015 at 9:53 am Cannot open dropdownlist on a jqxWindow #69129

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/

March 27, 2015 at 2:22 pm Cannot open dropdownlist on a jqxWindow #69261

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

March 27, 2015 at 2:38 pm Cannot open dropdownlist on a jqxWindow #69262

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.

Author

Posts

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

You must be logged in to reply to this topic.