Navigation

Here's my note on how to add Ajax function to a Nucleus plugin. Ajax provides interaction to your web application (in our case, a blog) without reloading the whole web page. I think it is a very good mechanism to refresh just a small portions of your blog without clicking the reload button. NP_MiniForum is a good example.

There are 3 area of changes in order to add Ajax function to a Nucleus plugin:

1. Create function to insert XMLHttpRequest javascript
2. Setup doSkinvar() with function to insert javascript and <div> block
3. Add action to receive remote HTTP request

I: Create function to insert XMLHttpRequest javascript

A insertScript() function is added that can be called by doSkinVar() to generate the javascript to embed into blog's header. The javascript is used to trigger a periodic reload on the block of page (wrapped in <div id="myplugiin"> ) in your blog

  function insertScript() {
     global $CONF;
?>
  <!-- code from http://dutchcelt.nl/weblog/article/ajax_for_weblogs/ -->
  <script type="text/javascript">
  <!--
    var ajaxMy=false;
    /*@cc_on @*/
    /*@if (@_jscript_version >= 5)
    try {
          ajaxMy = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
          try {
            ajaxMy = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) {
            ajaxMy = false;
          }
    }
    @end @*/
    if (!ajaxMy && typeof XMLHttpRequest!='undefined') {
          ajaxMy = new XMLHttpRequest();
    }
    function MygetMyHTML() {
          var serverPage = 
'<?php echo $CONF['IndexURL'];?>action.php?action=plugin&name=Myplugin';
          var objMy = document.getElementById('myplugin');
          ajaxMy.open("GET", serverPage);
          ajaxMy.onreadystatechange = function() {
                if (ajaxMy.readyState == 4 && ajaxMy.status == 200) {
                  objMy.innerHTML = ajaxMy.responseText;
                }
          }
          ajaxMy.send(null);
        MystartRefresh();
   }
   function MystartRefresh() {
         setTimeout("MygetMyHTML()",5*60*1000);
   }
   // trick learnt from wp wordspew
   if(typeof window.addEventListener != 'undefined') {
         //.. gecko, safari, konqueror and standard
         window.addEventListener('load', MystartRefresh, false);
   }
   else if(typeof document.addEventListener != 'undefined')
   {
         //.. opera 7
         document.addEventListener('load', MystartRefresh, false);
   }
   else if(typeof window.attachEvent != 'undefined')
   {
         //.. win/ie
         window.attachEvent('onload', MystartRefresh);
   }
  // -->
  </script>
<?
}

Beware of name collision of objects like AjaxMy, ObjMy and function names like MystartRefresh() and MygetMyHTML with other Ajaxized plugin.

II: Setup doSkinvar() with function to insert javascript and <div> block

Then, doSkinvar() is changed to output the javascript or the block of page to be refreshed

  function doSkinVar($skinType, $mode) {
    if ($mode == 'script') {
      $this->insertScript();
      return;
    }

?>
    <div id="myplugin">
<?
  // code to generate the initial output
?>
    </div>
<?
  }

This way, user adds <%Myplugin(script)%> in the header to insert the javascript and <%Myplugin%> in skin to insert the output.

III: Add action to receive remote HTTP request

This is done by adding doAction() to receive requests from the remote Ajax script.

function doAction($actionType) {
  // code to generate new output to the browser
}

Further readings: tutorial on Ajax that allow clicks on a link that send request - here tutorial on Ajax that working with form - here