codeigniter加载视图特定的javascript

时间:2013-07-14 14:23:49

标签: php codeigniter

我有一个寄存器视图文件,其中有一个非常大的表单。因此我打算使用表单向导插件和jquery表单验证插件。我只希望在特定页面上加载这些脚本。我该怎么做呢 ?这是我的控制器方法。

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");
} 

我在stackoverflow here上看到了类似的帖子,但我不明白该怎么做。请帮忙。

5 个答案:

答案 0 :(得分:12)

您可以将哪个js作为变量加载。示例在这里;

样本控制器

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 - 查看文件

<!-- Needed html code here -->

<? if ($js_to_load != '') : ?>

<script type="text/javascript" src="assets/js/<?=$js_to_load;?>">

<? endif;?>

<!-- Other html code here -->

发生了什么事?

我们将js文件设置为$ data变量,并将$ data变量传递给header。 在头文件中,我们检查是否设置了 js_to_load ?如果是,我们将包括js文件。

此外,您可以使用数组传递多个js文件。

样本控制器

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 - 查看文件

<!-- 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 -->

答案 1 :(得分:1)

将要添加的j数组传递给数据中的标题,并在视图中添加,可能还有其他方法(这种方式会污染控制器/视图行,所以它有点脏,但是它有效。)

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");
} 

答案 2 :(得分:1)

最好在页脚中加载.js,因为HTML应该在您开始运行脚本之前完全加载。

请参阅here了解原因

我使用通用页脚来处理.js文件

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

我的页脚视图是

<?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>

使用$this->router->class;$this->router->fetch_method();来检测控制器中正在使用的控制器或方法。然后检测该控制器/方法是否存在.js文件

只需很少的管理,您就可以拥有控制器和/或方法特定的脚本,而无需摆弄页脚。

在文件pub / js / custom-mycontrollername-mymethod.js中,然后使用(jquery);

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

此处jquery仅在文档为ready 时运行(如jquery建议) 您还可以使用if ( $( "#mydivthing" ).length ) {检查您的div实际上是否在页面上。所以当你没有加载时(因为速度)你不会发射事件。但是由于jquery可能正在进行一些检查 - 这可能只对大量代码运行有帮助而不仅仅是单击按钮点击事件。

虽然问题是针对视图,但这个答案会转到控制器/方法级别。因此,虽然方法可以有多个视图 - 这仍然是用户看到的视图/屏幕。

额外的好处是你可以通过文件名将.js文件关联到控制器/方法。

答案 3 :(得分:1)

您可以使用变量作为控制器名称,然后将此变量传递给视图

这是控制人

class Blog extends CI_Controller{
  public function index(){
    $data['controller']="blog_index";
    $this->load->view('header',$data);
  }

  public function second_page(){
   $data['controller']="blog_second_page";
   $this->load->view('header',$data);

 } 
}

Header.php文件

<? if (isset($controller) && in_array($controller,array('blog_index'))) : ?>

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

<? endif;?>

<? if (isset($controller) && in_array($controller,array('blog_second_page'))) : ?>

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

<? endif;?>

<!-- Other html code here -->

希望这会回答您的问题

答案 4 :(得分:0)

我不明白你的问题。我想你在视图site_header中加载你的js文件或者查看site_footer,你为什么不为这些页面加载另一个视图?例如:

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");
}

另一个解决方案是在视图中添加一个if以加载检查路径的额外js文件,您可以使用$this->uri->segment()来实现此目的。