JQuery不能正确渲染 [英] JQuery not rendering correctly
问题描述
目前，我有一个jquery函数，我试图去显示时间（我使用的jQuery是这里找到的基本示例： http://jonthornton.github.io/jquery-timepicker/ ）。当我执行Thornton先生的时间选择器时，我可以单击输入字段，并且时间选项列表下拉，但下拉侧没有滚动条/滑块（如他的示例中所示）。我选择的时间值（我可以使用鼠标滚轮在选择中上下移动）可以插入我的SQL数据库（通过$ _POST），但是，我希望能够使用Thornton先生网站上列出的其他jQuery示例 - 但其中没有一个（除了基本示例 - 似乎只是部分工作）将会起作用。附加的是相关的代码。任何输入将不胜感激。此外，我尝试了解本教程（ https：//www.digitalocean .com / community / tutorials / an-introduction-to-jquery ），因此我尝试添加脚本（注意：10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
$ b
<？php
// DOCTYPE starting header .html
include_once（includes / header.html）;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 DTD>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
<！ - < style media =screen>< / style> - >
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> Crime Stoppers< / title>
<！ - - 已添加10/9/17 - >
<！ - < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> - >
<！ - < script src =js / scripts.js>< / script> - >
<！ - 奥斯汀的原始链接和脚本 - >
< link rel =stylesheettype =text / csshref =./ styles / styles.css/>
< link rel =stylesheethref =./ jquery / css / excite-bike / jquery-ui-1.10.3.custom.css/>
< link rel =stylesheethref =./ jquery / css / excite-bike / jquery-ui-1.10.3.custom.min.css/>
< link rel =stylesheethref =./ jquery / timepicker / jquery.timepicker.css/>
< script type =text / javascriptsrc =./ jquery / js / jquery-1.9.1.js>< / script>
< script type =text / javascriptsrc =./ jquery / js / jquery-ui-1.10.3.custom.js>< / script>
< script type =text / javascriptsrc =./ jquery / js / jquery-ui-1.10.3.custom.min.js>< / script>
< script type =text / javascriptsrc =./ jquery / timepicker / jquery.timepicker.js>< / script>
< script type =text / javascript>
$（function（）{
$（'＃basicExample'）。timepicker（）;
// $（'＃scrollDefaultExample'）。timepicker（{'scrollDefault'：'now' }）;
// $（'＃setTimeExample'）。timepicker（）;
// $（'＃setTimeButton'）。on（'click'，function（）{
/ / $（'＃setTimeExample'）。timepicker（'setTime'，new Date（））;
//}）;
}）;
< / script>
< / head>
< body>
< div id =headeralign =center>< img src =./ images / document.pngalt =header/>< / div>
< div align =center>
< h1>犯罪行为人报告< / h1>
< form class =formLayoutaction =Violent.phpmethod =POST>
< fieldset class =table>
< legend>犯罪< / legend>
< div class =tr>
< div class =td right>致电日期：< / div>
< div class =td>< input type =textclass =datepickername =callDate>< / div>
< div class =td right>通话时间：< / div>
< div class =td>< input type =textid =basicExamplename =callTime>< / div>
< / div>
< / fieldset>
< / form>
< / div>
以下代码显示我的滚动条，以及启用基本的时间选择器，以及设置日期示例。它不是每个例子，但会让你在你的路上
< ;! DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns =http ：//www.w3.org/1999/xhtml>< HEAD> < meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> < title> Crime Stoppers< / title> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < link rel =stylesheettype =text / csshref =https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css> < link rel =stylesheethref =https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.css/> < script type =text / javascriptsrc =https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.js>< / script> < script type =text / javascript> $（document）.ready（function（）{$（'＃basicExample'）。timepicker（）; $（'＃setTimeButton'）。on（'click'，function（）{$（'＃basicExample'）。timepicker （'setTime'，new Date（））;}）}）; < /脚本>< /头><身体GT; < div id =headeralign =center>< img src =./ images / document.pngalt =header/>< / div> < div align =center> < h1>犯罪停止者报告< / h1> < form class =formLayoutaction =Violent.phpmethod =POST> < fieldset class =table> <图例>犯罪与LT; /图例> < div class =tr> < div class =td right>致电日期：< / div> < div class =td>< input type =textclass =datepickername =callDate>< / div> < div class =td right>呼叫时间：< / div> < div class =td>< input type =textid =basicExamplename =callTime>< / div> < / DIV> < /字段集> < /形式> < button id =setTimeButton>设置当前时间< / button> < / div>< / body>< / html>
Currently, I have a jquery function that I'm trying to get to display the time (the jquery I'm using is the Basic Example found here: http://jonthornton.github.io/jquery-timepicker/). When I implement Mr. Thornton's timepicker, I may click on the input field and a list of time options drops down, however there is no scroll bar/slider on the side of the drop down (as there is in his example). The time value that I select (I can use the mouse scroller to move up and down in the selection) is able to be inserted into my SQL db (via $_POST) with no problems, however, I would like to be able to use some of the other jquery examples listed on Mr. Thornton's site - but none of them (with the exception of the Basic Example - which seems to be only partially working) will work. Attached is the pertinent code. Any input would be much appreciated. Also, I tried going through this tutorial (https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery) and hence I tried adding the script (note: 10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js) but that didn't seem to have any effect.
<?php
//DOCTYPE begins header.html
include_once("includes/header.html");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style media="screen"></style>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<!--added 10/9/17-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="js/scripts.js"></script>-->
<!--Austin's Original links and scripts-->
<link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#basicExample').timepicker();
// $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
// $('#setTimeExample').timepicker();
// $('#setTimeButton').on('click', function (){
// $('#setTimeExample').timepicker('setTime', new Date());
// });
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header"/></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
</div>
The following code displays the scroll bar for me, as well as enables basic timepicker, as well as the set date example. Its not every example, but will get you on your way
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#basicExample').timepicker();
$('#setTimeButton').on('click', function () {
$('#basicExample').timepicker('setTime', new Date());
})
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
<button id="setTimeButton">Set current time</button>
</div>
</body>
</html>
这篇关于JQuery不能正确渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
