Codeigniter: How to include javascript files

Question

Hello I just started working with CodeIgniter framework. My current directory structure is

Demo(Project name)
 +System
 +Application
   -Controllers
      demo.php
   +Model
   -Views
      view_demo.php
 -Js
    ajax.js
    jquery.js  

Please tell me how to include .js files in view_demo.php.

Thanks Raj

Answer 1

You wouldn't include JS files within the PHP, they would be output as script tags within the HTML you produce which you may be producing as output from the PHP script.

As far as I know, there is no built in CodeIginiter function to include this output like there is for CSS using the link_tag() function provided by CI. I've added a function called script_tag() to the system/helpers/html_helper.php file from CI. The function is:

if ( ! function_exists('script_tag')) {
    function script_tag($src = '', $language = 'javascript', $type = 'text/javascript', $index_page = FALSE)
    {
        $CI =& get_instance();
        $script = '<scr'.'ipt';
        if (is_array($src)) {
            foreach ($src as $k=>$v) {
                if ($k == 'src' AND strpos($v, '://') === FALSE) {
                    if ($index_page === TRUE) {
                        $script .= ' src="'.$CI->config->site_url($v).'"';
                    }
                    else {
                        $script .= ' src="'.$CI->config->slash_item('base_url').$v.'"';
                    }
                }
                else {
                    $script .= "$k=\"$v\"";
                }
            }

            $script .= "></scr"."ipt>\n";
        }
        else {
            if ( strpos($src, '://') !== FALSE) {
                $script .= ' src="'.$src.'" ';
            }
            elseif ($index_page === TRUE) {
                $script .= ' src="'.$CI->config->site_url($src).'" ';
            }
            else {
                $script .= ' src="'.$CI->config->slash_item('base_url').$src.'" ';
            }

            $script .= 'language="'.$language.'" type="'.$type.'"';
            $script .= ' /></scr'.'ipt>'."\n";
        }
        return $script;
    }
}

Then in your PHP code you can do:

echo script_tag('content/js/jquery-1.4.2.js');

Answer 2

I store my javascript in a subdirectory of my view folder so the file path is relative to the view being called and I omit the base_url().

Another technique I adopted was to define an array of scripts to include in my controller, then loop through the array in my view to include them. This allows me to include specialty js functions only when needed.

$data['scripts to load'] = array('edit.js','menu.js', 'contact.js');
$this->load->view('myview');

Then in the view

 <?php  foreach($scripts_to_load as $script):?>
           <script type='text/javascript' src = 'my_js/<?php echo $script;?>'>
 <?php endforeach;?>

If you have script files that get loaded on every page, you can hard code them in your footer view like is described in the other answers.

Answer 3

Check out Phil Sturgeon's CodeIgniter Template Library. We use a modified version of it at work. http://philsturgeon.co.uk/code/codeigniter-template

Answer 4

The $data variable sometimes may be lost if you have nested views and you don't pass it as an argument to the children/nested views.

I found a simple solution that is working very smoothly to me:

In your current view file you setup your script like this:

$this->scripts[] = '/js/myscript.js';

at your footer or {whatever.php} file you insert this code:

    <?php
        if(isset($this->scripts))
        foreach($this->scripts as $script) :
     ?>
            <script src="my_asset_path/js/<?=$script;?>"></script>
    <?endforeach;?>

If you need only a pice of javascript code, you can always use anonymous functions like this:

<?php
$this->RenderScript[] = function() {
?>
      <script>
        console.log('myjavascript code snippet');
      </script>
<?}?>

and at the bottom:

<?php
        if(isset($this->RenderScript))
            foreach($this->RenderScript as $script) {
                $script();
            }
    ?>

Answer 5

You need to use the base_url() to include the javascript file in your VIEW.

So, in the view_demo.php file:

<script type="text/javascript" src="<?php echo base_url();?>js/jquery.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>js/ajax.js" ></script>

You will need the URL helper loaded. To load the helper you need to put on your demo.php controller:

$this->load->helper('url');

You can also autoload on \config\autoload.php on the helpers array.

More info about base_url(): http://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url

Answer 6

Just use the standard:

<script src="/path/to/file.js" type="text/javascript" charset="utf-8"></script>

inside your view! (Not inside the PHP tags, of course.) I don't think the CodeIgniter HTML helper has any functions that you could use as an alternative to writing out the HTML yourself.