{"id":722,"date":"2013-04-25T18:02:30","date_gmt":"2013-04-25T23:02:30","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=722"},"modified":"2013-04-29T23:20:21","modified_gmt":"2013-04-30T04:20:21","slug":"displaying-a-page-in-a-popup-window","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2013\/04\/25\/displaying-a-page-in-a-popup-window\/","title":{"rendered":"Displaying a page in a popup window"},"content":{"rendered":"<p>If you take a look at\u00a0<a href=\"https:\/\/xlinesoft.com\/marketplace\">Xlinesoft Marketplace<\/a> 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-740\" title=\"login_in_popup\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/04\/login_in_popup1.png\" alt=\"\" width=\"655\" height=\"413\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/04\/login_in_popup1.png 655w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/04\/login_in_popup1-300x189.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/04\/login_in_popup1-150x94.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2013\/04\/login_in_popup1-400x252.png 400w\" sizes=\"auto, (max-width: 655px) 100vw, 655px\" \/><\/p>\n<p><!--more--><\/p>\n<h3>1. Creating include file with Javascript functions<\/h3>\n<p>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 <em>source<\/em> subdirectory under your project directory i.e.<br \/>\n<em>C:\\Users\\&lt;Username&gt;\\Documents\\PHPRunnerProjects\\Project1\\source\\myscripts.js<\/em><\/p>\n<p><em>displayPopup()<\/em> 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.<\/p>\n<pre lang=\"javascript\">function displayPopup(params)\r\n{\r\n\tvar pageid=1;\r\n\tvar pageObj = Runner.pages.PageManager.getById(pageid);\r\n\targs = {\r\n\t\tbodyContent: \"<iframe frameborder='0' id='popupIframe\" + pageid + \"' style='width: 100%; height: 100%; border: 0;'><\/iframe>\",\r\n\t\tfooterContent: \"<span>&nbsp;<\/span>\",\r\n\t\theaderContent: params.headerContent,\r\n\t\tcentered: true,\r\n\t\trender: true,\r\n\t\twidth: params.width ? params.width : 450,\r\n\t\theight: params.height ? params.height : 315\r\n\t},\r\n\tafterCreateHandler = function(win) {\r\n\t\tvar bodyNode = $(win.bodyNode.getDOMNode()),\r\n\t\tiframeNode = $(\"iframe#popupIframe\" + pageid, bodyNode);\r\n\r\n\t\tiframeNode.load(function() {\r\n\t\t\tif (Runner.isChrome) {\r\n\t\t\t\tbodyNode.addClass(\"noScrollBar\");\r\n\t\t\t}\r\n\t\twin.show();\t\r\n\r\n\t\t}).attr(\"src\", params.url);\r\n\t},\r\n\tafterCloseHandler = params.afterClose;\r\n\r\nif (Runner.isChrome) {\r\n$(\"< style type='text\/css'> .yui3-widget-bd::-webkit-scrollbar {display:none;} < \/style>\").appendTo(\"head\");\r\n}\r\n\r\nRunner.pages.PageManager.createFlyWin.call(pageObj, args, true,\r\nafterCreateHandler, afterCloseHandler);\r\n}\r\n\r\nfunction login()\r\n{\r\n\r\nparams = {\r\n\t\turl: 'login.php',\r\n\t\tafterClose: function(win) {\r\n\t\t\twin.destroy(true);\r\n\t\t\t},\r\n\t\theaderContent: 'Login'\r\n};\r\ndisplayPopup(params);\r\n}<\/pre>\n<h3>2. Plugging it in<\/h3>\n<p>Including this Javascript file. In Visual Editor add the following line somewhere in the beginning of the file in HTML mode:<\/p>\n<pre lang=\"javascript\"><script src=\"myscripts.js\" type=\"text\/javascript\"><\/script><\/pre>\n<p>If you plan to use this functionality on multiple pages it makes sense to add this code snippet to Header file.<\/p>\n<h3>3. Making popup window close automatically<\/h3>\n<p>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:<\/p>\n<p>PHP<\/p>\n<pre lang=\"php\">$_SESSION[\"user_id\"]=$data[\"id\"];\r\necho '<script type=\"text\/javascript\" src=\"include\/loadfirst.js\"><\/script>\r\n<script>\r\n$(document).ready(function() {\r\n\r\n$(\".yui3-button-close\", window.parent.document).trigger(\"click\");\r\n$(\".yui3-panel-content\", window.parent.document).remove();\r\n\r\n});\r\n<\/script>';\r\n\r\nexit();<\/pre>\n<p>ASP<\/p>\n<pre lang=\"asp\">Session(\"user_id\")=data(\"id\")\r\nResponse.Write \"<script type='text\/javascript' src='include\/loadfirst.js'><\/script>\" & _\r\n\"<script>\" & _\r\n\"$(document).ready(function() {\" & _\r\n\"$('.yui3-button-close', window.parent.document).trigger('click');\" & _\r\n\"$('.yui3-panel-content', window.parent.document).remove();\" & _\r\n\"});\" & _\r\n\"<\/script>\"\r\n\r\nResponse.End<\/pre>\n<h3>4. Displaying the popup<\/h3>\n<p>Now anywhere on the page we can add the following HTML code:<\/p>\n<pre lang=\"javascript\"><span id='username'><a href='#' onclick='login();'>Sign in<\/a><\/span><\/pre>\n<p>Note that &#8216;Sign in&#8217; link is wrapped by span with id <em>&#8216;username&#8217;<\/em>. We are going to need this span later in section #5.<\/p>\n<p>You can build and run your project now. User clicks &#8216;Sign in&#8217; link, login page is open in the popup and closes itself after successful login.<\/p>\n<p>While this functionality is certainly useful real life applications require more smooth user experience. For instance, after successful login we want to replace &#8216;Sign in&#8217; link with logged user name linking to personal details page.<\/p>\n<h3>5. Making it useful<\/h3>\n<p>Now it&#8217;s time to add more code to afterClose() function. In this function we will perform an AJAX call to <em>getusername.php<\/em> file and if we have a response we are going to replace the current content of <em>&#8216;username&#8217;<\/em> span with what <em>getusername.php<\/em> file returns.<\/p>\n<pre lang=\"javascript\">function login() {\r\nparams = {\r\n\t\turl: 'login.php',\r\n\t\tafterClose: function(win) {\r\n\t\t\twin.destroy(true);\r\n\t\t\t$.get(\"getusername.php\", function(data){\r\n\t\t\tif (data) {\r\n\t\t\t\t$('#username').html(data);\r\n\t\t\t};\r\n\t\t\t})\r\n\t\t\t},\r\n\t\theaderContent: 'Login'\r\n};\r\ndisplayPopup(params);\r\n}<\/pre>\n<p>If you are familiar with jQuery you will feel right at home. For others I recommend to check what <a href=\"http:\/\/api.jquery.com\/get\/\">get()<\/a> and <a href=\"http:\/\/api.jquery.com\/html\/\">html()<\/a> functions do.<\/p>\n<p>Now lets see what <em>getusername.php<\/em> file does. This file needs to be placed to the same <em>source<\/em> subdirectory.<\/p>\n<p>PHP (getusername.php)<\/p>\n<pre lang=\"php\"><?php\r\nsession_start();\r\nif ($_SESSION[\"UserName\"] &#038;&#038; $_SESSION[\"UserName\"]!=\"Guest\")\r\necho \"<a href='UserProfile_edit.php?editid1=\".$_SESSION[\"user_id\"].\"'>\"\r\n        . $_SESSION[\"UserName\"] . \"\";\r\nelse\r\necho \"\";\r\n?><\/pre>\n<p>Note that this code uses\u00a0$_SESSION[&#8220;user_id&#8221;] 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.<\/p>\n<p>ASP (getusername.asp)<\/p>\n<pre lang=\"asp\"><%\r\nif SESSION(\"UserName\") and SESSION[\"UserName\"]><\"Guest\" then\r\n    Response.Write \"<a href='UserProfile_edit.asp?editid1=\" &#038; SESSION(\"user_id\") &#038; _\r\n          \"'>\" & SESSION(\"UserName\") & \"\"\r\nelse\r\n    Response.Write \"\"\r\nend if\r\n%><\/pre>\n<p>You can see it all in action. Proceed to <a href=\"https:\/\/xlinesoft.com\/marketplace\/products_view.php?editid1=6\">Slider plugin<\/a> page and click &#8216;Sign in&#8217; link at the top. Once you are logged in you can see &#8216;Sign in&#8217; being replaced with your user name. &#8216;Login&#8217; and &#8216;Register&#8217; links under <strong>Reviews<\/strong> will be replace with &#8216;<a>Rate this product&#8217; link. If you made it this far you can add functionality like this to your applications as well. <\/a><\/p>\n<p>Feel free to to post your questions or comments below.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you take a look at\u00a0Xlinesoft 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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[],"class_list":["post-722","post","type-post","status-publish","format-standard","hentry","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=722"}],"version-history":[{"count":61,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/722\/revisions"}],"predecessor-version":[{"id":786,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/722\/revisions\/786"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}