Start Building Professional
Web Apps Today

dhtmlxwindow closes after display

I had a set of HTML pages containing a grid with a context menu and a button in the header. The entries in the grid's context menu caused a dhmtlxwindow to be displayed for entering data. The button in the header also did the same thing (needed when there are no entries in the grid because the context menu is not available).

I changed the HTML pages to JSP files to add some server side processing. The client side JavaScript did not change. Now the window displayed by clicking the button in the grid header is displayed briefly then goes away. The window displayed by making a selection from the grid controls context menu works just fine.

Why does the code work in the context menu but not for the button? I even called the same function used for the onclick action in the context menu and it worked there.

One other symptom is that once the dhtmlxwindow disappears the browser is somehow redirected to the root of the web application so that the welcome-file page defined in web.xml is displayed.

This happens with both IE 6 and 7 and FF 3. I'm using Tomcat 6.0.

wins initialization code:

theWins = new dhtmlXWindows();
theWins.enableAutoViewport(true);
theWins.setImagePath("./codebase/imgs/");

the function for the onclick function:

function gridAddRowViaButton() {
var itemType = "Person";
var win=theWins.createWindow("edit_grid",0,0,400,250);
    win.setModal(true);
    win.button("park").hide();
    win.button("minmax1").hide();
    win.setText("Add " + itemType);
win.attachURL("Process.html?itemType=" + encodeURIComponent(itemType) + "&action=insertRowAtEnd&rowId=" + encodeURIComponent("not specified"));
    win.center();
}

The grid header is set as follows:

theGrid.setHeader("<img src='./codebase/imgs/" + iconFileName + "'>  " + column0 + ",<span class='buttonHeaderLeft'>Description" +
"<a href='#' onclick='gridAddRowViaButton()'><img src='images/" + addBtnFileName + "' title='Add new " + column0 + "' alt='Add new " + column0 + "' hspace=10></a></span>,#cspan");

Here is the context menu handler function:

function handleGridContextMenu(menuItemId, gridItemId) {
var splitData = gridItemId.split("_");
var rowId = splitData[0];
var rowIndex = theGrid.getRowIndex(rowId);
var itemType = theGrid.getUserData(rowId,"Item Type");
switch(menuItemId) {
case "insertBefore":
    var win=theWins.createWindow("edit_grid",0,0,400,250);
    win.setModal(true);
win.button("park").hide();
win.button("minmax1").hide();
    win.setText("Add " + itemType);
    win.attachURL("./Process.html?itemType=" + encodeURIComponent(itemType) + "&action=insertBefore&rowId=" + encodeURIComponent(rowId));
        win.center(); // This works
break;
case "insertAfter":
/*
            var win=theWins.createWindow("edit_grid",0,0,400,250);
            win.setModal(true);
win.button("park").hide();
win.button("minmax1").hide();
            win.setText("Add " + itemType);
            win.attachURL("./Process.html?itemType=" + encodeURIComponent(itemType) + "&action=insertAfter&rowId=" + encodeURIComponent(rowId));
            win.center();
            */
            gridAddRowViaButton(); // This works here.
break;
default:
}
}

Commenting out various window option setting lines in gridAddRowViaButton did not help. Replacing Process.html with a simple hello world page didn't fix the problem either.

Paul

The behavior is quite strange. According to your description there must not be any problems. 
Problem may be caused by placing button inside grids header - it triggers in grid actions ( such as sorting ) which may have some side effect. 
You can try to change code in next way. 

theGrid.setHeader("<img src='./codebase/imgs/" + iconFileName + "'> " + column0 + ",<span class='buttonHeaderLeft'>Description" + 
"<a href='#' onclick='gridAddRowViaButton2(arguments[0]||event)'><img src='images/" + addBtnFileName + "' title='Add new " + column0 + "' alt='Add new " + column0 + "' hspace=10></a></span>,#cspan");

function gridAddRowViaButton2(e){ 
    e.cancelBubble=true;
    return gridAddRowViaButton();
};

with such code click on button will be isolated from other grid functionality and must not cause any side effects.

It looks like the problem occurs when the base HTML tag is included in the head tag for the page.  I'm working on a small test case which I will email to support.

Paul

The problem was caused by combination of <base> tag and using href attribute as <a href='#' as wrapper for button
The issue can be resolved by removing base tag, or by changing link to safe form, as <a href='javascript:{}'

I got it working but not the way you suggested. 

Changing the href to a null function link (href='javascript:{}' allows the window to be displayed in the center of the page but its content is empty.  That is all I see is the window frame and the title bar.  It doesn't matter if the base tag is there or not, the window is empty.

I ended up removing the onclick attribute and changing the href value to href='javascript={gridAddRowViaButton()}'.  This displays the window with its content (fields and text) properly and the base tag set.

Paul