Javascript 使用CodeIgniter在一个视图中包含两个JS脚本的问题_Javascript_Php_Jquery_Ajax_Codeigniter

Javascript 使用CodeIgniter在一个视图中包含两个JS脚本的问题

javascript php jquery ajax codeigniter

Javascript 使用CodeIgniter在一个视图中包含两个JS脚本的问题,javascript,php,jquery,ajax,codeigniter,Javascript,Php,Jquery,Ajax,Codeigniter,我已经创建了默认视图模板 <html> <head> <?=$head?> </head> <body> <?=$navmenu?> </body> </html> 通过这种方式，我可以轻松地在我的网站的每一页中更改head或navmenu。问题从导航菜单开始。代码如下：

我已经创建了默认视图模板

<html>
        <head>
                <?=$head?>
        </head>
        <body>
                <?=$navmenu?>

        </body>
</html>

通过这种方式，我可以轻松地在我的网站的每一页中更改head或navmenu。问题从导航菜单开始。代码如下：

<header>
    <ul>
        <li><a href='/test4/index.php/Pages/view'>home</a></li>
        <li><a href="/login-link" id="login-link">login</a></li>
        <li><a href='/test4/index.php/Pages/view/about'>About Us</a></li>
        <li><a href='/test4/index.php/Pages/view/faq'>FAq</a></li>
        <li><a href='/test4/index.php/Pages/view/contact'>Contact Us</a></li>
        <li><a href='/test4/index.php/products/create'>Create</a></li>
        <li><a href='/test4/index.php/map'>Map</a></li>
        <li><a href='/test4/index.php/auth/logout'>logout</a></li>
    </ul>
</header>

<div class="loginpop pop">
    <div id="login-div"></div>
</div>

<script type="text/javascript">
function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#login-link').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#login-link'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

$('#login-link').click(function(){
        $.get('../auth/login', function(response){
            $('#login-div').html(response);
        });
        return false;
    });
</script>












功能取消选择（e）{
$（'.pop'）.slideFadeToggle（函数（）{
e、 removeClass（“选定”）；
});    
}
$（函数（）{
$（“#登录链接”）。在（'click'，function（）上{
if（$（this）.hasClass（'selected'））{
取消选择（$（此））；
}否则{
$（this.addClass（'selected'）；
$（'.pop'）.slideFadeToggle（）；
}
返回false；
});
$（'.close'）。在（'click'，function（）上{
取消选择（$（“#登录链接”）；
返回false；
});
});
$.fn.slideFadeToggle=函数（缓和、回调）{
返回这个。设置动画（{opacity:'toggle'，height:'toggle'}，'fast'，easing，callback）；
};
$（“#登录链接”）。单击（函数（）{
$.get（'../auth/login'，函数（响应）{
$（'#login div'）.html（响应）；
});
返回false；
});

我所拥有的是一个弹出窗口，当点击“登录”时会显示该窗口，我从AJAX调用另一个控制器（auth/login方法）获得该窗口的内容。除了一个例外，它工作得很好——如果视图中使用了另一个JS脚本，则登录div为空

以下是无法正常工作的完整视图文件：

<html>
<head>
  <title></title>
<?=$head?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=myApiKey"></script>
<script src="<?php echo base_url() ?>scripts/jquery.colorbox-min.js"></script>
<script src="<?php echo base_url() ?>scripts/gmaps.js"></script>
  <style type="text/css">
    #map {
      width: 700px;
      height: 700px;
    }
  </style>
</head>
<body>
    <?=$navmenu?>
  <div id="map"></div>
  <script type="text/javascript">
    var products = <?= json_encode($products);?>;
    var allMap;

    $(document).ready(function(){
        var allMap = new GMaps({
          el: '#map',
          zoom: 7,
          lat: 37.4419,
          lng: -122.1419
        });
        loadJsonMap(allMap, products);
    });

    function loadJsonMap(map, data){
            var markers_data = [];
            $.each(data, function(key, val){
                        if (val.latitude != undefined && val.longitude != undefined) {
                            markers_data.push({
                                lat : val.latitude,
                                lng : val.longitude,
                                details : {
                                    id : val.holder_id
                                },
                                click : function(e){
                                    if(e.details.id !== undefined){
                                        var url = '<?php echo base_url() ?>index.php/products/colorbox/' + e.details.id;
                                        $.colorbox({
                                            open : true,
                                            href : url,
                                            iframe : false,
                                            innerWidth : 400,
                                            innerHeight : 400,
                                            close : 'Aizvert'
                                        });
                                    }
                                }
                            });
                        }
                    });
            map.addMarkers(markers_data);
    }
  </script>
</body>
</html>


<html>
<head>
  <title></title>
<?=$head?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=myApiKey"></script>
<script src="<?php echo base_url() ?>scripts/jquery.colorbox-min.js"></script>
<script src="<?php echo base_url() ?>scripts/gmaps.js"></script>
  <style type="text/css">
    #map {
      width: 700px;
      height: 700px;
    }
  </style>
</head>
<body>
    <?=$navmenu?>
  <div id="map"></div>
  <script type="text/javascript">
    var products = <?= json_encode($products);?>;
    var allMap;

    $(document).ready(function(){
        var allMap = new GMaps({
          el: '#map',
          zoom: 7,
          lat: 37.4419,
          lng: -122.1419
        });
        loadJsonMap(allMap, products);
    });

    function loadJsonMap(map, data){
            var markers_data = [];
            $.each(data, function(key, val){
                        if (val.latitude != undefined && val.longitude != undefined) {
                            markers_data.push({
                                lat : val.latitude,
                                lng : val.longitude,
                                details : {
                                    id : val.holder_id
                                },
                                click : function(e){
                                    if(e.details.id !== undefined){
                                        var url = '<?php echo base_url() ?>index.php/products/colorbox/' + e.details.id;
                                        $.colorbox({
                                            open : true,
                                            href : url,
                                            iframe : false,
                                            innerWidth : 400,
                                            innerHeight : 400,
                                            close : 'Aizvert'
                                        });
                                    }
                                }
                            });
                        }
                    });
            map.addMarkers(markers_data);
    }
  </script>
</body>
</html>

<html>
        <head>
                <?=$head?>
        </head>
        <body>
                <?=$navmenu?>
<?php echo validation_errors(); ?>

<?php echo form_open_multipart('products/create'); ?>

    <input type="file" name="userfile" size="20" />

    <br /><br />
...(no script here, just html and php echo)
    </body>
</html>

<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/style.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>