-
Notifications
You must be signed in to change notification settings - Fork 7.6k
jQuery
For all my fancy Web 2.0 stuff I use jQuery (www.jquery.com). 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 [url]http://www.visualjquery.com/index.xml[/url] is very much recommended, the jquery API is on it.
Name the code below; jquery.php and put in the libraries folder. $this->load->library('jquery'); loads it.
[url]http://www.creatieve-cursussen.nl/jquery.phps[/url] This is the class
[h2]How it works[/h2] Example is here: [url]http://www.creatieve-cursussen.nl/test[/url] The view file [code]
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CI,jquery test</title> <link href="/style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> 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; }
</style>
<base href="http://www.creatieve-cursussen.nl" /> <?php if(isset($js)) echo $js; ?> </head>
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.
Please read the Introduction section of the User Guide to learn the broad concepts behind Code Igniter, then read the Getting Started page.
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 [url]http://www.creatieve-cursussen.nl/test.phps[/url] [code] <?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');
$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'); $this->jquery->pclick->assignEventTo("a.wronglink"); $this->jquery->pclick->assignJavascript('function(){ '.$ajax.' }'); $this->jquery->pclick->assignType('bind'); $this->jquery->pclick->assignEvent('click');//triggerEvent $this->jquery->addJqueryObject('pclick');
$template['js']=$this->jquery->processJquery();
$this->load->view('test_view',$template);
} 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').'
'.$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
} } ?> [/code]