使用：https://github.com/boonep/jquery-hex-colorpicker
在我在Flask应用程序中发布页面之前一直运行良好，然后出现错误：Uncaught TypeError：jQuery（...）。hexColorPicker不是函数。
我试过移动脚本源，并且chrome说所有源，css，js等都在下载。
我正在附加Chrome中的页面源，因此您可以看到Flask卡在那里。
有任何帮助吗？ THX。
<!DOCTYPE html>
<html>
<head>
<title>
Orerry Dashboard
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<head>
<title>Dashboard</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="../static/jquery-hex-colorpicker.css" />
<link rel='stylesheet' href='../static/dashboard.css'/>
<script src="../static/jquery-hex-colorpicker.min.js"></script>
</head>
<body class="form-dashboard">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed btn-sm" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tycho Design, Inc.</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/signup">Sign Up</a></li>
<li class="active"><a href="/dashboard">Dashboard</a></li>
<li><a href="/maintenance">Maintenance</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/logout">LogOut</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</nav>
<div class="container">
<input id="csrf_token" name="csrf_token" type="hidden" value="IjhkYjFlOWI3YTM4MDhmMDI0ZGU2MTEzZWM4NzEzNjEzMGFkMGI0NDMi.DYdXTg.Cd3U9myTiC_o1nxWZIwIv-YZY0U">
<h4>Move to Current Time and Date.</h4>
<form action="" id='currentdate' method="">
<button type="submit" id='curdate' action= "/move_cur_date" method = 'POST' class="btn btn-success btn-sm" tabindex="1" >Current Date</button>
</form>
<hr>
<p> <h4>Move the Orerry to Any Date:</h4></p>
<form class='move_it' action="/mov_new_date" method="POST">
<div style='width: 40%'>
<div class="form-group "><label class="control-label" for="date_togo">YYYY/MM/DD HH:MM:SS</label>
<input class="form-control" id="date_togo" name="date_togo" type="text" value="">
</div>
</div>
<input type="submit" class="btn btn-success btn-sm" name="button_move_it" tabindex="2"></button>
</form>
<hr>
<h4>Other Functions</h4>
<div class="picker-form-wrapper">
<form class="picker-form">
<p>Change Color or Brightness of the Sun:
<form class='color_change' action="/color_change" method="POST">
<input type="text" id="color-picker1"/>
<input type="submit" class="btn btn-success btn-sm" name="color_picker_btn" tabindex="3"></button>
</form>
</form>
</div>
<div id="button-sel" >
<p>Accelerate the Orerry:
<button type="button" id='accelerate' class="btn btn-success btn-sm" tabindex="4" >Accelerate!</button></p>
<p>Pause Everything Temporarily!:
<button type="button" id='pause' class="btn btn-warning btn-sm" tabindex="7" >Pause</button>Resume:
<button type="button" id='resume' class="btn btn-success btn-sm" tabindex="7" >Resume</button></p>
<p>Send Email to Support:
<button type="button" id='semail' onclick= "window.location.href='/contact'" class="btn btn-warning btn-sm" tabindex="5" >Email</button></p>
<p>Put the Orerry to Long Term Sleep:
<button type="button" id='go_sleep' class="btn btn-warning btn-sm" tabindex="6" >Go To Sleep!</button>
Wake Up from Sleep:
<button type="button" id='wake_up' class="btn btn-success btn-sm" tabindex="7" >Wake Up!</button></p>
Shut Down the Computer:
<button type="button" id='shut_down_computer' class="btn btn-danger btn-sm" tabindex="8" >Shut Down!</button></p>
<p>Reboot the Orerry Program:
<button type="button" id='reboot' class="btn btn-danger btn-sm" tabindex="9" >Reboot</button></p>
<p>Home all Objects:</p>
<button type="button" id='user_homing' class="btn btn-success btn-sm" tabindex="10" >Home All!</button></p>
</div>
<p>Responses from Server</p>
<textarea name="TextArea1" id="TextArea1" rows="30" style="width: 100%", readonly="True"></textarea>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
jQuery(function(){
jQuery("#color-picker1").hexColorPicker();
jQuery(".color-picker").hexColorPicker({
"container":"dialog",
});
});
});
$(document).ready(function(){
$('#button-sel').on('click', function(event) {
var targ = event.target.id;
//alert("You clicked on: " + targ);
$.ajax({
type: 'POST',
url: targ,
data: 'none',
success: function(result){
if (result != ''){
var rslt= result;
$('#TextArea1').prepend(result);
}}
});
});})
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: 'POST',
url: "get_msgs",
data: 'None',
success: function(result) {
if (result != '')
$('#TextArea1').prepend(result);
}
})
}, 3000);
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：0)
还是同样的问题： 仪表板：109未捕获的TypeError：jQuery（...）。hexColorPicker不是函数
我将脚本和源代码放入{{super（）}}块并使用{％block content％}代替/ body标签，没有区别。似乎Flask在页面末尾插入的源代码会以某种方式干扰colorpicker js。
我尝试删除第一个 SRC =＆＃34; HTTPS：//code.jquery.com/jquery-1.12.4.min.js"因为它与Flask在底部插入的相同，这导致colorpicker.js无法加载。 由于Flask在页面底部插入两个源，我应该在页面加载后以某种方式加载颜色选择器吗？只是在这里猜测。
Chrome调试器会显示所有下载源和脚本。
答案 1 :(得分：0)
想出来。将脚本放在Flask超级块中，并将'defer'添加到colorpicker.js
{{super()}}
<link rel="stylesheet" href="../static/jquery-hex-colorpicker.css" />
<link rel='stylesheet' href='../static/dashboard.css'/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="../static/jquery-hex-colorpicker.min.js" defer></script>
{% endblock %}