AJAX Content

A modal content load over AJAX request

ajax content type is when you need to load content over ajax. When content type is ajax, a section of parameters named body.ajaxParams can be used. There are all the supported ajaxParams as TypeScript interface -

interface AjaxParams {
    url: string,
    method: string,
    headers?: object,
    transformHtml?: Function | string | null,
    transformJson?: Function | string | null,
    contentDataType?: "html" | "json",
    timeoutMs: number,
    data: FormData | object | null,
    decodeParams?: boolean,
}

• The url is absolutely required.
• The method can be any http method, if left empty defaults to GET.
• headers is a plain object with header name as key and header content as value.
• contentDataType is either html or json, default is html. This determines how the system treats the ajax response format.
• timeoutMs is AJAX timeout in milliseconds.
• transformHtml is an optional function or global function name, that can take the response html and modify it. You can use it if you need to change the ajax response html before showing it in the modal.
• transformJson is absolutely required, when contentDataType is JSON. You are not going to display the JSON string as text in the modal right?
• data can be a plain object or FormData object if provided.
• decodeParams is for GET request params decoding. Normally not needed, but in some cases you might be forced to remove url params decoding. it is turned off by default.

HTML content via GET request

Here we will load an HTML login form ...

ModalManager.instance.addModal({
    body : {
        contentType : 'ajax',
        ajaxParams : {
            url : '/ajax/login-form.php',
            data : {
                email : 'someone@somesite.net'
            },
            onShow : function() {

                document.getElementById('login-email')?.focus();

            }
        }
    }
});

JSON content via POST request

Here we are going to load some dummy users data via POST method. Source: https://jsonplaceholder.typicode.com/users

We are loading data as JSON, then we are using transformJson method to generate html markup for the users list. This is the reason transformJson function is required for jsoncontent data type!

ModalManager.instance.addModal({
    body : {
        contentType: 'ajax',
        ajaxParams:  {
            url : '/ajax/user-data.php',
            method : 'POST',
            contentDataType: 'json',
            transformJson : function(data) {

                let markup = [`<div class="table-container"><table class="table table-striped">`];

                if(Array.isArray(data)) {

                    if(data.length === 0) {
                        markup.push(`<tbody><tr><td class="text-center">No user found!</td></tr></tbody>`);
                    } else {

                        markup.push(`<thead><tr><th>Name</th><th>Email</th><th>Company</th></tr></thead>`);

                        markup.push('<tbody>');

                        data.forEach(function (user) {

                            markup.push(`<tr>
<td>${user.name}</td>
<td>${user.email}</td>
<td>${user.company?.name}</td>
</tr>`);

                        });

                        markup.push('</tbody>');

                    }

                }

                markup.push(`</table></div>`);

                return markup.join('');

            }
        }
    }
});

Ajax Form Data Submission

Here we are going to do AJAX form submission and display thank you message. We will use a FormData object to link a form's data to AJAX call. File upload using FormData is not supported yet!

document.getElementById('test-form')?.addEventListener('submit', (e) => {
        
    e.preventDefault();

        let formData = new FormData(e.target);

        ModalManager.instance.addModal({
            body: {
                contentType: 'ajax',
                ajaxParams: {
                    url: '/ajax/ajax-form-submission.php',
                    method: 'POST',
                    contentDataType: 'html',
                    data : formData
                }
            }
        });

    });

lets use this form -

<form id="test-form">

    <h2>Test Form</h2>

    <div class="mb-3">
        <label for="form-name" class="form-label">Name <em class="required"></em></label>
        <input id="form-name" type="text" name="name" class="form-control">
    </div>

    <div class="mb-3">
        <label for="form-email" class="form-label">Email <em class="required"></em></label>
        <input id="form-email" type="text" name="email" class="form-control">
    </div>

    <div class="mb-3">
        <button type="submit" class="btn btn-success">
            Submit <i class="fa fa-fw fa-chevron-right"></i>
        </button>
    </div>
</form>