Hello. I just updated to 4.0.1 and i got the following error cause i have included jquery-1.11.0.min.js.
Uncaught RangeError: Maximum call stack size exceeded Do you know how to fix that ? Cause when i remove jquery, my .getJSON functions are not working…
Unfortunately such error cannot be reproduced locally.
If the problem still occurs for you, please, provide with a complete demo, where the issue can be reproduced.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/auxiliary_docs__ … pport.html
Here is my js
[code]function doOnLoad() {
var layout, menu, toolbar;
dhtmlx.image_path = “codebase/imgs/”;
$.getJSON('common/json.config.php?setup=custLayout', function (data) {
//noinspection JSPotentiallyInvalidConstructorUsage
layout = new dhtmlXLayoutObject(document.body, "2E"); //initializes dhtmlxLayout
if (data[0].objPattern == "2E") {
layout.cells("a").setText(data[0].cellText); //sets the text in the header of the 'grid' column
layout.cells("b").setText(data[0].cellText_2); //sets the text in the header of the 'form' column
layout.cells("b").setHeight(200); //sets the height of the 'form' column
} else {
layout.cells("a").setText(data[0].cellText); //sets the text in the header of the 'grid' column
}
$.getJSON('common/json.config.php?setup=menu', function (data) {
menu = layout.attachMenu(); //initializes dhtmlxMenu
menu.setIconsPath(data[0].objIconPath); //sets the path to custom icons
menu.loadStruct('data/' + data[0].objXML); //loads items from the "data/menu.xml" file to the menu
$.getJSON('common/json.config.php?setup=custGridToolbar', function (data) {
toolbar = layout.attachToolbar(); //initializes dhtmlxToolbar
toolbar.setIconsPath(data[0].objIconPath); //sets the path to custom images
toolbar.loadStruct('data/toolbar.xml'); //loads items from the "data/toolbar.xml" file to the toolbar
$.getJSON('common/json.config.php?setup=grid', function (data) {
var grid = layout.cells("a").attachGrid(); //initializes dhtmlxGrid
grid.init(); //renders dhtmlxGrid on the page
grid.load('data/' + data[0].objXML); //loads data from the "/data/" to the grid
var userForm = layout.cells("b").attachForm(); //initializes dhtmlxForm
userForm.loadStruct('data/form.xml'); //loads controls, specified in the "data/form.php" file to the form
userForm.bind(grid); //binds the form to the grid
//noinspection JSPotentiallyInvalidConstructorUsage
var dpg = new dataProcessor("data/customers.php"); //inits dataProcessor
dpg.init(grid); //associates the dataProcessor instance with the grid
dpg.attachEvent("onAfterUpdate", function (sid, action, tid, tag) {
if (action == "inserted") {
grid.selectRowById(tid); //selects a row
userForm.setFocusOnFirstActive(); //sets focus to the 1st form's input
}
});
userForm.attachEvent("onButtonClick", function (id) { //attaches a handler function to the "onButtonClick" event
userForm.save(); //sends the values of the updated row to the server
});
toolbar.attachEvent("onclick", function (id) { //attaches a handler function to the "onclick" event
if (id == "newContact") { //'newContact' is the id of the button in the toolbar
var rowId = grid.uid(); //generates an unique id
var pos = grid.getRowsNum(); //gets the number of rows in the grid
grid.addRow(rowId, ["", "", ""], pos); //adds a new row to the grid. The 'addRow()' method takes 3 parameters: the row id (must be unique), the initial values of the row, the position where the new must be inserted
}
if (id == "delContact") { //'delContact' is the id of the button in the toolbar
rowId = grid.getSelectedRowId(); //gets the id of the currently selected row
var rowIndex = grid.getRowIndex(rowId); //gets the index of the row with the specified id
if (rowId != null) {
grid.deleteRow(rowId); //deletes the currently selected row
if (rowIndex != (grid.getRowsNum() - 1)) { //checks whether the currently selected row is NOT last in the grid
grid.selectRow(rowIndex + 1, true); //if the currently selected row isn't last - moves selection to the next row
} else { //otherwise, moves selection to the previous row
grid.selectRow(rowIndex - 1, true)
}
}
}
});//- grid
});//- custGridToolbar
});//- menu
});
}); //- layout
} //- doOnLoad
dhtmlxEvent(window, ‘load’, doOnLoad);[/code]
And here is my HTML
[code]<?php session_start();
if ((isset($_SESSION[‘Logged’]) && $_SESSION[‘Logged’] = 1)) {} else { header(“Location: login.php”); }
?>
<script src="codebase/dhtmlx.js" type="text/javascript"></script>
<script src="codebase/connector/connector.js" type="text/javascript"></script>
<script src="common/js/jquery.min.js" type="text/javascript"></script>
<script src="common/js/load.js" type="text/javascript"></script>
When im with this exact code, i get Uncaught TypeError: undefined is not a function for userForm.bind(grid); cause it conflicts with Jquery.
When i remove Jquery include, i get Uncaught ReferenceError: $ is not defined cause i got $.getJSON in my javascript code to load the structure variables dynamically from the db.
Any suggestions about the conflict ? or how to fix .bind
An update on the Uncaught RangeError: Maximum call stack size exceeded problem, i changed the code a bit, trying to fix the previous issue and the call stack size issue came up, as expected.
I attached the updated load.js file, so if you got any suggestions, please reply.
Thanks in advance
The extension js and txt is not allowed. - FAIL 
[code]function doOnLoad() {
var layout, menu, custGridToolbar, formToolbar, userForm, grid, rowId, dp, pos, rowIndex;
dhtmlx.image_path = “codebase/imgs/”;
$.getJSON('common/json.config.php?setup=custLayout', function (data) {
//noinspection JSPotentiallyInvalidConstructorUsage
layout = new dhtmlXLayoutObject(data[0].objName, "2E"); //initializes dhtmlxLayout
if (data[0].objPattern == "2E") {
layout.cells("a").setText(data[0].cellText); //sets the text in the header of the 'grid' column
layout.cells("b").setText(data[0].cellText_2); //sets the text in the header of the 'form' column
layout.cells("b").setHeight(250); //sets the height of the 'form' column
} else {
layout.cells("a").setText(data[0].cellText); //sets the text in the header of the 'grid' column
}
layout.progressOn();
$.getJSON('common/json.config.php?setup=menu', function (data) {
menu = layout.attachMenu(); //initializes dhtmlxMenu
menu.setIconsPath(data[0].objIconPath); //sets the path to custom icons
menu.loadStruct('data/menu.xml'); //loads items from the "data/menu.xml" file to the menu
$.getJSON('common/json.config.php?setup=custGridToolbar', function (data) {
custGridToolbar = layout.cells("a").attachToolbar(); //initializes dhtmlxToolbar
custGridToolbar.setIconsPath(data[0].objIconPath); //sets the path to custom images
custGridToolbar.loadStruct('data/toolbar.xml'); //loads items from the "data/toolbar.xml" file to the toolbar
formToolbar = layout.cells("b").attachToolbar(); //initializes dhtmlxToolbar
formToolbar.setIconsPath(data[0].objIconPath); //sets the path to custom images
formToolbar.loadStruct('data/formToolbar.xml'); //loads items from the "data/toolbar.xml" file to the toolbar
$.getJSON('common/json.config.php?setup=grid', function (data) {
grid = layout.cells("a").attachGrid(); //initializes dhtmlxGrid
grid.init(); //renders dhtmlxGrid on the page
grid.enableStableSorting(true);
grid.load("data/customers.php", doOnContentLoaded); //loads data from the "/data/" to the grid
function doOnContentLoaded() {
grid.selectRow(0, true, true, true);
layout.progressOff();
}
//noinspection JSPotentiallyInvalidConstructorUsage
dp = new dataProcessor("data/customers.php"); //inits dataProcessor
dp.init(grid); //associates the dataProcessor instance with the grid
userForm = layout.cells("b").attachForm(); //initializes dhtmlxForm
userForm.loadStruct("data/form.xml"); //loads controls, specified in the "data/form.xml" file to the form
userForm.bind(grid); //binds the form to the grid
dp.attachEvent("onAfterUpdate", function (sid, action, tid) {
if (action == "inserted") {
grid.selectRowById(tid); //selects a row
userForm.setFocusOnFirstActive(); //sets focus to the 1st form's input
}
});
formToolbar.attachEvent("onClick", function (id) { //attaches a handler function to the "onclick" event
if (id == "update") {
userForm.save(); //sends the values of the updated row to the server
}
if (id == "insert") { //'insert' is the id of the button in the toolbar
rowId = grid.uid(); //generates an unique id
pos = grid.getRowsNum(); //gets the number of rows in the grid
grid.addRow(rowId, ["", "", ""], pos); //adds a new row to the grid. The 'addRow()' method takes 3 parameters: the row id (must be unique), the initial values of the row, the position where the new must be inserted
}
if (id == "delete") { //'delContact' is the id of the button in the toolbar
rowId = grid.getSelectedRowId(); //gets the id of the currently selected row
rowIndex = grid.getRowIndex(rowId); //gets the index of the row with the specified id
if (rowId !== null) {
grid.deleteRow(rowId); //deletes the currently selected row
if (rowIndex != (grid.getRowsNum() - 1)) { //checks whether the currently selected row is NOT last in the grid
grid.selectRow(rowIndex + 1, true); //if the currently selected row isn't last - moves selection to the next row
} else { //otherwise, moves selection to the previous row
grid.selectRow(rowIndex - 1, true);
}
}
}
});
custGridToolbar.attachEvent("onClick", function (id) {
if (id == "retrieve") {
layout.progressOn();
grid.clearAndLoad("data/customers.php", function () {
grid.selectRow(rowId);
layout.progressOff();
});
}
if (id == "print") {
grid.printView();
}
});
}); //-grid
}); //- menu
});
}); //- layout
} //- doOnLoad
dhtmlxEvent(window, ‘load’, doOnLoad);[/code]
I tried to get the same code as “Contact Manager” from demo apps, as i want to make a same app, but when i change a few things, i came up with the same errors.
I dont know what is wrong. I cant find anything. Can you provide a decent support (as forum suppose to give) ??
[code]function doOnLoad() {
var layout, menu, custGridToolbar, formToolbar, grid, userForm, rowId, dp;
dhtmlx.image_path = “codebase/imgs/”;
//noinspection JSPotentiallyInvalidConstructorUsage
layout = new dhtmlXLayoutObject("custLayout", "2E");
layout.cells("a").setText("Customers");
layout.cells("b").setText("Details");
layout.cells("b").setHeight(250);
menu = layout.attachMenu();
menu.setIconsPath("codebase/imgs/");
menu.loadStruct("data/menu.xml");
custGridToolbar = layout.cells("a").attachToolbar();
custGridToolbar.setIconsPath("codebase/imgs/");
custGridToolbar.loadStruct("data/toolbar.xml");
formToolbar = layout.cells("b").attachToolbar();
formToolbar.setIconsPath("codebase/imgs/");
formToolbar.loadStruct("data/formToolbar.xml");
grid = layout.cells("a").attachGrid();
grid.enableSmartRendering(true);
//grid.init();
grid.load("data/customers.php");
//noinspection JSPotentiallyInvalidConstructorUsage
dp = new dataProcessor("data/contacts.php");
dp.init(grid);
userForm = layout.cells("b").attachForm();
userForm.loadStruct("data/form.xml");
userForm.bind(grid);
dp.attachEvent("onAfterUpdate", function (sid, action, tid) {
if (action == "inserted") {
grid.selectRowById(tid);
userForm.setFocusOnFirstActive();
}
});
formToolbar.attachEvent("onclick", function (id) {
if (id == "update") {
userForm.save();
}
if (id == "insert") {
rowId = grid.uid();
var pos = grid.getRowsNum();
grid.addRow(rowId, ["", "", ""], pos);
}
if (id == "delete") {
rowId = grid.getSelectedRowId();
var rowIndex = grid.getRowIndex(rowId);
if (rowId != null) {
grid.deleteRow(rowId);
if (rowIndex != (grid.getRowsNum() - 1)) {
grid.selectRow(rowIndex + 1, true);
} else {
grid.selectRow(rowIndex - 1, true);
}
}
}
});
}
dhtmlxEvent(window, ‘load’, doOnLoad);[/code]
Unfortunately the “Maximum call stack size” error cannot be reproduced with the provided code sample.
If the issue still occurs for you, please, provide with a complete demo, where the problem can be reproduced.
Here you can find a tutorial:
docs.dhtmlx.com/auxiliary_docs__ … pport.html
Demo (ZIP): mega.co.nz/#!YZxHiD5J!OeAVZ4f2g … JjV_3NGYec
Note: i want to give the same functions as your Contact Manager demo app.
OK. Just an update. I found that this error is because I init dataProcessor. When i remove the [i]dp.init(grid)[/i] the error is gone, but i got an Uncaught TypeError: undefined is not a function for userForm.bind(grid);
I still got not support for this. I even updated to 4.0.2 and nothing. I notice that there is no bind() function at Forms API. I dont know which version of dhtmlx.js you used for demo app, but i cant find a solution.
Stackoverflow link: http://stackoverflow.com/questions/24207535/uncaught-rangeerror-maximum-call-stack-size-exceeded
I apologize for the delay.
Referring to your attached demo:
Uncaught RangeError: Maximum call stack size exceeded
Please, try to remove the included connector.js as this library is already included in dhtmlx.js
i get Uncaught TypeError: undefined is not a function for userForm.bind(grid); cause it conflicts with Jquery.
bind() method requires the dataStore component. according to your demo you have STD version of suite. dhtmlxDataStore is not included in the standard version of dhtmlxSuite.
Regarding to your Compare to Pro Edition link dhtmlxDataProcessor is an Included component in Standard Edition but its not included in the 4.0.2 latest zip ??
OK. Can you please tell me where i can download a working version of DataProcessor, cause your documentation is not really helpfull.
I made the changes, the errors are gone, but the form is not working with the grid.
dhtmlxDataStore not dhtmlxDataProcessor. Sorry, i cannot edit my post
I even used the one in sample from your Git
but the form is not working with the grid.
dataStore component is not included in the standart version. I’ve tried your demo with the PRO version of the grid:
the error on
userForm.bind(grid);
didn’t occured.
The contact_manager demo app is with PRO version ?
Since the 4.0.3 version of dhtmlx there is a datastore component in the standard dhtmlxSuite build.
Please, try to update your dhtmlxSuite.