Jump to content

Ultimate AJAX Popup Windows


axiom82

Recommended Posts

Have you ever wished to have the power of a regular windowed popup (e.g. calling window.open) without creating a library of ajax requests and php responses? Have you ever created an entire popup generated by javascript by the DOM to find out you can't upload images or post forms in the popup else it will reload your main page?  Annoying yes?  I thought so, too!

 

Here is the solution and it is very clear cut.

 

1. Create your AJAX object (in global.js):

// Ajax //
ajax = new Object();

	ajax.initialize = function(){

		ajax.xml_http = null;

		try {
			ajax.xml_http = new XMLHttpRequest ();
		}
		catch (e){
			try {
				ajax.xml_http = new ActiveXObject ('Msxml2.XMLHTTP')
			}
			catch (e){
				ajax.xml_http = new ActiveXObject ('Microsoft.XMLHTTP');
			}
		}

	}

	ajax.post = function (url, params, onreadystatechange, sync){

		if (typeof sync == 'undefined') sync = true;

		ajax.initialize();
		ajax.xml_http.open ('POST', url, sync);
		ajax.xml_http.onreadystatechange = function(){ if (onreadystatechange != null && (ajax.xml_http.readyState == 4 || ajax.xml_http.readyState == 200)) onreadystatechange.call(); }
		ajax.xml_http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		ajax.xml_http.setRequestHeader('Content-Length', params.length);
		ajax.xml_http.setRequestHeader('Connection', 'close');
		ajax.xml_http.send (params);
		if (onreadystatechange != null){
			try { if (document.addEventListener && ajax.xml_http.onreadystatechanged == null){ if (ajax.xml_http.readyState == 4 || ajax.xml_http.readyState == 200){ onreadystatechange.call(); } } }
			catch (e) { return false; }
		}

	}

 

 

2. Create your popup opening, filling, and closing code: (in popup.js)

	// Popup //
	popup = new Object();

		// Popup: Open //
		popup.open = function(){

			ajax.post('ajax_response.php', 'open_popup=1', popup.open_changed, false);

		}

		// Popup: Open (Changed) //
		popup.open_changed = function(){

			var popup = document.createElement('div');
			popup.id = 'popup';
			popup.innerHTML = ajax.xml_http.responseText;
			popup.style.height = '256px';
			popup.style.width = '512px';
			popup.style.position = 'absolute';
			popup.style.left = '16px';
			popup.style.top = '16px';
			document.body.appendChild(popup);

		}

		popup.close = function(){

			if (document.getElementById('popup')) document.body.removeChild(document.getElementById('popup'));

		}

 

3. Create your php response page for ajax posts: (in ajax_response.php)

<?php

// Popup: Open //
if (isset ($_REQUEST['open_popup'])){ ?>

	<iframe src="your_popup.html" width="512" height="256" frameborder="0" scrolling="no"></iframe>

<?php }

?>

 

4. Create your popup page html (in your_popup.html)

<html>
<head>
	<title>I love posting forms in ajax popups</title>
</head>
<body>
	<h1>I love posting forms in ajax popups</h1>
</body>
</html>

 

 

That's it.  You created your ajax object, created your javascript popup controls (open, fill, close), sent a response back with an iframe (which is compatible if its the child node of a div), the iframe code is inserted as the child of the new div, and the new div appears.  It's seamless!  Enjoy :)

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/158763-ultimate-ajax-popup-windows/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.