Load content

7 Sep 20172 minutes to read

BY default, the content inside the Dialog element is considered as the content for the Dialog component.

Also, we can render the Dialog component’s content through the following ways.

1. request through AJAX

2. request iframe content

3. request image content

This settings can be specified through contentType property.

JAVASCRIPT

<ej-dialog id="basicDialog" title="Dialog" contentUrl="app\components\dialog\test.html" contentType="ajax" 
    [(allowKeyboardNavigation)]="keyboard" containment="#parent">
    </ej-dialog>

Here below the content of that HTML file.

HTML

<div id="content">
        This content is loaded via AJAX request.
    </div>

We can handle the AJAX request’s success and failures through the events “ajaxSuccess” and “ajaxError” events respectively. See also ajaxSuccess and ajaxError

The previous example is modified as below to handle the success and failure events.

JAVASCRIPT

<ej-dialog id="basicDialog" title="Dialog" contentUrl="app\components\dialog\test.html" contentType="ajax" 
    containment="#parent" (ajaxSuccess)="onSuccess($event)" (ajaxError)="onError($event)">
    </ej-dialog>

Add the following code in typescript file.

JAVASCRIPT

onSuccess(event) {
            //handle success event
                    }

	onError(event) {
            //handle Error event
                   }

NOTE

The same way we can render the iframe and image content for the Dialog component by specifying the contentType as “iframe” and “image” respectively and also by specifying the proper location in the contentUrl property.