How to access a button inside Window Header by id

Suite and Optimus Suite 5
#1

I am creating a new window from inside of an existing window. In the new window I’m setting the following as a header from the old window:

  winMenuOpts.window(id).setText('' Some text  -   <input type='button' id='btnShowLiveDel' value='Test' onclick='doShowLiveDel()'>")

Then in the new window’s onLoad event I’m doing the following:

  document.getElementById('btnShowLiveDel').value = 'New Test';

However it complains that document.getElementById is null. Please can you tell me how I can access the button inside the new window?

Thanks
Purvez

#2

I forgot to mention that the button itself does show up correctly with the word Test inside it.

#3

I’ve been doing some more research. Although the button does appear when I click on it it says :

Reference error: doShowLiveDel is not defined.

#4

Please, attach the whole html structure - we need to see the order of your steps.

#5

Ok I had simplified my original question. I have an ordinary html window in which all I attach is a menu. Then when users click on menus it calls the doMenuOption function which creates new window. Here is the doMenuOption:

        function doMenuOption(type,id,xsize,ysize,hdr,url,opparams,singleuser)
        {

            switch(type)
            {
                case "FRMPK":
                    winMenuOpts.window(id).show();
                    winMenuOpts.window(id).park();


                case "FRM":
                    if (winMenuOpts.isWindow(id) == true)
                    {
                        winMenuOpts.window(id).show();
                        winMenuOpts.window(id).bringToTop();
                        winMenuOpts.window(id).center();
                        mnuUser.removeItem(id);
                        if (winMenuOpts.window(id).isParked() == true)
                        {
                            winMenuOpts.window(id).park();
                        }
                    }
                    else
                    {
                        winMenuOpts.createWindow(id,20,20,xsize,ysize);
                        if (xsize == 10)
                        {
                            winMenuOpts.window(id).maximize();
                        }
                        winMenuOpts.window(id).center();
                        winMenuOpts.window(id).setText(hdr);
                        if(opparams != '')
                        {
                            winMenuOpts.window(id).attachURL(url+"/"+CurrUserID+"?"+opparams);
                        }
                        else
                        {
                            winMenuOpts.window(id).attachURL(url+"/"+CurrUserID);
                        }
                        winMenuOpts.window(id).button('minmax1').hide();
                        winMenuOpts.window(id).button('minmax1').disable();
                        winMenuOpts.window(id).denyResize();
                    }
                    break;

I use the above to create a window in which is the following code:

          tmphdr = "Adhoc Bkg costs :    -   <input type='button' name='btnShowLiveDel' value='Test' onclick='doShowLiveDel()'>";
          parent.doMenuOption('FRM','winAddEditCost',1500,600,tmphdr,'/booking_cost/addeditbkgcost','bkgcsttype='+costtype+'&bkgcstid='+modelid+'&bkgcstadultnos='+grdAdhocBkg.cells(modelid,ABAdultNos).getValue()+'&bkgcstchildnos='+grdAdhocBkg.cells(modelid,ABChildNos).getValue()+'&bkgcstparentstatusid='+tmpstatusid,'N');

This then opens another window which has the id of ‘winAddEditCost’. This window has the Header with the button showing ‘Test’. Inside this window I have the following code in the onLoad Event:

              document.getElementById('btnShowLiveDel').value = 'Show Deleted Items';

The last one then complains that document.getElementById is null

Hope this helps.

#6

Hi

Please note that in the second code window where I create the button it is showing the attribute name=‘btnShowLiveDel’. However that is because I was testing something else. I had that originally as id=‘btnShowLiveDel’ and it still didn’t work.

I have double checked this.

Thanks and sorry

#7

As you haven’t sent me the whole html structure i am compelled to propose to you other working solution:

[code]

Layout's Cell-Based Init html,body { height: 100%; margin: 0px; overflow: hidden; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_title{ top: 5px }
[/code]
#8

Darya

I’m not sure what it is you are finding difficult to understand. I have a base html document in which there is a menu attached. I have a doMenuOption function which creates new windows as necessary. If I create a new window and set it’s header to include a button with id=‘XYZ’ please can you tell me how I can access that button from inside the new window?

That is all I’m asking. How would it help to have an HTML structure?

I don’t want to create a toolbar.

Thanks

Purvez

#9

Hi Darya

It’s possible that what I’m trying to do can’t be done, in which case just please tell me that it is not possible to do and I’ll try and think of another way.

Thanks

Purvez

#10

Hi Darya

Since you wanted the whole HTML structure here it is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
       <title>Layout's Cell-Based Init</title>
        <script src="../dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
        <script src="../dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
        <script type="text/javascript" src="../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
        <link rel="stylesheet" type="text/css" href="../dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"/>
        <script src="../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
        <link rel="stylesheet" type="text/css" href="../dhtmlxWindows/codebase/dhtmlxwindows.css">
        <link rel="stylesheet" type="text/css" href="../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
       <style>
          html,body { height: 100%; margin: 0px; overflow: hidden; }
            .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_title{
                top: 5px
            }
       </style>
        <script>
            function doOnLoad(){
                dhxWins = new dhtmlXWindows();
                dhxWins.enableAutoViewport(false);
                dhxWins.attachViewportTo("parentId");
                dhxWins.setImagePath("dhtmlxWindows/codebase/imgs/");
                w1 = dhxWins.createWindow("w1", 20, 30, 800, 600);
                w1.setText("Some Text - <input type='button' id='ShowLiveDel' value='Test' onclick='doOnClick'>);
                url = 'some/url';
                w1.attachURL(url);
            }
        </script>
    </head>
    <body onload="doOnLoad()">
    <div id="parentId" style="position: relative; top: 20px; left: 80px; width: 90%; height: 90%;"></div>
    </body>
    </html>

Now in w1 I have the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
       <title>Layout's Cell-Based Init</title>
        <script src="../dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
        <script src="../dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
        <script type="text/javascript" src="../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
        <link rel="stylesheet" type="text/css" href="../dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"/>
        <script src="../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
        <link rel="stylesheet" type="text/css" href="../dhtmlxWindows/codebase/dhtmlxwindows.css">
        <link rel="stylesheet" type="text/css" href="../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
       <style>
          html,body { height: 100%; margin: 0px; overflow: hidden; }
            .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_title{
                top: 5px
            }
       </style>
        <script>
            function doOnLoad()
            {
                 document.getElementById('ShowLiveDel').value = 'New Test';
            }
            function doOnClick()
           (
                 alert('got here');
           }
        </script>
    </head>
    <body onload="doOnLoad()">
    <div id="parentId" style="position: relative; top: 20px; left: 80px; width: 90%; height: 90%;"></div>
    </body>
    </html>

When window with id = w1 opens it stops at document.getElementById(‘ShowLiveDel’).value and complains that it is null

I want to know how I can access via javascript from inside w1 the button with id=‘ShowLiveDel’?

I hope this is now completely clear.

Thanks

Purvez

#11

Here is your main html:

[code]

Layout's Cell-Based Init html,body { height: 100%; margin: 0px; overflow: hidden; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_title{ top: 5px }
[/code] Here is your attached html: [code] Layout's Cell-Based Init html,body { height: 100%; margin: 0px; overflow: hidden; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_title{ top: 5px }
[/code] Now you can get an alert.