Loading Form controls via ajax.get not working - Suite 8

Suite and Optimus
#1

Hi I’m trying to build a function that creates a modal window and attaches a form to it dynamically, so I can just call it when ever I need a modal with a form attached.

The issue is that I cant get form controls loaded via the dhx.ajax.get() function

function newFormWindow(formName,width,height,icon,title,_url){
    var win     = formName+"Window";
    var form    = formName+"Form";

    if (this[win]) {
        this[win].destructor();
    }

    this[win] = new dhx.Window({
            title: title,
            width: width,
            height: height,            
            modal: true,
            resizable: false,
            movable: false,
            icon: icon,
            css: win
        });

    this[win].show();

    dhx.ajax.get("/data/forms/test.json").then(function (data) {
        this[form] = new dhx.Form(this[win], data)
        this[win].attach(this[form]);
        this[form].show();
        this[form].events.on("click", function(name, event) {
            console.log(name, event);
        });    
    });
}

The modal window loads and the form HTML div is inserted into it but no controls are added to the form.

Below is the JSON contained in the test.json file

[{
        "type": "input",
        "label": "User Name:",
        "labelPosition": "left",
        "required": true,
        "css": "username",
        "name": "username"
    },
    {
        "type": "input",
        "align": "right",
        "inputType": "password",
        "label": "Password:",
        "labelPosition": "left",
        "required": true,
        "css": "password",
        "name": "password"
    },
    {
        "type": "button",
        "id": "loginbutton",
        "name": "loginbutton",
        "text": "login",
        "size": "medium",
        "view": "flat",
        "position": "right",
        "submit": true,
        "color": "primary",
        "css": "loginButton"
    }]

PLEASE HELP :sob: Any ideas ???

#2

if you’re attaching a dhtmlx component to a dhtmlx cell (layout/win/tabbar…) you should not define a container for this component in its constructor and use null instead:
this[form] = new dhx.Form(null, data)

#3

@sematik - I tried your suggestion but It didn’t work.
I get no errors and no form in the modal window.

All i see in the html is this…

<div class="dhx_widget dhx_layout dhx_layout-columns undefined dhx_form" style="width: 100%; height: 100%; flex: 1 1 auto; padding: 8px;" role="form"></div>

I noticed that there is an “undefined” in the class section… has that something to do with it…?

#4

I just did a test in Code Snippets without dhx.ajax.get() and it does the same thing…

https://snippet.dhtmlx.com/4kae544r

#5

The controls layout was not defined in your form config:
https://snippet.dhtmlx.com/4whcxe9q

BUG in DHTMLX generated css for Forms
#6

sorry about that :crazy_face:

now when moving the formData object to an external file and using dhx.ajax.get() again
I needed to put double quotes around the word "rows": for it to work.

Thank you @sematik

1 Like
#7

Ok… This is getting into the realms of craziness…
For those reading along you must not forget to,

SET THE Content-Type in the header before you output your JSON if working with PHP

header('Content-Type: application/json; charset=utf-8');

Arrrrrrrggggg, cant believe it took so long to remember something so simple.
Version 4 & 5 worked fine with output of JSON as a string but not 8.

Maybe this little titbit of information could be added to the docs somewhere :hot_face: :crazy_face: :woozy_face: