Javascript

Question

I have a register type file on which there is a very large form. Therefore, I plan to use the form layout plugin along with the jquery form validation plugin. I want these scripts to load on specific pages. How can I do it? Here is my controller method.

public function index(){ $data['title'] = "Register"; $this->load->view("site_header", $data); $this->load->view("site_nav"); $this->load->view("content_register"); $this->load->view("site_footer"); } 

I saw a similar post in stackoverflow here , but I don't understand what to do. Please, help.

Answer 1

You can send js to load as a variable. An example is here:

Sample controller

 class mypage extends CI_Controller{ public function index(){ $data['js_to_load']="index.js"; $this->load->view('header',$data); $this->load->view('my_html_page'); } public function second_page(){ $data['js_to_load']='second.js'; $this->load->view('header',$data); $this->load->view('my_second_html_page'); } } 

header.php - View file

 <!-- Needed html code here --> <? if ($js_to_load != '') : ?> <script type="text/javascript" src="assets/js/<?=$js_to_load;?>"> <? endif;?> <!-- Other html code here --> 

What's happening?

We set the js file to the $ data variable and pass the $ data variable to the header. In the header, we check if js_to_load is set ? If so, we include the js file.

You can also transfer multi js files using arrays.

Sample controller

 class mypage extends CI_Controller{ public function index(){ $data['js_to_load']=array("index.js","index1.js","index2.js"); $this->load->view('header',$data); $this->load->view('my_html_page'); } public function second_page(){ $data['js_to_load']=array("second.js","second2.js","second2.js"); $this->load->view('header',$data); $this->load->view('my_second_html_page'); } } 

header.php - View file

 <!-- Needed html code here --> <? if (is_array($js_to_load)) : ?> <? foreach ($js_to_load as $row): <script type="text/javascript" src="assets/js/<?=$row;?>"> <?endforeach;?> <? endif;?> <!-- Other html code here --> 

Answer 2

Pass the js array that you want to add to the header in the data and add it to the view, maybe there are other ways to do this (this type smears the controller / view line, so it's a little dirty, but it works).

 public function index(){ $data['title'] = "Register"; $data['js'] = array('link', 'link', etc); $this->load->view("site_header", $data); $this->load->view("site_nav"); $this->load->view("content_register"); $this->load->view("site_footer"); } 

Answer 3

I do not understand your problem. I suppose you upload your js files to view site_header or look at site_footer, why don't you load another view for these pages? eg:

 public function index(){ $data['title'] = "Register"; $this->load->view("site_header_extra_js", $data); $this->load->view("site_nav"); $this->load->view("content_register"); $this->load->view("site_footer_extra_js"); } 

Another solution is to install if if in your view you can use $this->uri->segment() to load additional js files that check the path.

Answer 4

It’s better to load your .js in the footer , since your HTML should be fully loaded before your script runs on top of it.

see here for reasons

I am using a universal footer to process .js files.

 public function index() { $this->load->view('template/header'); $this->load->view('template/nav'); $this->load->view('thing/landing'); $this->load->view('template/footer'); } 

my footer view

 <?php defined('BASEPATH') OR exit('No direct script access allowed'); $caller_class = $this->router->class; $caller_method = $this->router->fetch_method(); ?> <script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.min.js"></script> <?php //look for JS for the class/controller $class_js = "public/js/custom-".$caller_class.".js"; if(file_exists(getcwd()."/".$class_js)){ ?><script type="text/javascript" src="<?php echo base_url().$class_js; ?>"></script> <?php } //look for JS for the class/controller/method $class_method_js = "public/js/custom-".$caller_class."-".$caller_method.".js"; if(file_exists(getcwd()."/".$class_method_js)){ ?><script type="text/javascript" src="<?php echo base_url().$class_method_js; ?>"></script> <?php } ?> </body> </html> 

using $this->router->class; or $this->router->fetch_method(); to determine which controller or method is used in the controller. then detects if a .js file exists for this controller / method

with little control, you may have scripts with a controller and / or a specific method without using a footer.

in the pub / js / custom-mycontrollername-mymethod.js file that you would use (jquery);

 $(document).ready(function() { if ( $( "#mydivthing" ).length ) { $('#mydivthing').html("fetching.."); $.ajax({ ........ }); } else { console.log("skipped js segment"); } }); 

here jquery only starts when the document is ready (as jquery recommends) and you can also use if ( $( "#mydivthing" ).length ) { to check that your div is actually on the page. therefore, you do not fire events when they are not loading (for speed). but since jquery most likely does some validation - this is probably only useful for large runs of code than for events with a single click.

while the question was for views, these answers fall at the controller / method level. therefore, although the method can have several views, it is still a view / screen, as seen by the user.

Added a bonus that can be associated with .js files with the controller / methods only by the file name.