axiom82 Posted May 19, 2009 Share Posted May 19, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.