Webconsults Europe Consulting in PHP Databases AJAX SEO WEB 20 Webdevelopment - JavaScript

Overlying DIV

nospam@example.com (John Behrens) — Tue, 02 Sep 2008 14:22:00 +0200

Just a simple JavaScript example how to display a overlying div on the whole page which is blocking all underlying links and forms and also handles problems with selectboxes in IE Browsers. Sometimes it is neccesary if you wan´t to prevent the user clicking around on the site example during an html loading process. Sometimes it can be more usefull to only put it on a part of the site so the user can still access main site navigation.

<div id="overlyingdiv" style="visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; filter:alpha(opacity=50); -moz-opacity: 0.50; background-color: #999999; text-align: center;">
   <iframe width="100%" height="100%" style="background-color:transparent;">
   </iframe>
   <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; filter:alpha(opacity=50); -moz-opacity: 0.50; background-color: #999999; text-align: center;">
   <div style="display:block; margin:0 auto; position:absolute; top: 50%; left:50%;"><img src="loader.giff" alt="" /><br /> Loading Data...</div>
   </div>

   </div>'

Java Script Example using prototype

function l(){
$('overlyingdiv').style.visibility='visible';
}
function loadingBlockerDisable(){
$('overlyingdiv').style.visibility='hidden';
}

Messages from Ajax Requests

nospam@example.com (John Behrens) — Fri, 04 Jul 2008 18:30:00 +0200

Giving back errors from AJAX requests is not that easy all the time. One possibility is to give back an Error Message by the AJAX Result, but this is not that comfortable at any time you have to put an error handling inside your AJAX call which is returning the message to the user. Another solution are session based error messages for that you have to implement an Ajax error handling class. For this messages you create a div layer inside your HTML.

<div id="messagefield" style="visibility: hidden;"> <a href="#" onclick="CloseMessageField()">close</a> <div id="messagefieldtext"></div> </div>'; <?PHP if($strMessageText){ echo "<script type='text/javascript'> ShowMessageField() </script>"; } ?>

This example is using Prototype.

<script language='JavaScript'> function CloseMessageField() { document.getElementById('messagefield').style.visibility = 'hidden'; } function ShowMessageField() { document.getElementById('messagefield').style.visibility = 'visible'; } function RefreshMessageField(){ ajaxRequest=new Ajax.Request('/your/messege/ajax/url', { method:'get', onSuccess: function(transport) { if(transport.responseText.length > 1){ document.getElementById('messagefieldtext').innerHTML=document.getElementById('messagefieldtext').innerHTML+transport.responseText; ShowMessageField(); } } } ); } </script>

Now you create an the AJAX Server by just returning simple HTML code instead XML you save some time

if(is_array($_SESSION['errors'] && count($_SESSION['errors']) > 0){ //returning the errors foreach($_SESSION['errors'] as $strError){ echo $strError; } //reset the error string $_SESSION['errors']=array(); }

Now you can give out Errors to a message window just by adding them to a Session like

$_SESSION['errors'][]="There has been an error by saving your entry"

or you can even use it to catch PHP Errors by using the set_error_handler function to see the PHP Errors which were thrown during the AJAX request execution. Any time you have a failed AJAX request you just call the RefreshMessageField() function instead from the returned AJAX response messages. Within your AJAX request you just have to differ between successful answer or showing the error message window. This example is a bit simplified i wrote myself an own Error handling class which supports multiple reporting modes which differ between a Development mode and Production mode but this should give you an overview how the process works.

JavaScript Sandbox Proxy in PHP

nospam@example.com (John Behrens) — Tue, 17 Jun 2008 11:19:46 +0200

Well for your website you´ll often have to include external JavaScript like tags of ad partners, external adserver etc. These foreign JavaScript is always a security risk, if a optional enemy is able to change the external JS he might take effect of CrossSite Scripting on your site. So how to protect against XSS from partners you need to include but which are possibly evil. Well there might be the solution of a PHP based JavaScript interpreter wich could handle external JS in a server based sandbox, J4P5 might be a solution to it it makes you able to run JavaScript from your PHP Server so it´s a kind of interpreter to it. Based on your server you need to evaluate the JS generated code if it is not generating possibly eval JavaScript. It might cause some disadvatages like if ad tags try to determine your browser, ip, and maybe some JS scripts are not working of cause will not have a good effect on performance but might prevent some XSS security issues, specially if you include JS from an untrustable third party. I ll try it out in the next time.