CodeIgniter and Javascript/Jquery Library

Question

As title said, I'm trying to figure out how to use javascript and jquery libraries on CI.

Following instruction in the docs, I load the library in my controller:

$this->load->library('javascript');

Then, I define the location of the jQuery file (jquery.min.js) in the config.php:

$config['javascript_location'] = 'http://localhost/ci/assets/js/jquery/');

After that, I open the view file and put in these two lines:

<?php echo $library_src;?>
<?php echo $script_head;?>

First error comes up here: Undefined variable $library_src and $script_head (don't understand where I have to set them)

Anyway, I've commented these lines and continue with jquery lib, by loading it in my controller with:

$this->load->library('jquery');

Next error: Unable to load the requested class: jquery. (it seems that it can't find the lib, what i messed up?)

Checking on system folder it looks all files are in place:

system/libraries/Javascript.php
system/libraries/javascript/Jquery.php

Thanks in advance for your help!

As far as I can tell this is at the very least a bug in the docs. Following them line by line, as the OP has done and I have done yields nothing but the error described above. I've tried following the instructions in the answer below to no avail. — seth, Aug 04 '11 at 03:34

zecohsox · Answer 1 · 2011-03-28T13:02:47.500

14

Put the code in the config.php like this:

$config['javascript_location'] = 'js/jquery/jquery.js';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';

In your controller file (e.g. controllers/sample.php) type this codes:

 function __construct()
   {
        parent::__construct();
            $this->load->library('javascript');                    
   }

function index()
{

    $data['library_src'] = $this->jquery->script();
    $data['script_head'] = $this->jquery->_compile();

    $this->load->view('sampleview', $data);

}

In your view file (e.g. views/sampleview.php) type this codes:

<?php echo $library_src;?>
<?php echo $script_head;?>

This works for me. I hope it works for you too. XD

edited Mar 28 '11 at 13:02

answered Mar 28 '11 at 12:44

zecohsox

141
3

1

This is actually the correct answer to the actual question asked. But it should go with the first part of jondavidjohn answer with elaboration, see the javascript library IS a DRIVER meaning that the pieces are there but the core library i.e. jquery is not. this is only a set of basic shortcuts that can be used to aid in your development using jQuery. So adding the lines above AND downloading jQuery to your application will give you minor shortcuts to the core / most popular functions in jQuery which is helpful but CI's implementation is not useful for more complex applications. – BrandonS May 06 '11 at 15:41
I did this, and it runs, but it sill cannot access the jquery file. I think that the .htaccess file is redirecting the request to index.php which doesn't know what to do with it. in any case I'm getting a 404 on the jquery file, which I put in application/js/jquery.js – Tom Macdonald Jan 24 '12 at 12:50

jondavidjohn · Accepted Answer · 2011-02-19T14:58:43.237

13

It is important to note that this Driver is marked as experimental so I wouldn't rely on it.

Also, personally I think it's asking for confusion and headaches to try and directly mix server-side portions of your applications with client side portions.

To use javascript in your views, I would just start out by loading them like this...

<script type="text/javascript" src="<?= base_url() ?>path/to/jquery.js"></script>

edited Feb 19 '11 at 14:58

answered Feb 19 '11 at 14:53

jondavidjohn

61,812
21
118
158

thanks you too! I'm new to CI framework and i was thinking this lib could help me on faster development. Anyway i'll follow you advice. – Luciano Feb 19 '11 at 15:20
4

we should avoid to use = instead we should use – PHP Ferrari May 27 '12 at 06:37

score 7 · Answer 3 · answered Nov 08 '11 at 03:55

Because this driver is experimental the documentation isn't quite there yet. But I was able to find a solution.

First, the documentation has an error in it. Unless you change the core Javascript library (not suggested) the reference variable is not $script_head but in fact$script_foot.

Second, once you've finished making your calls, it seems you need to run

$this->javascript->external();

and

$this->javascript->compile();

These functions set the $library_src and $script_foot variables.

To put it all together, in your controller you would have:

class Some_Controller extends CI_Controller {
   public function index()
   {
       $this->javascript->click('#button', "alert('Hello!');");
       $this->javascript->external();
       $this->javascript->compile();
       $this->load->view('index');
   }
}

In your view you would have

<html>
  <head>
     <?php echo $library_src; ?>
     <?php echo $script_foot; ?>

score 3 · Answer 4 · answered Feb 19 '11 at 13:38

3

Although CI first looks for system folder, you can also try putting your libs in the these folders:

application/libraries/Javascript.php
application/libraries/javascript/Jquery.php

answered Feb 19 '11 at 13:38

Sarfraz

377,238
77
533
578

Where are you putting the line `$this->load->library('jquery');` ? – Sarfraz Feb 19 '11 at 13:46
@Sarfraz: inside the __contructor function of my controller. – Luciano Feb 19 '11 at 13:55
Tried moving it to : `index` method? – Sarfraz Feb 19 '11 at 13:57
@Sarfraz: yep, it makes no difference. Anyway, i'm running the last version of CI... is that stable or you suggest me to move on a prev version? – Luciano Feb 19 '11 at 14:01
@Luciano: With each new realease, there are bug/issue fixes. So it is always a good idea to move to latest one. Note that few weeks ago new major version of CI has arrived :) – Sarfraz Feb 19 '11 at 14:05

score 1 · Answer 5 · edited Apr 11 '17 at 03:12

1

Use:

$this->load->library('javascript/jquery');

instead of:

$this->load->library('jquery');

This will load your jQuery library.

edited Apr 11 '17 at 03:12

Pang

9,564
146
81
122

answered Oct 14 '13 at 06:34

rishabh shah

11
1

score 1 · Answer 6 · answered Oct 14 '13 at 06:46

Not sure why you have to load your js file via controller and then echoing it in your view. You can just load ur js file using HTML tags directly in your view. Passing data from controller and echoing it in view is mostly used when your variable's value is dynamic/ needs to be loaded from databases etc.

score 1 · Answer 7 · edited Feb 06 '16 at 21:19

As we know on the user guide, first, it was an experimental but working. Thr first step is open your config file under application/config/config.php .

Put the following line :

// path to JS directory you want to use, I recommended to put the .js file under 'root app/js/yourfile.js'

$config['javascript_location'] = 'js/yourfile.js';

Second step is open your controller, within constructor method, put the following code :

// Load javascript class
$this->load->library('javascript');
$this->load->library('javascript/jquery'); // if u want to use jquery

Then, still in controller file within index method :

$data['library_src'] = $this->jquery->script(); // Because I refer to use jquery I don't test to use $this->javascript->script().

Then open your view file and put the following code within tag head :

<?php echo $library_src; ?>

That way is working for me, let's try it.

score 0 · Answer 8 · answered Aug 09 '14 at 17:02

I had the same problem, and found :

<?php $this->load->library('javascript'); ?>
<?php $this->load->library('javascript/jquery'); ?>

on https://ellislab.com/forums/viewthread/181742/#860506

Because jquery is in javascript folder.

Or

$autoload['libraries'] = array('database', 'session', 'javascript', 'javascript/jquery');

In the autoload.php file.

That solved the problem of loading the librairy.

empugandring · Answer 9 · 2015-04-15T04:30:54.940

You can try this, it's work to me.
in config.php

$config['javascript_location'] = 'http://localhost/ci/js/jquery.min.js';

in Controller

 public function __construct() {
    parent::__construct();
    $this->load->library('javascript');
    $this->load->library('javascript/jquery');
}

 public function index(){
    $d['library_src'] = $this->jquery->script();
    $d['logalert']=$this->jquery->_show('#logalert',1000,"$('#logalert').html('hello world');");
    $this->load->view('main',$d);
 }

in view (head)

<?php echo $library_src; ?>

in view content (body)

<div class="alert alert-dismissable alert-info" id="logalert">                          
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    </div>

in javascript view

<script type="javascript">
$(document).ready(function(){ 
   <?php echo $logalert; ?>
};
</script>

happy coding :)

CodeIgniter and Javascript/Jquery Library

9 Answers9

Linked