How to add your favorite jQuery UI plugin as a Raxan widget

Imagine you have found the latest jQuery DatePicker that has all of the latest bells & whistles (like the one created by Keith Wood at Like most jQuery plugins, it comes with the jquery plugin (.js) file, a css file, and an example html file. So, how do you quickly add this to Raxan as a reusable widget? Simple.

Step 1: Copy the jQuery plugin file(s) to the raxan ui/javascripts directory

Step 2: Copy the plugin's css file(s) to the raxan ui/css directory

Step 3: Create the Raxan widget class file


    class DatePickerWidget extends RaxanUIWidget {

        protected function _init() {
            // load the stylesheet jquery.datepick.css
            // load the javascript
            // Bind the datepicker to the element
            // Note that elmID is created in the RaxanUIWidget constructor so it is
            // available here as the jQuery selector


Step 4: Load the new DatePickerwidget in your page controller class

    require_once 'raxan/pdi/autostart.php';

    class IndexPage extends RaxanWebPage {

        protected function _config() {
            $this->masterTemplate ='views/master.html';

        protected function _init() {


Step 5: Start using your new DatePickerWidget in your views

<div class="container">
     <form id="addEmployee" method="post">
            <label class="rax-light-title" for="employeeName">Employee Name</label>  
            <input id="employeeName" class="textbox c26 round" />
            <label class="rax-light-title" for="employeeBirthDate">
            Employee Birth Date</label>
            <br/><input id="employeeBirthDate" 
            class="textbox c17 round" xt-ui="DatePickerWidget" />
            <input id="cmdAdd" type="submit" class="left button rtm " 
            value="Add Employee" xt-bind="#click,saveEmployee,,true" />       

Now, when you want to use the DatePickerWidget on any page, all you have to do is call Raxan::loadWidget('datepickerwidget') in the page controller, and add the xt-ui="DatePickerWidget" on the elements that are used to get dates. Really nice!

Posts: 824
I read your <a href=
Reply #1 on : Sat April 15, 2017, 19:09:30
I read your <a href="">ponistg</a> and was jealous
First | Previous | Showing comments 781 to 781 of 781

Leave a Comment

Required fields are marked with *.
If you have trouble reading the code, click on the code itself to generate a new random code.