ejWaitingPopup

The WaitingPopup control for JavaScript is a visual element that provides support for displaying a pop-up indicator over a target area and preventing the end user’s interaction with the target area while loading.

Requires

  • module:jQuery

  • module:jquery.easing.1.3.js

  • module:ej.core.js

  • module:ej.waitingpopup.js

Members

cssClass string

Sets the root class for the WaitingPopup control theme

Default Value

  • null

Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" cssClass="gradient" appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
     }

    The css must be placed in stylesheet.

  • html
  • <style>
    .gradient{
        border: 10px solid grey;
    }
    </style>

    htmlAttributes object

    Specifies the list of HTML attributes to be added to waitingpopup control.

    Default Value

    • {}

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [htmlAttributes]="attributes" appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        attributes: any;
        constructor() {
        this.attributes={"aria-label":"waitingpopup"};
        }
     }

    showImage boolean

    Enables or disables the default loading icon.

    Default Value

    • true

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
     }

    showOnInit boolean

    Enables the visibility of the WaitingPopup control

    Default Value

    • false

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
     }

    target string

    Specified a selector for elements, within the container.

    Default Value

    • null

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
     }

    appendTo string

    Waitingpopup element append to given container element.

    Default Value

    • null

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
     }

    template object

    Loads HTML content inside the popup panel instead of the default icon

    Default Value

    • null

    Example

  • html
  • <div id="waiting_template_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" appendTo="#parent" [showOnInit]="true" (create)="onCreate($event)">
    
            </ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div> 
    <div id="content">
            <div class="block">
                <div class="logo"></div>
                <div class="txt">
                    <p>Create cutting-edge </p>
                    <p><b>HTML5</b> web applications </p>
                    <p>with ease </p>
                </div>
            </div>
            <div class="loader"></div>
        </div>
     </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './template.component.html',
      styleUrls: ['./default.component.css']
    })
    export class TemplateComponent {
        onCreate(event) {
           let obj = jQuery('#target').data('ejWaitingPopup');
           obj.setModel({template: $('#content')});
        }
    }

    text string

    Sets the custom text in the pop-up panel to notify the waiting process

    Default Value

    • null

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
     }

    Methods

    hide()

    To hide the waiting popup

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Hide</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        OnClick(){
            var obj = $("#target").data("ejWaitingPopup");
    
    
    obj.hide();
        }
     }
  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Hide</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        OnClick(){
    
    
    $("#target").ejWaitingPopup('hide');
        }
     }

    refresh()

    Refreshes the WaitingPopup control by resetting the pop-up panel position and content position

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">refresh</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        OnClick(){
            var obj = $("#target").data("ejWaitingPopup");
    
    
    obj.refresh();
        }
     }
  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Refresh</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        OnClick(){
    
    
    $("#target").ejWaitingPopup('refresh');
        }
     }

    show()

    To show the waiting popup

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Show</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        OnClick(){
            var obj = $("#target").data("ejWaitingPopup");
    
    
    obj.show();
        }
     }
  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" [showImage]=false appendTo="#parent" [showOnInit]="true" ></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Show</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        OnClick(){
    
    
    $("#target").ejWaitingPopup('show');
        }
     }

    Events

    create

    Fires after Create WaitingPopup successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the WaitingPopup model
    type string returns the name of the event

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" appendTo="#parent" [showOnInit]="true" (create)="create($event)"></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
    <button type="button" (click)="OnClick()"  style="margin-left: 35%;">Show</button>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        create(args){
        }
     }

    destroy

    Fires after Destroy WaitingPopup successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the WaitingPopup model
    type string returns the name of the event

    Example

  • html
  • <div id="waiting_controls" style="margin-left: 25%;">
     <div class="content-container-fluid">
      <div class="row">
       <div class="cols-sample-area"> 
       <div id="parent">
    
    <ej-waitingpopup id="target" target="#parent" appendTo="#parent" [showOnInit]="true" (destroy)="destroy($event)"></ej-waitingpopup>  
    </div>
    </div>
    </div>
    </div>
    </div>
  • ts
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: './default.component.html'
    })
    export class DefaultComponent {
        destroy(args){
        }
     }