Displaying a page in a popup window

Categories PHP, Tutorials

If you take a look at Xlinesoft Marketplace you will find that many functions like login/register/rate are implemented in popup windows. This approach greatly improves usability, users do not need to leave the page they are on in order to logon. This article shows how to add such functionality to your PHPRunner or ASPRunner application.

1. Creating include file with Javascript functions

We use YUI 3 library to display modal popup windows. Since there are going to be several Javascript functions I recommend to create a myscripts.js file and put all those functions there. This file needs to be created in source subdirectory under your project directory i.e.
C:\Users\<Username>\Documents\PHPRunnerProjects\Project1\source\myscripts.js

displayPopup() is the function that actually creates the popup window a loads another page there. We will create a few wrappers for this functions, one for each specific action like login or register.

  1. function displayPopup(params)
  2. {
  3. var pageid=1;
  4. var pageObj = Runner.pages.PageManager.getById(pageid);
  5. args = {
  6. bodyContent: "<iframe frameborder='0' id='popupIframe" + pageid + "' style='width: 100%; height: 100%; border: 0;'></iframe>",
  7. footerContent: "<span>&nbsp;</span>",
  8. headerContent: params.headerContent,
  9. centered: true,
  10. render: true,
  11. width: params.width ? params.width : 450,
  12. height: params.height ? params.height : 315
  13. },
  14. afterCreateHandler = function(win) {
  15. var bodyNode = $(win.bodyNode.getDOMNode()),
  16. iframeNode = $("iframe#popupIframe" + pageid, bodyNode);
  17.  
  18. iframeNode.load(function() {
  19. if (Runner.isChrome) {
  20. bodyNode.addClass("noScrollBar");
  21. }
  22. win.show();
  23.  
  24. }).attr("src", params.url);
  25. },
  26. afterCloseHandler = params.afterClose;
  27.  
  28. if (Runner.isChrome) {
  29. $("< style type='text/css'> .yui3-widget-bd::-webkit-scrollbar {display:none;} < /style>").appendTo("head");
  30. }
  31.  
  32. Runner.pages.PageManager.createFlyWin.call(pageObj, args, true,
  33. afterCreateHandler, afterCloseHandler);
  34. }
  35.  
  36. function login()
  37. {
  38.  
  39. params = {
  40. url: 'login.php',
  41. afterClose: function(win) {
  42. win.destroy(true);
  43. },
  44. headerContent: 'Login'
  45. };
  46. displayPopup(params);
  47. }

2. Plugging it in

Including this Javascript file. In Visual Editor add the following line somewhere in the beginning of the file in HTML mode:

  1. <script src="myscripts.js" type="text/javascript"></script>

If you plan to use this functionality on multiple pages it makes sense to add this code snippet to Header file.

3. Making popup window close automatically

If you want your window to close automatically after Submit/Login/Save button is clicked you need to add the code that closes the popup. In case of Login page add this code to AfterSuccessfulLogin event, in case of Add page add this code to AfterAdd event:

PHP

  1. $_SESSION["user_id"]=$data["id"];
  2. echo '<script type="text/javascript" src="include/loadfirst.js"></script>
  3. <script>
  4. $(document).ready(function() {
  5.  
  6. $(".yui3-button-close", window.parent.document).trigger("click");
  7. $(".yui3-panel-content", window.parent.document).remove();
  8.  
  9. });
  10. </script>';
  11.  
  12. exit();

ASP

  1. Session("user_id")=data("id")
  2. Response.Write "<script type='text/javascript' src='include/loadfirst.js'></script>" & _
  3. "<script>" & _
  4. "$(document).ready(function() {" & _
  5. "$('.yui3-button-close', window.parent.document).trigger('click');" & _
  6. "$('.yui3-panel-content', window.parent.document).remove();" & _
  7. "});" & _
  8. "</script>"
  9.  
  10. Response.End

4. Displaying the popup

Now anywhere on the page we can add the following HTML code:

  1. <span id='username'><a href='#' onclick='login();'>Sign in</a></span>

Note that 'Sign in' link is wrapped by span with id 'username'. We are going to need this span later in section #5.

You can build and run your project now. User clicks 'Sign in' link, login page is open in the popup and closes itself after successful login.

While this functionality is certainly useful real life applications require more smooth user experience. For instance, after successful login we want to replace 'Sign in' link with logged user name linking to personal details page.

5. Making it useful

Now it's time to add more code to afterClose() function. In this function we will perform an AJAX call to getusername.php file and if we have a response we are going to replace the current content of 'username' span with what getusername.php file returns.

  1. function login() {
  2. params = {
  3. url: 'login.php',
  4. afterClose: function(win) {
  5. win.destroy(true);
  6. $.get("getusername.php", function(data){
  7. if (data) {
  8. $('#username').html(data);
  9. };
  10. })
  11. },
  12. headerContent: 'Login'
  13. };
  14. displayPopup(params);
  15. }

If you are familiar with jQuery you will feel right at home. For others I recommend to check what get() and html() functions do.

Now lets see what getusername.php file does. This file needs to be placed to the same source subdirectory.

PHP (getusername.php)

  1. <?php
  2. if ($_SESSION["UserName"] && $_SESSION["UserName"]!="Guest")
  3. echo "<a href='UserProfile_edit.php?editid1=".$_SESSION["user_id"]."'>"
  4. . $_SESSION["UserName"] . "";
  5. else
  6. echo "";
  7. ?>

Note that this code uses $_SESSION["user_id"] variable we have set previously in AfterSuccessfulLogin event. We need this variable to build a proper URL of user profile page. In our example the name of the login table is UserProfile. You will need to change it accordingly in your project.

ASP (getusername.asp)

  1. <%
  2. if SESSION("UserName") and SESSION["UserName"]><"Guest" then
  3. Response.Write "<a href='UserProfile_edit.asp?editid1=" & SESSION("user_id") & _
  4. "'>" & SESSION("UserName") & ""
  5. else
  6. Response.Write ""
  7. end if
  8. %>

You can see it all in action. Proceed to Slider plugin page and click 'Sign in' link at the top. Once you are logged in you can see 'Sign in' being replaced with your user name. 'Login' and 'Register' links under Reviews will be replace with 'Rate this product' link. If you made it this far you can add functionality like this to your applications as well.

Feel free to to post your questions or comments below.

 

 

15 thoughts on “Displaying a page in a popup window

  1. It is always useful to improve the usability of PHPRunner. However, one of the main reasons I have been using PHPRunner now for many years is the advantage to generate php code automatically. As I do not strive to become a real php coder, I would appreciate that this functionality could be activated by the point-and-click approach without coding javascript and making things complicated.
    Nevertheless, I just love PHPRunner!
    Gerhard

  2. Many of my users also want to interact with the applications using mobile devices. I don’t think popups work in Android Chrome, or iOS mobile browsers. So I stay with the standard add/edit/view pages.

  3. This is pretty cool! Are there other common uses for this type of modal window you can think of beyond the “login” and “register” examples shown above?

  4. @Mike,

    check Marketplace, logon, proceed to any product page and click ‘Rate this product’ link. This is an example of Add page shown in a popup window.

    In fact, any page can be displayed this way but it makes more sense for smaller, single purpose pages.

  5. We have a ERP system fully developed by using Informix and fourgen. We are in the process of migrating to WEB Development and some months back I down loaded the trail Version of phprunner to see whether how we could make use to Accelerate the conversion. We use PDO to connect to informix database. One I notice is the database connection in phprunner is defaulted to ODBC. is it possible to change to PDO.? Do you have a some kind of demo web site where we could have a look at some end product fully developed using phprunner.

  6. Yes, i support Gerhard’s argument. However, it’s good for PHPRunner to be flexible enough to allow own codes to be used. That would make applications developed using PHPRunner more extensible. However, I would like to see support for Bootstrap, jcrop and the like.

  7. @Gayash,

    I believe you submitted the same question to support and I can see it answered there. Check your email or logon to our helpdesk to find it.

  8. @John, Jatin,

    if you ask more specific questions we can definitely elaborate this tutorial. Just need to understand what exactly causes the trouble.

  9. I think this is great. I wanted to add modal pop-up windows to my PHPRunner application and this will make it much easier to do. Thank you Sergey!

  10. As a followup to my post above, you are correct, the example of the Xlinesoft.com/marketplace does work well on my Android Galaxy S3.

    Is there any way that this same type of popup could be used for the “Allow to add new records on the fly” feature in PHPRunner, which also uses a link with a sort of popup interface? This popup interface does not work in Webkit.

  11. I’m not currently using phprunner, but I would find it very useful if I could include selected pages within a website layout. e.g. I want to create a “body” div and place a phprunner page in there, and on the same page I want a “RightHandColumn” div and include a completely different page there. In much the same way that most content management systems work.

    Is this possible with phprunner?

Leave a Reply

Your email address will not be published. Required fields are marked *