Getting Started

This section explains briefly about how to create a WaitingPopup in your application with PHP.
WaitingPopup provides support to display a WaitingPopup within your web page. From the following guidelines, you can learn how to create a WaitingPopup in a real-time login page authentication scenario.

The following screenshot illustrates the functionality of a WaitingPopup with login page scenario.

You can give the Username and Password in the login page. When you click the Login button, you get the WaitingPopup. After loading, the alert box pops up with the message “Signed in successfully”.

The external script dependencies of the WaitingPopup widget is,

And the internal script dependencies of the WaitingPopup widget are:

File  Description / Usage
ej.core.min.js Must be referred always before using all the JS controls.
ej.waitingpopup.min.js The waitingpopup’s main file

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.

For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Preparing HTML document

You can create a PHP Project and add necessary scripts and styles with the help of the given PHP Getting Started Documentation.

Create a first PHP file in Xampp and name it appropriately with .php extension and also place it under the newly created sample folder. For example, say Index.php with the initial code as shown below -

Refer the required scripts and CSS files in your PHP page as mentioned below in order to render the WaitingPopup control -

  • html
  • <!DOCTYPE html>
           <html>
            <head>
                    <title>Getting Started - WaitingPopup</title>
                    <link href="http://cdn.syncfusion.com/18.3.0.47/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
                    <link href="http://cdn.syncfusion.com/18.3.0.47/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
                    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
                    <script src="http://cdn.syncfusion.com/18.3.0.47/js/web/ej.web.all.min.js"></script>
            </head>
            <body>
               <?php require_once 'EJ/AutoLoad.php'; ?>
            </body>
        </html>

    Create a WaitingPopup

    WaitingPopup widget basically renders built-in features like blocking the other actions until the page is loaded.

    The Tab can be created in PHP by using the below given code.

  • html
  • <div id="targetElement">
       <table class="loginTable">
          <tr>
             <td>Username</td>
             <td><input type="text"/></td>
          </tr>
          <tr>
             <td>Password</td>
             <td><input type="password"/></td>
          </tr>
          <tr>
             <td></td>
             <td><button id="target">Login</button></td>
          </tr>
       </table>
        <?php
            $waitingpopup =new EJ\WaitingPopup('popup');
            echo $waitingpopup->showOnInit(false)->target("#targetElements")->appendTo('body')->render();
        ?>
    </div>

    Initialize Click function using the following code example.

  • html
  • <?php
            $waitingpopup =new EJ\WaitingPopup('popup');
            echo $waitingpopup->showOnInit(false)->target("#targetElements")->appendTo('body')->render();
    		echo('<script>$(function(){$("#target").click(function () {
               /*Add waiting popup*/
            });
    		});</script>');
            ?>

    Apply the following styles to show the WaitingPopup.

  • css
  • <style type="text/css" class="cssStyles">
       #targetElement {
           width: 500px;
           height: 200px;
           margin: 50px;
           border: 1px solid #dbdcdb;
       }
       .loginTable {
           margin: 60px auto;
       }
       #popup_WaitingPopup .e-image {
           display: block;
           height: 70px;
       }
    </style>

    The following screenshot displays a User login.

    Add WaitingPopup Widget

    In a real-time login page scenario, when you click the Login button, the WaitingPopup is displayed.

  • html
  • <?php
            $waitingpopup =new EJ\WaitingPopup('popup');
            echo $waitingpopup->showOnInit(false)->target("#targetElements")->appendTo('body')->render();
    		echo('<script>$(function(){$("#target").click(function () {
                var obj = $("#popup").ejWaitingPopup("instance");
                    obj.option({showOnInit: true});
                function success() {
                    var obj = $("#popup").data("ejWaitingPopup");
                    alert("Signed in successfully");
                    obj.hide();
                }
                setTimeout(success, 5000);
            });
    		});</script>');
        ?>

    The following screenshot shows the output of the above code example.