jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Uncaught TypeError – jqxdropdownlist handling OpenLayers click event
Tagged: grid, jquery grid
This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 5 months ago.
-
Author
-
I am attempting to use a jqxGrid on the same page as an OpenLayers map. The OpenLayers map contains a select control which handles selection of map features when they are clicked on. The grid control has row selection enabled.
The map selection and grid row selection both work as expected within the browser. However, when running a debug console (e.g., Chrome Developer Tools), the error “Uncaught TypeError: Object #<SVGAnimatedString> has no method ‘indexOf’ is reported in the method closeOpenedListBox within jqxdropdownlist.js when a map feature is selected. Thus, it appears an jqx event handler is being triggered in response to an OpenLayers click event.
The following code, which is a combination of the respective OpenLayers and jqxGrid examples for their selection features, can be used to reproduce the issue.
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>OpenLayers Click Event Example</title> <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> <script src="http://openlayers.org/dev/OpenLayers.js"></script> <script type="text/javascript">var map, controls; OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';function init(){ map = new OpenLayers.Map('map'); var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});map.addLayers([vectors]);var feature = new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT( "POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"));vectors.addFeatures([feature]);var feature2 = new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT( "POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, -40.40625 -20.4140625, -120.828125 -50.3515625))"));vectors.addFeatures([feature2]);var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,{clickout: true});map.addControl(selectCtrl);selectCtrl.activate();map.setCenter(new OpenLayers.LonLat(0, 0), 1);} </script> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.classic.css" type="text/css" /> <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/gettheme.js"></script> <script type="text/javascript">$(document).ready(function () {var theme = getTheme();// prepare the datavar data = new Array();var firstNames =[ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];var lastNames =[ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];var productNames =[ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];var priceValues =[ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];for (var i = 0; i < 200; i++) {var row = {};var productindex = Math.floor(Math.random() * productNames.length);var price = parseFloat(priceValues[productindex]);var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity;data[i] = row;}var source ={localdata: data, datatype: "array"};// initialize jqxGrid $("#jqxgrid").jqxGrid({width: 670,source: source,theme: theme,columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right'}, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2'}, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2'}]});// initialize buttons and checkboxes. $("#selectrowbutton").jqxButton({ theme: theme }); $("#scrolltobutton").jqxButton({ theme: theme }); $("#clearselectionbutton").jqxButton({ theme: theme }); $("#enableselection").jqxDropDownList({ theme: theme, autoDropDownHeight: true, dropDownWidth: 230, width: 120, height: 25, selectedIndex: 1, source: ['none', 'single row', 'multiple rows', 'multiple rows extended']}); $("#enablehover").jqxCheckBox({ theme: theme, checked: true });// select a row. $("#selectrowbutton").click(function () { var index = parseInt($("#rowindexinput").val());if (!isNaN(index)) { $("#jqxgrid").jqxGrid('selectrow', index);}});// clears the selection. $("#clearselectionbutton").click(function () { $("#jqxgrid").jqxGrid('clearselection');});// scroll to a row. $("#scrolltobutton").click(function () { var index = parseInt($("#rowindexinput2").val());if (!isNaN(index)) { $("#jqxgrid").jqxGrid('ensurerowvisible', index);}});// enable or disable the selection. $("#enableselection").bind('select', function (event) {var index = event.args.index;switch (index) {case 0: $("#jqxgrid").jqxGrid('selectionmode', 'none');break;case 1: $("#jqxgrid").jqxGrid('selectionmode', 'singlerow');break;case 2: $("#jqxgrid").jqxGrid('selectionmode', 'multiplerows');break;case 3: $("#jqxgrid").jqxGrid('selectionmode', 'multiplerowsextended');break;}});// enable or disable the hover state. $("#enablehover").bind('change', function (event) { $("#jqxgrid").jqxGrid('enablehover', event.args.checked);});// display selected row index. $("#jqxgrid").bind('rowselect', function (event) { $("#selectrowindex").html(event.args.rowindex);});// display unselected row index. $("#jqxgrid").bind('rowunselect', function (event) { $("#unselectrowindex").html(event.args.rowindex);});// select the second row. $("#jqxgrid").jqxGrid('selectrow', 2);}); </script> </head> <body onload="init()"> <h1 id="title">OpenLayers Select Feature Example</h1> <div id="tags">select, highlight, hover, onmouseover, click, vector </div> <div id="map" class="smallmap"></div> <p>Select features by clicking on them.</p> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> <div style="margin-top: 20px;"> <div style="float: left;"> <div> <input value="100" style="width: 50px;" maxlength="4" id="rowindexinput2" type="text" /> <input id="scrolltobutton" type="button" value="Scroll to Row" /> </div> <div style="margin-top: 10px;" id="enablehover"> Enable Hover</div> </div> <div style="float: left; margin-left: 20px;"> <div> <input value="0" style="width: 50px;" maxlength="4" id="rowindexinput" type="text" /> <input id="selectrowbutton" type="button" value="Select Row" /> <input id="clearselectionbutton" type="button" value="Clear Selection" /> </div> <div style="margin-top: 10px;"> <span>Selection Mode</span> <div style="margin-top: 5px;" id="enableselection"> </div> </div> </div> <div style="float: left; margin-left: 20px;"> <span>Selection Log:</span> <div style="margin-top: 10px;"> <span>Selected Row Index:</span> <span id="selectrowindex"></span> <br /> <span>Unselected Row Index:</span> <span id="unselectrowindex"></span> </div> </div> </div> </div> </body></html>
Hi Marc,
The issue should be resolved in the jQWidgets ver. 2.3 from today.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter – thanks for the quick fix. I verified that it works for the test case I sent, but unfortunately I am still getting the same error in my actual application code. If I can reduce it to another example, where on the New Topic form do I find the Format HTML Code button (I see the button on this Reply form, but I don’t see the button on the form used to create the topic, which has a different toolbar).
Hi Marc,
If you prepare a sample which demonstrates the reported issue, please feel free to send it to support@jqwidgets.com. Note that, if the sample is archived, rename the .zip to .unzip or .rar to .unrar because the e-mail server has some restrictions due to security reasons. We’ll be glad to track the issue.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comFebruary 12, 2013 at 4:40 pm Uncaught TypeError – jqxdropdownlist handling OpenLayers click event #15083Hello
I generated sample code.
Drag map and see the error chrome or firefox.February 12, 2013 at 5:44 pm Uncaught TypeError – jqxdropdownlist handling OpenLayers click event #15086Hi sertan,
If you have sample code, you can send it to support@jqwidgets.com. In addition, make sure that you use jQWidgets 2.7.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.