未捕获的 ReferenceError：$ 未定义 - Datepicker - Codeigniter 3答案

【问题标题】：Uncaught ReferenceError: $ is not defined - Datepicker - Codeigniter 3未捕获的 ReferenceError：$ 未定义 - Datepicker - Codeigniter 3
【发布时间】：2019-09-07 14:32:07
【问题描述】：

你好！

首先，非常感谢您的帮助！

场景：

1°我使用codeigniter

2° 我在我的视图文件中添加了这个非常简单的脚本。

(https://jqueryui.com/datepicker/#default)

3° 这是我在浏览器中收到的错误消息：

Uncaught ReferenceError: $ is not defined at VM113 info:21
(anonymous) @ VM113 info:21

这是我的控制器方法：

public function info()
{
    $data['pagetitle'] = 'general use';

    $this->load->view('theme/header1');
    $this->load->view('multiform/register2',$data);
    $this->load->view('theme/footer');
}

这是我的 Header VIEW 文件：header1

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Teste</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/testelib/jquery-ui.min.css">   

<script type="text/javascript" defer src="<?php echo base_url(); ?>assets/testelib/jquery-3.3.1.min.js"></script>

<script type="text/javascript" defer src="<?php echo base_url(); ?>assets/testelib/jquery-ui.js"></script>

<script>

    $( "#datepicker" ).datepicker({
    inline: true
    });
</script>

这是我的 VIEW 文件：register2

<p>Date: <input type="text" id="datepicker"></p>

PS：如果我用“同一文件夹中的所有文件”来做这个例子，脚本可以正常工作。

仅仅因为 Jquery 库的 .js 和 .css 链接在单独的文件中，我就遇到了这个冲突。

请问我该怎么办？

非常感谢您。

【问题讨论】：

base_url() 的值是多少？你能在新标签中打开那个 js 链接吗（从查看页面源代码）？
是的@Hasta Dhana！我可以在新选项卡中打开该 js 和 css 链接（从查看页面源代码）。关于 base_url，它返回您的站点基本 URL，如您的配置文件中指定的那样。 [链接]codeigniter.com/user_guide/helpers/url_helper.html#base_url
既然你用的是jquery，别忘了添加一个准备好的文档：stackoverflow.com/a/55265341/2275490
您好@Vickel，非常感谢您的提示，但是当我添加此脚本行时，现在我收到此错误消息： Uncaught TypeError: $(...).datepicker is not a function在 info:23（匿名）@ info:23
尝试从他们的 cdn 中使用 jquery 和 jquery-ui：code.jquery.com

标签： jquery codeigniter jquery-ui jquery-plugins codeigniter-3

【解决方案1】：

包含此脚本以包含 jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$ 符号未定义，因为 jquery 未包含在脚本中

【讨论】：

您好@236379 ktr.et.cse.16，非常感谢您的提示，但是当我添加此脚本行时，现在我收到此错误消息：Uncaught TypeError: $( ...).datepicker 不是函数 在 info:23 ** **(anonymous) @ info:23 我更改了此示例的脚本，但错误消息仍然存在相同： Uncaught TypeError: $(...).datepicker is not a function at info:23 (anonymous) @ info:23 我还应该尝试什么？
像这样实现日期选择器：$(document).ready(function() { $( "#datepicker" ).datepicker({ inline: true }); });
您好@236379 ktr.et.cse.16，非常感谢您的提示，但是当我添加此脚本行时，现在我收到此错误消息：Uncaught TypeError: $( ...).datepicker 不是函数 在 info:23 (anonymous) @ info:23
您还需要包含 jQuery UI 的脚本。

【解决方案2】：

，伙计们，非常感谢您的提示、帮助和关注。经过4天的痛苦，我找到了一个帖子，给了我一个指导回答的方法。

@TimBrownlaw 的回答让我眼前一亮。 jquery javascript doesnt work in codeigniter

这些链接格式之间存在兼容性：

<?php echo base_url(); ?>assets/lib/jquery-3.3.1.min.js">

还有这个链接格式：

<?php echo base_url("assets/lib/jquery-3.3.1.min.js"); ?>"

但我认为，即使我已经阅读了整个 C.I 文档，直到今天我都犯了这个错误。

文档公开地说，像这样使用 base_url：

1° echo base_url("blog/post/123");

2° echo base_url("images/icons/edit.png");

https://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url

base_url 与 controllername、method 和 parameter 在（括号）内而不是在外。

另一个问题是元素的 "defer" 属性。这意味着 jQuery 在所有其他 html 加载之后才会加载。

但是一旦加载视图，这段代码就会尝试运行。

$( "#datepicker" ).datepicker({inline: true});

当然，它失败了——jQuery 还没有加载，所以 $ 没有定义。

我从标签中删除了“延迟”属性并且它运行了！。

嗯，就是这样！非常感谢大家！它有效！

【讨论】：