More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • form | John Chacko

    How to embed and iframe with form in a jQueryMobile popup.
    I noticed there is an issue with closing popup once form in iframe is submitted.
    The issue is because jQueryMobile is depending on ‘window.history.back();’ for closing popups if $.mobile.ajaxEnabled is true.

    Below sample is a solution for that.

    jqm_popup_iframe_form.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     <title>jQueryMobile popup and iframe form</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
      <style> 
      </style>
     <script>
       function myOpenPopup() {
     		runtimePopup("<iframe src='jqm_popup_form.html' width='0' height='0' " +
    			"style='border: 0px; margin: 0px; padding: 0px;'></iframe>", closePopUp);
     	}
    
    	function closePopUp() {
    		$(".messagePopup").popup("close");
    	}
    	
    	function runtimePopup(markup, popupafterclose) {
    		var template = "<div data-role='popup' class='messagePopup'><span> " + markup + " </span> </div>";
    
     		popupafterclose = popupafterclose ? popupafterclose : function () { };
    
     		$.mobile.ajaxEnabled = false;
     		$.mobile.activePage.append(template).trigger("create");
    
     		$.mobile.activePage.find(".messagePopup").on({ 
     			popupbeforeposition: function () {
     				var size = scale(497, 298, 15, 1),
                    w = size.width,
                    h = size.height;
    
     				$(this).find("iframe")
                    .attr("width", w)
                    .attr("height", h);
     			},
     			popupafterclose: function () {
     				$(this).find("iframe")
                    .attr("width", 0)
                    .attr("height", 0);
     			}
     		});
    		 
    
     		$.mobile.activePage.find(".messagePopup").popup().popup("open").bind({
     			popupafterclose: function () {
     				$(this).unbind("popupafterclose").remove();
     				popupafterclose(); 
     				$.mobile.ajaxEnabled = true;
     			}  
     		});
     	}
    
    
     	function scale(width, height, padding, border) {
     		var scrWidth = $(window).width() - 30,
    			scrHeight = $(window).height() - 30,
    			ifrPadding = 2 * padding,
    			ifrBorder = 2 * border,
    			ifrWidth = width + ifrPadding + ifrBorder,
    			ifrHeight = height + ifrPadding + ifrBorder,
    			h, w;
    
     		if (ifrWidth < scrWidth && ifrHeight < scrHeight) {
     			w = ifrWidth;
     			h = ifrHeight;
     		} else if ((ifrWidth / scrWidth) > (ifrHeight / scrHeight)) {
     			w = scrWidth;
     			h = (scrWidth / ifrWidth) * ifrHeight;
     		} else {
     			h = scrHeight;
     			w = (scrHeight / ifrHeight) * ifrWidth;
     		}
    
     		return {
     			'width': w - (ifrPadding + ifrBorder),
     			'height': h - (ifrPadding + ifrBorder)
     		};
     	};
    
    
     </script> 
    </head>
    <body>
    <div data-role="page" id="firstPage">
        <div data-role="content"> 
    		<input value="Login" data-theme="b" type="button" onclick="myOpenPopup();" />
    	</div>
     </div> 
    </body>
    </html>
    

    jqm_popup_form.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
      
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script> 
    </head>
    <body>
    <div data-role="page" id="firstPage">
      <div data-role="content">
    		<form action="jqm_popup_form.html" method="get" class="ui-body ui-body-a ui-corner-all">
    			<div>
    				<h3>Please sign in</h3>
    				<label for="un" class="ui-hidden-accessible">Username:</label>
    				<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a"/>
    				<label for="pw" class="ui-hidden-accessible">Password:</label>
    				<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a"/>
    				<button type="submit" data-theme="b">Sign in</button>
    				<button type="button" data-theme="b" onclick="parent.closePopUp()">Cancel</button>
    			</div>
    		</form>
    	</div>
    </div>
    </body>
    </html>
    

    A Demo can be seen here