ejWaitingPopup

3 Aug 201817 minutes to read

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
    destroy(args){
    }
 }

ejWaitingPopup

Requires

Members

cssClass string

Default Value

Example

htmlAttributes object

Default Value

Example

showImage boolean

Default Value

Example

showOnInit boolean

Default Value

Example

target string

Default Value

Example

appendTo string

Default Value

Example

template object

Default Value

Example

text string

Default Value

Example

Methods

hide()

Example

refresh()

Example

show()

Example

Events

create

Example

destroy

Example

cssClass `string`

htmlAttributes `object`

showImage `boolean`

showOnInit `boolean`

target `string`

appendTo `string`

template `object`

text `string`