Jquery UI Dialog and jqxgrid won't co-exist

Tagged: datagrid

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

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

Author

Jquery UI Dialog and jqxgrid won’t co-exist – TypeError: $.jqx is undefined – simple example attached Posts
July 19, 2013 at 9:18 am Jquery UI Dialog and jqxgrid won’t co-exist – TypeError: $.jqx is undefined – simple example attached #25481
tstoneami
Member
Hello;

I am attempting to use a jquery UI modal box and a jpxgrid in the same page. In the following example, the commented out code is what is required for the modal box. If you run this code and hit the LOADGRID button, you get a grid. Uncomment the required code for the jquery UI modal box, save and run….hit the button. If you have a Firebug console errors panel enabled you will get a

TypeError: $.jqx is undefined
var dataAdapter = new $.jqx.dataAdapter(source);
This indicates that jqxdata.js is not loaded (which I learned from an existing forum entry). It seems to be one or the other, as I can either have a grid or have a modal box in my page…but not both. A solution to this problem would be HUGELY appreciated.

Thank you for any response – hopefully someone else will benefit also. Code follows…

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.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/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../scripts/gettheme.js”></script>

<!– <script src=”/../js/jquery-1.7.2.min.js” type=”text/javascript”></script>
<script src=”/../../js/jquery-ui-1.8.21.custom.min.js” type=”text/javascript”></script>
<script src=”/../../external/jquery.bgiframe-2.1.2.js”></script>
<script src=”/../../ui/jquery.ui.core.js”></script>
<script src=”/../../ui/jquery.ui.widget.js”></script>
<script src=”/../../ui/jquery.ui.mouse.js”></script>
<script src=”/../../ui/jquery.ui.draggable.js”></script>
<script src=”/../../ui/jquery.ui.position.js”></script>
<script src=”/../../ui/jquery.ui.dialog.js”></script>
<script src=”/../../ui/jquery.effects.core.js”></script>
<script src=”/../../ui/jquery.effects.blind.js”></script>
<script src=”/../../ui/jquery.effects.explode.js”></script>
<link rel=”stylesheet” href=”/../../css/demos.css”>
<link rel=”stylesheet” href=”/../../themes/base/jquery.ui.all.css”>
<script type=”text/javascript” src=”/../../js/util.js”></script> –>

<script type=”text/javascript”>
function startit() {
$(document).ready(function () {
var theme = getDemoTheme();

var source =
{
localdata: [
[“Alfreds Futterkiste”, “Maria Anders”, “Sales Representative”, “Obere Str. 57”, “Berlin”, “Germany”],
[“Ana Trujillo Emparedados y helados”, “Ana Trujillo”, “Owner”, “Avda. de la Constitucin 2222”, “Mxico D.F.”, “Mexico”],
[“Antonio Moreno Taquera”, “Antonio Moreno”, “Owner”, “Mataderos 2312”, “Mxico D.F.”, “Mexico”],
[“Around the Horn”, “Thomas Hardy”, “Sales Representative”, “120 Hanover Sq.”, “London”, “UK”]
],
datafields: [
{ name: ‘CompanyName’, type: ‘string’, map: ‘0’},
{ name: ‘ContactName’, type: ‘string’, map: ‘1’ },
{ name: ‘Title’, type: ‘string’, map: ‘2’ },
{ name: ‘Address’, type: ‘string’, map: ‘3’ },
{ name: ‘City’, type: ‘string’, map: ‘4’ },
{ name: ‘Country’, type: ‘string’, map: ‘5’ }
],
datatype: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
columnsresize: true,
sortable: true,
columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 150 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 130 },
{ text: ‘Contact Title’, datafield: ‘Title’, width: 100 },
{ text: ‘Address’, datafield: ‘Address’, width: 100 },
{ text: ‘City’, datafield: ‘City’, width: 100 },
{ text: ‘Country’, datafield: ‘Country’ }
]
});
});
}
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div>
</div>
<button id=”activitybylo” title=”Display list of Loan Officers and their deals” onclick=”startit()” />LOADGRID</button>
</body>
</html>
July 19, 2013 at 1:21 pm Jquery UI Dialog and jqxgrid won’t co-exist – TypeError: $.jqx is undefined – simple example attached #25497

Peter Stoev
Keymaster

Hi,

The problem is that you try to add multiple jQuery Framework references on one web page.
and jquery-1.10.1.min.js. That is wrong. You should have just one and choose whether to use 1.10.1 or 1.7.2. In both cases the jQuery library’s reference should be added as first script reference on the web page.

Best Regards,
Peter Stoev

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

July 19, 2013 at 5:16 pm Jquery UI Dialog and jqxgrid won’t co-exist – TypeError: $.jqx is undefined – simple example attached #25515

tstoneami
Member

Thank you, the error is gone – I will try and implement them both in my project today. I had good success with the modal box and found myself needing a grid.

I am now getting this error:

Error: Permission denied to access property ‘toString’.

don’t know what it is affecting yet. Any insight or warnings/advice appreciated.

Having never used two jq-based packages, I assumed there were elements in various libraries that weren’t in others so multiple declarations were required – which leads me to the question…

Can I always use newer versions of the library, and always “at the top”?

Thanks Peter (and/or anyone else who might reply). Peter – amazing how many questions you answer in here.

t
Author

Posts

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

You must be logged in to reply to this topic.