Skip to content

jQuery

Jump to bottom Edit New page
Derek Jones edited this page Jul 5, 2012 · 20 revisions

Category:Library::External | Category:Library::jQuery

WARNING: THIS PAGE IS OUT OF DATE. The example provided doesn't work because the author's site no longer contains all of the content. The library may work, but you'll have to spend some time to test it yourself.

Introduction

For all my fancy Web 2.0 stuff I use jQuery. It's lean, it's easy, it's fast and it's fun. Anyway, to speed up production I put some stuff into a jQuery class. It's far from complete, probably has bugs, error handling broke but I'll post it anyway. Knowledge of jQuery is necessary to work with it, it might be helpful for some. Using VisualjQuery is very much recommended, the jquery API is on it.

Name the code below; jquery.php and put in the libraries folder. This is the class. Load it by calling ```php $this->load->library('jquery');


## How it works

[Example is here](http://www.creatieve-cursussen.nl/test)
The view file```php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
    &lt;title&gt;CI,jquery test&lt;/title&gt;
    &lt;link href="/style.css" rel="stylesheet" type="text/css" /&gt;
    &lt;style type="text/css"&gt;
    body {
        margin: 0;
        padding: 0;
        font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
        font-size: 14px;
        color: #4F5155;
        background: #fff url(images/background.jpg) repeat-x left top;
    }
    &lt;/style&gt;

    &lt;base href="http://www.creatieve-cursussen.nl" /&gt;
    &lt;?php if(isset($js)) echo $js; ?&gt;
&lt;/head&gt;
&lt;body&gt;
    <h2>Welcome to Code Igniter</h2>

    <p>Code Igniter is an Application Development Framework - a toolkit - for people who build web sites using PHP.
    Its goal is to enable you to develop projects much faster than you could if you were writing code
    from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and
    logical structure to access these libraries. Code Igniter lets you creatively focus on your project by
    minimizing the amount of code needed for a given task.</p>


    <p>Please read the Introduction section of the User Guide to learn the broad concepts behind Code Igniter,
    then read the <a href="general/index.html">Getting Started</a> page.</p>

    <div id='ajaxc'>
        <br /><hr />
    </div>
&lt;/body&gt;
&lt;/html&gt;

The CI stuff

I think it should be clear. Some jQuery stuff is loaded in the beginning. The stuff in red on the test page for example. Then we put an AJAX function into a variable before tying it up with a click on a link with class 'wronglink'. clicking will ajax load test/output_ajax with some POST variables. The ajax page consists of more script, executed when loaded. This scripts alters the wrong link, adds the POST variables and changes some texts. The Test.php file is a bit more updated than the one below```php <?php class Test extends Controller {

function Test()
{
    parent::Controller();    
}

function index(){
    $this->load->library('jquery');
    $this->jquery->addExternalScript('jquery.tablesorter.js'); //load jQuery plugin
 
    $this->jquery->setJqDocumentReady(true); //add $(document).ready(){ } stuff, saves a line of code to write

    $this->jquery->addJqueryScript('$("p").eq(0).after("<p class=\'wronglink\'>You can see that the link in the next paragraph is wrong. <a class=\'wronglink\'>Click here to fix it</a> Clicking will start an AJAX request to another file which will output some script that will alter the link.</p>"); '); //manually add jQuery stuff setJqueryScript() replaces, addJqueryScript appends

    $this->jquery->addJqueryScript('$("p.wronglink").css("background","red").css("color","white");');



    $vars=array('id'=>1,'CodeIgniter'=>'CodeIgniter rocks','jQuery'=>'jQuery is awesome'); //will be passed in the ajax request

    $this->jquery->JqueryObject('ajaxcall','ajax'); //new object of type ajax

    $this->jquery->ajaxcall->setRequestUrl('http://www.creatieve-cursussen.nl/test/output_ajax');
    $this->jquery->ajaxcall->setDataType('script'); //says that the page will output javascript (could be 'html','xml' or 'json' check jquery api)
    $this->jquery->ajaxcall->setData($vars);// what will be passed
    //  $this->jquery->ajaxcall->setDataRaw('html=fancy'); //setDataRaw is also possible, use GET/POST syntax
    $this->jquery->ajaxcall->setRequestType('POST');
    //$this->jquery->weird->getJqAjaxCall();
    $ajax=$this->jquery->getJqueryObject('ajaxcall');

    //$this->jquery->addJqueryScript();
    $this->jquery->JqueryObject('pclick','event'); //new object of type event
    $this->jquery->pclick->assignEventTo("a.wronglink"); //attach to a.wronglink
    $this->jquery->pclick->assignJavascript('function(){ '.$ajax.' }');
    $this->jquery->pclick->assignType('bind'); //bind it
    $this->jquery->pclick->assignEvent('click');//trigger event on click
    $this->jquery->addJqueryObject('pclick'); //back to original class

    $template['js']=$this->jquery->processJquery(); //load it all up in one script

    $this->load->view('test_view',$template); //into the view
}

function output_ajax(){
    $this->load->library('jquery');
    $this->jquery->JqueryObject('replace','assign'); //initiate new object of type 'assign' with name replace
    $this->jquery->replace->assignValue('http://www.codeigniter.com/user_guide/');//value to be added
    $this->jquery->replace->assignValueTo('a');//value is added to all A in the DOM
    $this->jquery->replace->assignLocation('href');//value is added to href attribute
    $this->jquery->addJqueryObject('replace'); //add the object to the script 

    $this->jquery->addJqueryScript('$("p.wronglink").empty().after("<p class=\'wronglink\'>Yeah, you fixed it by some leet AJAX. Next to that you added some of the variables passed to the ajaxpage to this page. What it says is true :)</p>");');
    $this->jquery->addJqueryScript('$("p.wronglink").css("background","red").css("color","white");');


    $newP=$this->input->post('jQuery').'<br>'.$this->input->post('CodeIgniter');
    $this->jquery->JqueryObject('newp','assign'); //initiate new object of type 'assign' with name replace
    $this->jquery->newp->assignValue($newP);//value to be added
    $this->jquery->newp->assignValueTo('#ajaxc');//value is added to the element with the id ajaxc attached to it
    $this->jquery->newp->assignLocation('prepend');//value is added to prepended in the element
    $this->jquery->addJqueryObject('newp'); //add the object to the script 

    $this->jquery->printJqueryScript(); // output the script (without all the  stuff since this is AJAX loaded and not really a document and all
}

}

?>


This class is suited for my purposes, jQuery is simple enough to do everything by hand but some of this stuff speeds my production up. Again, it is far from complete, if you have any simple adjustments mail them.
Add a custom footer
Add a custom sidebar
Clone this wiki locally