Displaying a page in a popup window

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.

function displayPopup(params)
{
	var pageid=1;
	var pageObj = Runner.pages.PageManager.getById(pageid);
	args = {
		bodyContent: "",
		footerContent: " ",
		headerContent: params.headerContent,
		centered: true,
		render: true,
		width: params.width ? params.width : 450,
		height: params.height ? params.height : 315
	},
	afterCreateHandler = function(win) {
		var bodyNode = $(win.bodyNode.getDOMNode()),
		iframeNode = $("iframe#popupIframe" + pageid, bodyNode);

		iframeNode.load(function() {
			if (Runner.isChrome) {
				bodyNode.addClass("noScrollBar");
			}
		win.show();	

		}).attr("src", params.url);
	},
	afterCloseHandler = params.afterClose;

if (Runner.isChrome) {
$("< style type='text/css'> .yui3-widget-bd::-webkit-scrollbar {display:none;} < /style>").appendTo("head");
}

Runner.pages.PageManager.createFlyWin.call(pageObj, args, true,
afterCreateHandler, afterCloseHandler);
}

function login()
{

params = {
		url: 'login.php',
		afterClose: function(win) {
			win.destroy(true);
			},
		headerContent: 'Login'
};
displayPopup(params);
}

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:

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

$_SESSION["user_id"]=$data["id"];
echo '
';

exit();

ASP

Session("user_id")=data("id")
Response.Write "" & _
""

Response.End

4. Displaying the popup

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

Sign in

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.

function login() {
params = {
		url: 'login.php',
		afterClose: function(win) {
			win.destroy(true);
			$.get("getusername.php", function(data){
			if (data) {
				$('#username').html(data);
			};
			})
			},
		headerContent: 'Login'
};
displayPopup(params);
}

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)

"
        . $_SESSION["UserName"] . "";
else
echo "";
?>

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)

<%
if SESSION("UserName") and SESSION["UserName"]><"Guest" then
    Response.Write "" & SESSION("UserName") & ""
else
    Response.Write ""
end if
%>

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.