How to load javascript css files in codeigniter ci

Question

i wanna migrate my website into CI. i just simply modified from ci sample file welcome.php in index() function , i load the view to show. however , i put many javascripts and css files in the header file . and call it by $this->load->view('header'); but i can not load the javascript files correctly! Can anyone give me some tips ? it;s hard to configure how to set the correct path.

<script type="text/javascript" src="/assets/javascripts/order.js"></script> 
<script type="text/javascript" src="../assets/javascripts/order.js"></script>   
<script type="text/javascript" src="../../assets/javascripts/order.js"></script>

my controller code as following

    class Welcome extends CI_Controller {

public function index()
{
    $this->load->helper('url');     
    $this->base = $this->config->item('base_url');

    $this->load->view('header');
    $this->load->view('welcome_message');


}

}

belows are my folder structure

enter image description here

Megarushing · Accepted Answer · 2013-09-09 02:40:44Z

8

put your assets folder with applications, system, assets

not in application and simple load the url helper class in controller where you call the header view part something like

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

and simply use something like this in your header file..
because $this->base_url() return the / folder..

<script src="<?php echo $this->base_url();?>assets/javascript/jquery.js"></script>

Changing the folder structure because access within the application folder is just for the core part that i know..

here is the link if you want to know more about URL Helper

edited Sep 9, 2013 at 2:40

Megarushing

4187 silver badges13 bronze badges

answered Aug 25, 2012 at 4:25

jogesh_pi

9,7725 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

newBike Over a year ago

thank you or your support. btw the way if i wanna use some library like phpMailler or zend framwork . sholud i put those folder in applicaions, system level , reight ?

jogesh_pi Over a year ago

@poc being true, i don't have much experience about codeigniter, so i think these libraries you have to put in third_party folder.

jogesh_pi Over a year ago

@poc yes you can put on the third_party folder and to know more about the third party folder, follow the link stackoverflow.com/questions/5248158/…

Charitha Goonewardena Over a year ago

Make sure you have added the 'url' into your array in autoload.php under config folder here -> $autoload['helper'] = array('url');

4AK Over a year ago

Using "something like" $this->base_url() led me to an error of not finding the method and fatal exception, realizing afterward that we don't need $this and directly call echo base_url(). works fine now!

Rejoanul Alam · Accepted Answer · 2015-01-26 06:18:39Z

2

This is the best way with minimal code

<script src="<?php echo base_url('assets/javascript/jquery.js');?>"></script>
<script src="<?php echo base_url('assets/css/bootstrap.min.js');?>"></script>

answered Jan 26, 2015 at 6:18

Rejoanul Alam

5,4004 gold badges42 silver badges71 bronze badges

Comments

ketan · Accepted Answer · 2015-07-15 05:06:56Z

0

Jogesh_p's answer will surely solve the assets loading problem you have. I would like to follow up on this question you gave

Thank you or your support. btw the way if i wanna use some library like phpMailler or zend framwork .

You can put in application/libraries/

Then load it in the controller using the Library's Class' Name

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

Its your choice to load in on the constructor or on the individual method.

Good Luck!

edited Jul 15, 2015 at 5:06

ketan

19.4k42 gold badges68 silver badges107 bronze badges

answered Aug 25, 2012 at 9:18

Ernesto Codeigniter

712 bronze badges

Comments

Vishal Kumar Sahu · Accepted Answer · 2017-12-13 19:36:05Z

To solve my problem I created helper functions to load assets. And here is my code deployed in my application. PS: First I planned a good/flexible directory structure

[some_helper.php]

/*
 * Created: 2017/12/14 00:28:30
 * Updated: 2017/12/14 00:28:39
 * @params
 * $url_structure = 'assets/js/%s.js'
 * $files = ['main.min', 'social']
 * $echo = FALSE
 *
 */

function load_js($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE){
    $html = "";
    foreach ($files as $file) {
        if($url_structure){
            $file = sprintf($url_structure, $file);
        }
        $file_url = base_url($file);
        $html .= "<script src=\"{$file_url}?v={$version}\"></script>";
    }
    if($echo) {
        echo $html;
    }
    return $html;
}

/*
 * Created: 2017/12/14 00:28:48
 * Updated: 2017/12/14 00:28:51
 * @params
 * $version = '1.0' // Later load from configuration
 * $url_structure = 'assets/js/%s.css'
 * $files = ['main.min', 'social']
 * $echo = FALSE
 *
 */

function load_css($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE){
    $html = "";
    foreach ($files as $file) {
        if($url_structure){
            $file = sprintf($url_structure, $file);
        }
        $file_url = base_url($file);
        echo "<link rel=\"stylesheet\" href=\"{$file_url}?v={$version}\">";
    }
    if($echo) {
        echo $html;
    }
    return $html;
}

Then called in the view

[some_view.php]

$css = [
    'path' => 'assets/css/%s.css',
    'files' => ['bootstrap.min','style']
];
load_css($css['files'], $css['path'], '1.0', TRUE);

Hope it helps someone. In the case of OP $css['path'] = 'application/assets/css/%s.css'; will do the trick.

Updated the code on Github which I will keep updating.

user3437895 · Accepted Answer · 2015-07-15 05:09:16Z

-2

assets/css/bootstrap.min.css"

    <!-- Include JS -->
    <script src="<?php echo base_url();?>assets/js/jquery.js"></script>
    <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>

edited Jul 15, 2015 at 5:09

answered Jul 14, 2015 at 17:49

user3437895

11 bronze badge

2 Comments

d4Rk Over a year ago

Could you please also add some explanation?

Marcel Burkhard Over a year ago

Besides the question is already solved with "base_url()", no need to duplicate that answer.

user3437895 · Accepted Answer · 2015-07-15 05:10:24Z

-2

function addcategory()
{
    //alert("<?php echo base_url();?>")
     $.ajax({
                complete: function() {}, //Hide spinner
                url : '<?php echo base_url();?>category/search',
                data:$('#add_category').serialize(),
                type : "POST",
                dataType : 'json',
                success : function(data) {
                    if(data.code == "200")
                    {
                        alert("category added successfully");
                    }

                        },
                beforeSend: function(XMLHttpRequest){}, //$.blockUI();
                        cache: false,
                        error : function(data) {
                            }
            });

}

answered Jul 15, 2015 at 5:10

user3437895

11 bronze badge

3 Comments

user3437895 Over a year ago

user3437895 Over a year ago

class Globel_model extends CI_Model { function __construct() { // Call the Model constructor parent::__construct(); } function add_record($tablename,$data) { $this->db->insert($tablename, $data); return; } }

Glorfindel Over a year ago

You can edit your answer, so that it includes all the code. And please give some additional information about your solution - a wall of code is hard to grasp.

Collectives™ on Stack Overflow

How to load javascript css files in codeigniter ci

6 Answers 6

5 Comments

Comments

Comments

Comments

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

2 Comments

3 Comments

Linked

Related