Topic: XAJAX and jQuery UI Accordion control

Hi All,

I had a request for help using xajax with an accordion control class from phpclasses.org.

I couldn't get this class to work at all and, since I am a jQuery fan, I wrote up a demo using the UI accordion control.


The folder layout is:
root
demo.php
  --jQueryUI
  --xajax

<?PHP
/**
* 1/11/12
* Demo XAJAX and jQuery UI accordion control
* See numerous examples of xajax at http://community.xajax-project.org/
* See accordion docs at http://jqueryui.com/demos/accordion/
*/

//Load the xajax core
include 'xajax/xajax_core/xajax.inc.php';
//Create an instance of xajax
$xajax = new xajax();
//Let it know where to find its javascript - very important...
$xajax->configure('javascript URI', './xajax/');

/**
*
* A simple function to exercise xajax and the
* jQuery UI Accordion control.
*
* Param integer section number that called.
*
* An alert will be issued and the folowing 
* section will be opened.
*/
function hello($section){
  //Create a response object
  $resp = new xajaxResponse();
  //Add an alert to the response
  $resp->alert('Hello in Section '.$section);
  //Add scripting to call the sectionOpen() js function
  //passing the index of the section to open.
  if ($section < 4)
    $resp->script("sectionOpen($section)");
  else
    $resp->script("sectionOpen(0)");
  return $resp;
}
//Register our function with xajax
$xajax->register(XAJAX_FUNCTION,'hello');
//Intercept and process any incoming XHR.
$xajax->processRequest();
/**
* Caution: be very careful not to leave any white space after the
* closing php tag or before the opening php tag.
* It will cause all kinds of strange problems with xajax when it
* is expecting an XHR to be returned from the server.
*/
?>
<!DOCTYPE html>
<html>
<head>
<title> JQUI Accordion and Xajax Sample</title>
<?php $xajax->printJavascript(); //Generate the xajax client side code ?>

<!-- Get the base jquery script and the jquery UI script -->
<script type="text/javascript" src="JQueryUI/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JQueryUI/js/jquery-ui-1.8.5.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="JQueryUI/css/redmond/jquery-ui-1.8.5.custom.css"/>
<script>
    //jQuery's Ready function sets up the accordian divs when the page
  //has finished loading
  $(function() {
        $( "#accordion" ).accordion();
    });
  //Will be called from the server to open the next section
  // n is the section index (zero based).
  function sectionOpen(n){
    $("#accordion").accordion("activate", n);
  }
</script>
</head>
<body>
<!-- Lifted from the accordion documentation page. My buttons added -->
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
    <input type="button" value="Click Me" onclick="xajax_hello('1')"/>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
    <input type="button" value="Click Me" onclick="xajax_hello('2')"/>  
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
    <input type="button" value="Click Me" onclick="xajax_hello('3')"/>  
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
    <input type="button" value="Click Me" onclick="xajax_hello('4')"/>  
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>
</body>
</html>

Hope it helps someone and makes for a JQ convert or 2... smile

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.