CODEWITHSUNDEEP
phpcodeigniter
user3272483
user3272483

Reputation: 408

Inject some javascript or css from a controller

I have some pages i am loading the normal way by calling a view like you'ld expect, $this->load->view('foo') but the file i have put all my javascript main.js is giving errors on firebug if it misses the html it requires.

To stop the errors,i would like to avoid loading main.js in all pages and instead load only the javascript that specific pages uses.

I have tried this

public function index(){
echo <<<'EOT'
$(document).ready(function(){
$(".btn").click(function(){
$(this).hide();
});
}); 

EOT;
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
//$this->load->view('foo');
}

I know EOT will display the code and not inject it into the fetched view but that's the idea i am having.

Is there a way i can inject javascript or css into foo from the the controller index?.

Upvotes: 0

Views: 93

Answers (2)

user3272483
user3272483

Reputation: 408

Adding to what Shomz ,i was able to create a variable in controller

    public function index(){

$data['custom_js'] =  <<<EOT
<script>
$(document).ready(function(){
$( '.btn' ).click(function() {
alert( 'Handler for .click() called.' );
});
});
</script>
EOT;
$this->load->view('header',$data);
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
$this->load->view('body');
$this->load->view('footer');
}

and use it in the view,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="<?php echo base_url("assets/ico/favicon.ico"); ?>">

<title>Sticky Footer Navbar Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="<?php echo base_url("assets/css/sticky-footer-navbar.css"); ?>" rel="stylesheet">
<link href="<?php echo base_url("assets/jui/jquery-ui.min.css"); ?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/jui/jquery-ui.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/bootstrap.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/isotopeSearchFilter.jquery.min.js"); ?>"></script>
<?php echo $custom_js; ?>
</head>
<body>

Upvotes: 0

Shomz
Shomz

Reputation: 37701

You can always set the view variable and use if when you want to load that JS file (or any other file that will be used only on certain pages). Try something like this:

In your controller: 

$this->load->view('foo', array('loadMainJS'=>true));

Then in your view: 

<?php if (isset($loadMainJS) && $loadMainJS): ?>
    <script src="main.js"></script>
<?php endif; ?>

You can even make a separate view that will only load that file and then load that view from the controllers only where needed. Plenty of ways to do this, actually.

Upvotes: 1

Related Questions