Automatical turn to AJAX with FuseBox

AJAX, Fusebox Add comments

You as web developer might have thought about how to develop applications having both AJAX and HTML-only versions at the same time. Fusebox can make your life easier!

The solution has two simple steps:

  1. determine whether JavaScript is turned on in user’s browser;
  2. if JavaScript is turned on, the application loads HTML chunks via AJAX, otherwise PHP is used to load the same chunks while an HTML page is generated.

It may look confusing how the same snippets of HTML code could be load by both AJAX and PHP. It’s not a big deal if the snippets are HTML parts of code ready to be outputed to browser. To do this, let’s create an ‘ajax’ circuit in our fictitious application. In general, this circuit don’t have a header or footer – it’s used just to return pieces of HTML.

Let’s imagine our application must show a table of products. The fuseaction ‘list’ of ‘products’ circuit could be defined like this:

<circuit access="public">

  <fuseaction name="list">
    <if condition="1==${jsdisabled}">
      <true>
        <set name="some_var1" value="1"  />
        <set name="some_var2" value="2"  />
        <do action="ajax.GetProducts" contentvariable="ProductsList"/>
      </true>
    </if>
    <include template="dspList.php" />
  </fuseaction>

</circuit>

This means that if $jsdisabled variable equals to 1 (which tells us that JavaScript is turned off – we will see later how to determine this), we grab contents of fuseaction ‘ajax.GetProducts’ to get an HTML code of products list into a variable $ProductsList.

All the magic is in dspList.php template: it determines what must be called – AJAX or PHP:

<? if ( 0 == $jsdisabled )  {?>
  <script>
    new_AJAX_request('index.php?fa=ajax.GetProducts&some_var1=1&some_var2=2');
  </script>
<?
}
else
{
  echo $ProductsList;
}
?>

There are a couple of variables defined for both calls ( some_var1 and some_var2 ). Such variables are used to tune the output of ajax.GetProducts fuseaction, for example, if your table supports sorting by click on its header, you can define the hyperlinks locations for sorting: if AJAX is used, they probably will look like <a href="javascript: update_rows()">...</a>, otherwise usual page reloading links would be used.

It’s worth saying a couple of words about how your application could find out whether it can use AJAX or not, i.e. if JavaScript is turned on at client side. Let’s consider the way which is used by Google Maps: if you turn JavaScript off in your browser and reload the page, you will be automatically redirected to a Google Maps page created with help of hyperlinks and images only. The algorithm is simple – if JavaScript is turned off, SCRIPT tag doesn’t work, but the NOSCRIPT tag does, so we can put a redirection command into this block. Then, if you switch back to have JavaScript available (and SCRIPT tag would make sense again), the application must be informed about the fact, so we redirect to the same location, but with additional parameter, telling the application about the change. The current value of JavaScript state can be stored in session or cookies.

Here is a PHP snippet, showing this at work:

<html>
  <head>
    <? if ( 0 == $attributes['jsdisabled'] ) : ?>
      <noscript>
        <meta http-equiv="refresh" content="0; URL=http://<?=$_SERVER["HTTP_HOST"] . $_SERVER['REQUEST_URI'] . (strpos($_SERVER['REQUEST_URI'], '?')!==false ? '&' : '?' ) ?>jsdisabled=1"/>
      </noscript>
    <? else : ?>
      <script>
        top.document.location.href='http://<?=$_SERVER["HTTP_HOST"] . $_SERVER['REQUEST_URI'] . (strpos($_SERVER['REQUEST_URI'], '?')!==false ? '&' : '?' ) ?>jsdisabled=0';
      </script>
    <? endif; ?>

Comments are closed.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in