How to keep dhx window hidden until content is loaded?

Suite and Optimus Suite 6
#1

I want to show a dialog window that contains a dhx form, where the form data comes from a remote source.
So I want to show ajax scroller while fetching the data and display nothing until the form is created in the window and then make the window visible.

Currently I am using the code below to achieve this - is this the best approach or is there a better way?

    //Code here to build dhxWindowObj, a window object that one div for html content as below
    //<div> id='divOpen'></div>

    ShowAjaxScroller();

    //Code here to fetch and build form_data that will be used further down

    dhxWindow.events.on("afterShow", function() {

        //Keep the window and it's overlay hidden until all content is loaded                     
        dhxWindow.getContainer().style.visibility = "hidden";
        $('.dhx_window__overlay').css("visibility", "hidden");
        
        //Wait for the window with it's div to be created
        dhx.awaitRedraw().then(() => {

	//Build form in the window
            //It is only after 'awaitRedraw' that 'divOpen' is available
            var dhxForm = new dhx.Form('divOpen', form_data);
           
           //Finally show the window
           dhxWindowObj.getContainer().style.visibility = "visible";
           $('.dhx_window__overlay').css("visibility", "visible");
        
           HideAjaxScroller();

        })

    });

    dhxWindowObj.show();
#2

If I understand correctly, you mean to say that the configuration for the form is being loaded through an AJAX call, but you want the window to display and indicate that the form is loading. Is that correct?

If so, you could create the window and do an attachHTML() to set your loading screen. Then create the form after the data is received and attach it to the window, thereby replacing the previous content of the window. In this snippet, the ajax call is simulated through a setTimeout(), but the concept would be similar.

#3

Actually I don’t want to show any part of the window until it is fully loaded (which is what my code does) but you gave me an idea to use attach, so rather than creating the form into a container like I was doing:

var dhxForm new dhx.Form(container, form_data);

I can just use this:

///Show ajax scroller
//build form
win.attach(form);
wind.show();
//Hide Ajax Scroller
#4

Yeah, that situation makes it even easier. You can create the form with NULL for the container argument, and then attach it to the window. Nothing will show until you call win.show().