jQWidgets Forums

This topic contains 7 replies, has 4 voices, and was last updated by mikemazz 11 years, 2 months ago.

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

Author

strange error message with jqxwindows and jqxcombobox Posts

October 6, 2013 at 7:49 pm strange error message with jqxwindows and jqxcombobox #30307

Participant

hello all – i am trying to combine jqxComboBox with jqxWindows and get the following error on google-chrome:

Uncaught TypeError: Cannot read property ‘multiSelect’ of undefined jqxcombobox.js:7
d jqxcombobox.js:7
(anonymous function) jqxcombobox.js:7
(anonymous function) jqxcore.js:7
x.extend.each jquery-latest.js:657
(anonymous function)

it only happens when the window first opens. even a hard-reload and the problem does not happen, until you open a new browser-tab.

any ideas?

my html code is below:

<html lang="en">
<head>
    <link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src='http://code.jquery.com/jquery-latest.pack.js'				type='text/javascript'></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/gettheme.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
    		//	<!-- start of code to open/close the popup-window		-->
        var basicDemo = (function () {
            //Adding event listeners
            function _addEventListeners() {
                $('#showWindowButton').click(function () {
			$('#marksWindow').jqxWindow('open');
                });
		$('#hideWindowButton').click(function () {
			$('#marksWindow').jqxWindow('close');
		});
		
            };
            //Creating all page elements which are jqxWidgets
            function _createElements() {
                $('#showWindowButton').jqxButton({ theme: basicDemo.config.theme, width: '70px' });
            };
            //Creating the demo window
            function _createWindow() {
                $('#marksWindow').jqxWindow({
                    showCollapseButton: false, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500, theme: basicDemo.config.theme,
                    initContent: function () {
			    $('#marksWindow').jqxWindow('close'); 		// 'close' opposed to 'focus': $('#window').jqxWindow('focus');
                    }
                });
            };
            return {
                config: {
                    dragArea: null,
                    theme: null
                },
                init: function () {
                    //Creating all jqxWindgets except the window
                    _createElements();
                    //Attaching event listeners
                    _addEventListeners();
                    //Adding jqxWindow
                    _createWindow();
                }
            };
        } ());
        $(document).ready(function () {
            var theme = getDemoTheme();
            //Setting demo's theme
            basicDemo.config.theme = theme;
            //Initializing the demo
            basicDemo.init();
        });
    		//<!-- end of code to open/close the popup-window		-->
    </script>
    <script type="text/javascript">
    		//	<!-- start of code to manage the select-item		-->
            $(document).ready(function () {
                $("#jqxComboBox").jqxComboBox({multiSelect: true, width: 350, height: 25, showArrow: false });           
            });
		function addOne(keyText, keyValue)	{
						$('#jqxComboBox').jqxComboBox('addItem', {label: keyText, value: keyValue} );
						$('#jqxComboBox').jqxComboBox('selectItem', keyValue);
		}
		function showResult()	{
			var result = '';
			var items = $("#jqxComboBox").jqxComboBox('getSelectedItems');
			$.each(items	, function(index) {
				result += this.value ;
				if (items.length - 1 != index) {
				    result += ", ";
				}
			});
			alert (result);
		}
    		<!-- end of code to manage the select-item		-->
    </script>
</head>
    <div id="jqxWidget">
        <div style="float: left;">
            <div>
                <input type="button" value="Open" id="showWindowButton" />
            </div>
        </div>
        <div style="width: 100%; height: 650px; margin-top: 50px;" id="mainDemoContainer">
            <div id="marksWindow">
                <div id="windowHeader">
			window header div
                </div>
                <div style="overflow: hidden;" id="windowContent">
			window body div
			<div style="margin-top: 5px;" id='jqxComboBox'></div>
               <input type="button" value="Close" id="hideWindowButton" style="margin-left: 5px" />
  
			
                </div>
            </div>
        </div>
    </div>
    	<input type='button' onClick="addOne('zero', '0'); ">zero</input>
	<input type='button' onClick="addOne('one', '1'); ">one</input>
	<input type='button' onClick="addOne('two', '2'); ">two</input>
	<input type='button' onClick="addOne('three', '3'); ">three</input>
	<input type='button' onClick="addOne('/pr/\'pro\'Audio Discrimination', '4'); ">/pr/'pro'Audio Discrimination</input>
	<input type='button' onClick="$('#marksWindow').jqxWindow('open');" >open via button</input>
	<input type='button' onClick='showResult();'>results shown</input>
</body>
</html>

October 7, 2013 at 5:49 am strange error message with jqxwindows and jqxcombobox #30324

Peter Stoev

Keymaster

Hi edwardsmarkf,

All of your code should be in one document.ready callback function, not in multiple. In addition, DOCTYPE is missing above your html tag.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 8, 2013 at 3:59 pm strange error message with jqxwindows and jqxcombobox #30438

edwardsmarkf

Participant

thank you peter – your suggestion worked perfectly !

October 8, 2013 at 7:07 pm strange error message with jqxwindows and jqxcombobox #30452

edwardsmarkf

Participant

oddly enough, i discovered that setting the jqxWindow “autoOpen” property to false gives the same error. this took a LONG time to figure out!

October 9, 2013 at 3:54 pm strange error message with jqxwindows and jqxcombobox #30496

edwardsmarkf

Participant

line 50 – changing “true” to “false” seems to cause the same problem.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src='http://code.jquery.com/jquery-latest.pack.js'				type='text/javascript'></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/gettheme.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
    		//	<!-- start of code to open/close the popup-window		-->
        var basicDemo = (function () {
            //Adding event listeners
            function _addEventListeners() {
                $('#showWindowButton').click(function () {
			$('#marksWindow').jqxWindow('open');
                });
		$('#hideWindowButton').click(function () {
			$('#marksWindow').jqxWindow('close');
		});
		
            };
            //Creating all page elements which are jqxWidgets
            function _createElements() {
                $('#showWindowButton').jqxButton({ theme: basicDemo.config.theme, width: '70px' });
            };
            //Creating the demo window
            function _createWindow() {
	    $('#marksWindow').jqxWindow(
		    {	showCollapseButton	: false
		    ,	maxHeight		: 400
		    ,	maxWidth		: 700
		    ,	minHeight		: 200
		    ,	minWidth		: 200
		    ,	height			: 300
		    ,	width			: 500
		    ,	theme			: basicDemo.config.theme
		    ,	autoOpen		: false
		    ,	initContent: function () 
		    	{
			    $('#marksWindow').jqxWindow('close');
			}
                });
            };
            return {
                config: {
                    dragArea: null,
                    theme: null
                },
                init: function () {
                    //Creating all jqxWindgets except the window
                    _createElements();
                    //Attaching event listeners
                    _addEventListeners();
                    //Adding jqxWindow
                    _createWindow();
                }
            };
        } ());
        $(document).ready(function () {
			console.log ('test test');
            });
        $(document).ready(function () {
            var theme = getDemoTheme();
            //Setting demo's theme
            basicDemo.config.theme = theme;
            //Initializing the demo
            basicDemo.init();
                $("#jqxComboBox").jqxComboBox({multiSelect: true, width: 350, height: 25, showArrow: false });           
            });
		function addOne(keyText, keyValue)	{
						$('#jqxComboBox').jqxComboBox('addItem', {label: keyText, value: keyValue} );
						$('#jqxComboBox').jqxComboBox('selectItem', keyValue);
		}
		function showResult()	{
			var result = '';
			var items = $("#jqxComboBox").jqxComboBox('getSelectedItems');
			$.each(items	, function(index) {
				result += this.value ;
				if (items.length - 1 != index) {
				    result += ", ";
				}
			});
			alert (result);
		}
    		<!-- end of code to manage the select-item		-->
    </script>
</head>
    <div id="jqxWidget">
        <div style="float: left;">
            <div>
                <input type="button" value="Open" id="showWindowButton" />
            </div>
        </div>
        <div style="width: 100%; height: 650px; margin-top: 50px;" id="mainDemoContainer">
            <div id="marksWindow">
                <div id="windowHeader">
			window header div
                </div>
                <div style="overflow: hidden;" id="windowContent">
			window body div
			<div style="margin-top: 5px;" id='jqxComboBox'></div>
               <input type="button" value="Close" id="hideWindowButton" style="margin-left: 5px" />
  
			
                </div>
            </div>
        </div>
    </div>
    	<input type='button' onClick="addOne('zero', '0'); ">zero</input>
	<input type='button' onClick="addOne('one', '1'); ">one</input>
	<input type='button' onClick="addOne('two', '2'); ">two</input>
	<input type='button' onClick="addOne('three', '3'); ">three</input>
	<input type='button' onClick="addOne('/pr/\'pro\'Audio Discrimination', '4'); ">/pr/'pro'Audio Discrimination</input>
	<input type='button' onClick="$('#marksWindow').jqxWindow('open');" >open via button</input>
	<input type='button' onClick='showResult();'>results shown</input>
</body>
</html>

October 25, 2013 at 11:12 pm strange error message with jqxwindows and jqxcombobox #31365

Marc

Participant

I have encountered the same (or similar) issue. In my case, when you open Chrome Developer Tools you see this error “Uncaught TypeError: Cannot read property ‘multiSelect’ of undefined” repeating at a very rapid rate. It appears to occur when a previously hidden combo box is made visible:

<div id="jqxComboBox"></div>

var theme = "energyblue";
var source = [
    "Affogato",
    "Americano", ];
// Hide the combo box element
$("#jqxComboBox").hide();
    
// Create a jqxComboBox
$("#jqxComboBox").jqxComboBox({
    source: source,
    selectedIndex: 0,
    width: '200',
    height: '25',
    theme: theme
});
    
// Show the combo box element
$("#jqxComboBox").show();