CodeIgniter Forums
jquery (ui) integration library approach - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forum-22.html)
+--- Thread: jquery (ui) integration library approach (/thread-17804.html)



jquery (ui) integration library approach - El Forum - 04-16-2009

[eluser]leviathan28[/eluser]
Hi people,

recently, I needed a datepicker in some places of my application and I ended up using the jquery ui datepicker. I am really not comfortable with javascript (actually I'm not able to produce more than an alert or the occasional handling of input fields) and it was also the first time I used jquery so it took me quite a long time to make it work.

I then created a simple library to generate the necessary javascript and to be able to attach the datepicker to an input like this:

$this->jquery->add_datepicker('myfieldname');

Now there are two questions I'd like to ask:
1. I'm quite new to CI, so: Is my approach (see code below) sensible?
2. Would anybody be interested in having this library made public? (assuming I get some more functionality into it)

config-file:
Code:
<?php
/* Path to jquery scripts, relative to base_url */
$config['jq_config']['js_path'] = 'path/to/your/js';
$config['jq_config']['css_path'] = 'path/to/your/css';

/* Scripts to be loaded by default; to dynamically load scripts use jquery->add_scripts() */
$config['jq_scripts'][] = 'jquery-1.3.2.min.js';
$config['jq_scripts'][] = 'jquery-ui-1.7.1.custom.min.js';
$config['jq_scripts'][] = 'ui/i18n/ui.datepicker-de.js';

/* css to be loaded */
$config['jq_css'][] = 'start/jquery-ui-1.7.1.custom.css';
?>

The library
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* jQuery Library
*/
class Jquery {
    var $CI;
    
    /* paths */
    var $jq_base_url;
    var $jq_css_url;
    
    
    var $arr_scripts;
    var $arr_css;
    
    /* Output */
    var $output_scripts    = '';
    var $output_css        = '';
    var $output            = '';
    
    /**
     * Constructor
     * @return void
     */
    function Jquery () {
        $this->CI =& get_instance();
        $this->CI->load->config('jquery');
        
        $arr_config = $this->CI->config->item('jq_config');
        
        $this->jq_base_url     = $this->CI->config->item('base_url').$arr_config['js_path'];
        $this->jq_css_url      = $this->CI->config->item('base_url').$arr_config['css_path'];
        
        $this->add_scripts($this->CI->config->item('jq_scripts'));
        $this->add_css($this->CI->config->item('jq_css'));
    }
    
    /**
     * Add a Datepicker to an input field
     * @param string    $field_id    ID of the field to add the Datepicker to
     * @return void
     */
    function add_datepicker($field_id, $date_format = 'yy-mm-dd') {
        $str_script     = '';
        $str_script        .= '$(function() {';
        $str_script        .= '$("#'.$field_id.'").datepicker($.datepicker.regional["de"]);';
        $str_script     .= '$("#'.$field_id.'").datepicker("option", {dateFormat: "'.$date_format.'"});';
        $str_script     .= '});';
        $this->output .= $str_script;
    }
    
    /**
     * Add scripts
     * @param mixed    $scripts    A string or an Array containing the scripts to load
     * @return void
     */
    function add_scripts($scripts) {
        $arr_scripts = array();
        if (!is_array($scripts)) {
            $arr_scripts[] = $scripts;
        } else {
            $arr_scripts = $scripts;
        }
        
        foreach ($arr_scripts as $script) {
            $this->output_scripts .= '<script type="text/javascript" src="'.$this->jq_base_url.$script.'"></script>';
        }
    }
    
    /**
     * Add css
     * @param mixed    $css    A string or an Array containing the css to load
     * @return void
     */
    function add_css($css) {
        $arr_css = array();
        if (!is_array($css)) {
            $arr_css[] = $css;
        } else {
            $arr_css = $css;
        }
        
        foreach ($arr_css as $css) {
            $this->output_css .=  '<link type="text/css" href="'.$this->jq_css_url.$css.'" rel="Stylesheet" />';
        }
    }
    
    /**
     * Generate output
     * @return string
     */
    function get_output () {
        $str_output = '';
        $str_output .= $this->output_css;
        $str_output .= $this->output_scripts;
        $str_output .= '<script type="text/javascript">';
        $str_output .= $this->output;
        $str_output .= '</script>';
        return $str_output;
    }
}

// END Class Jquery

/* End of file jquery.php */
/* Location: ./system/application/libraries/jquery.php */

Here's how it could be used in a controller:
Code:
$this->load->library('jquery');
$this->jquery->add_datepicker('my_datefield');
$this->template->write('header', $this->jquery->get_output());



jquery (ui) integration library approach - El Forum - 04-16-2009

[eluser]xwero[/eluser]
the people at EL are working on their own javascript library but choice is always good.

The problem with these libraries is that it's only useful for a few basic actions and you have to maintain it to keep it up with the javascript library changes.

I see a few problems with your library as you shown here. What if the developer of the site uses a custom jquery ui which doesn't contain the datepicker? i would use the Google AJAX Libraries API urls for jquery and jquery UI.
You assume the datepicker field has an id but i think it's more likely the datepicker field is recognized by a class because it's common to have more than one field in a form that uses the datepicker, for example a form where the begin and end date needs to be inputted.


jquery (ui) integration library approach - El Forum - 04-16-2009

[eluser]leviathan28[/eluser]
I didn't know they were working on a javascript-library, but that's definitely something I'm looking forward to.

About having only a few basic actions: That's what I want it for - I don't know enough about javascript or jquery to write a library for the whole thing (I now realise that the title leads to this conclusion - sorry) and I also want to keep it small and simple.
For me, it's just about having basic things done quickly (and without the need to write any javascript) - like the datepicker, or perhaps a dialog.

Maintenance might be a problem, yes. But I would run into that one with every third party code. So unless I write it all by myself (which I couldn't), there's no other possibility, or do I miss something here?

Google API seems like a good idea, didn't know about that, thanks :-)

I don't quite get why I can't have to fields with ids instead of classes? When I do something like

$this->jquery->add_datepicker('id1');
$this->jquery->add_datepicker('id1');

<input type="text" id="id1">
<input type="text" id="id2">

it works just fine. But it wouldn't be too much of a problem to allow classes as well as ids anyways, I think.

Thanks for the helpful post ^_^


jquery (ui) integration library approach - El Forum - 04-16-2009

[eluser]xwero[/eluser]
It's true you have to maintain any library that uses third party code but your library wraps a whole programming language.
What if people want to do more than just add the datepicker, for example they want to send the chosen date via ajax the date picker has a onSelect event just to make things like that happen.

You wrote it's the first time you use jquery. Once you get the hang of it you are going to do great things with it without to much sweat.

If you leave it up to the developer which selector to use he can do
Code:
// controller
$this->jquery->add_datepicker('.datepicker');
// view
<input type=“text” class=“datepicker”>
<input type=“text” class=“datepicker”>



jquery (ui) integration library approach - El Forum - 04-16-2009

[eluser]Iverson[/eluser]
Honestly, the only really useful function I see here is add_datepicker(). This is really a YAAM (Yet Another Asset Manager). The asset manager I use (http://ellislab.com/forums/viewthread/46910/P15/) comes with:

Code:
// prints <link rel="stylesheet" href="http://example.com/assets/css/global.css" type="text/css" />
echo style('global');

// prints [removed][removed]
echo jscript('jquery.datepicker.js');

All you have to do is specify the paths:

Code:
$config['image_path']  = "images/";
$config['javascript_path']= "js/";
$config['stylesheet_path']= "css/";

Not trying to be a jerk, but unless there are some more jquery specific functions you're going to work on, I don't really see the use 8-/


jquery (ui) integration library approach - El Forum - 04-17-2009

[eluser]leviathan28[/eluser]
Ja, I wanted to add some more like add_datepicker() and jquery things - this was just an example of what I have in mind. Since I'm a beginner when it comes to CI and jquery and so on, I just wanted to know if I'm heading the right way.

Perhaps my english is worse than I thought, if so I'm sorry.

Finally, I think I have to take a much closer look at jquery ^^ might be better to learn to walk before trying to fly


jquery (ui) integration library approach - El Forum - 07-11-2010

[eluser]happydude[/eluser]
Here's a suggestion:

Link to your jquery and jquery ui scripts in the head section of your view.

Link to your own custom javscript file in the head section of your view and do something like this:
$('.datepicker').datepicker();

assign class="datepicker" to fields where you want a datepicker to show up.

You really don't need to PHPify javascript code... when you can pick virtually any element you want in the DOM with jQuery's sizzle selector engine.