2
我正在使用选择框和输入字段进行搜索栏。输入字段使用jQuery预测搜索。选择框有2个选项;位置和存档，位置是默认的。选择存档时，它会用jQuery datepicker函数替换输入字段，并用另一个输入字段替换已删除的字段。在同一页面上导致错误的jQuery重新加载功能
现在，当您选择每个选项一次时，所有这些工作正常。如果您返回并再次选择其中一个选项，它将停止运行并在控制台中生成错误。
Uncaught TypeError: $ is not a function
...存档时再次选择，并...
Uncaught TypeError: Cannot read property 'noConflict' of undefined
...位置时再次选择。
我其实在另一个网站上有另一个类似的搜索栏，效果很好。只是在这个网站上有一个旧的jQuery版本加载在页面的末尾，我无法触及。
因此，如果用户多次选择相同的选项，我该如何解决这些错误/冲突？
搜索栏文件：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://www.example.com/css/foundation3.css">
<script src="http://www.example.com/javascripts/modernizr.foundation.js"></script>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<form id="form1" name="form1" method="post" action="http://www.example.com/search/" >
<div class="row">
<div class="two columns" style="padding: 0;">
<select name="drop_list_menu" id="drop_list_menu" class="drop">
<option value="1">Location</option>
<option value="2">Archive</option>
</select>
</div>
<span id="result_menu">
<div class="eight columns" style="padding: 0;">
<input type="text" name="search" id="search" size="35" style="height: 37px; max-width: 250px; display: inline;" placeholder="Example: New York, NY"/>
</div>
<div class="two columns" style="padding: 0;">
<input type="submit" name="submit" id="submit" value="Search" class="button" style="width: 120px;" />
</div>
</span>
</div>
</form>
<script>
jQuery(document).ready(function($) {
var n;
var u;
var username = '<?php echo $user_name_global;?>';
var tab = '1';
// if user chooses an option from the select box...
$(".drop").change(function (e) {
var SelectId = "#"+e.target.id
//alert(SelectId);
//var element = document.getElementsByClassName('drop').id;
//var changedElement = this;
var i = SelectId.split('menu_')[1];
var sbox_menu = '#sbox_menu';
var result_menu = '#result_menu';
var slot = i;
//alert(result_menu);
// get selected value from selectbox with id #drop_list
var selectedDepartment = $(this).val();
//alert(selectedDepartment);
$.ajax({
url: "http://www.example.com/search/get_dept_search.php",
data: "q="+selectedDepartment,
dataType: "json",
// if successful
success: function (response, textStatus, jqXHR) {
var list = $("#result_menu");
$.each(response.teacherNames, function (i, val) {
$(result_menu).html(val);
});
}});
});
var availableTags = "http://www.example.com/search/get_pred_results.php";
$("#search").autocomplete({
source: availableTags,
select: function (event, ui) {
window.location = ui.item.url;
}
});
//predsearch.stopPropagation();
});
</script>
<script src="http://www.example.com/javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="http://www.example.com/javascripts/app.js"></script>
</body>
</html>
包含替换代码文件：
<?php
$q = $_GET["q"];
if(stripos($q, '1') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$(function() {
var availableTags = "http://www.example.com/search/get_pred_results.php";
$("#search").autocomplete({
source: availableTags,
select: function (event, ui) {
window.location = ui.item.url;
}
});
});
});
</script>
<div class="six columns" style="padding: 0;">
<input type="text" id="search" name="search"/>
<input type="hidden" name="search_url" id="search_url">
</div>
<div class="two columns" style="padding: 0;">
<input type="submit" value="Search" class="button tiny" style="height: 3.4em;">
</div>';
}
if(stripos($q, '2') !== FALSE)
{
$y = array();
$y[] = '<script>
jQuery.noConflict(true);
(function($) {
$(function() {
$("#datepicker").datepicker();
var availableTags = "http://www.example.com/search/get_pred_results.php";
$("#search").autocomplete({
source: availableTags,
select: function (event, ui) {
window.location = ui.item.url;
}
});
});
})(jQuery);
</script>
<div class="six columns" style="padding: 0;">
<div class="four columns" style="padding: 0;"><input type="hidden" name="search_url" id="search_url"><input type="text" id="datepicker" name="datepicker" placeholder="Pick a date"></div><div class="eight columns" style="padding: 0;"><input type="text" id="search" name="search"/ placeholder="Choose a location"></div>
</div>
<div class="two columns" style="padding: 0;">
<input type="submit" value="Search" class="button tiny " style="height: 3.3em;">
</div>
';
}
print json_encode(array(
"teacherNames" => $y,
"anotherReturnValue" => "just a demo how to return more stuff")
);
?>
任何帮助表示赞赏。
您是否尝试删除'$ .noConflict（）;'，您并不需要它，这就是抛出错误的原因。 – adeneo
@adeneo最初$ .noConflict（）不在那里。只有在这种配置下，我才能真正做到这一点。 –
好吧，你没有使用它，因为你正在执行'jQuery（document）.ready（function（$）{'，所以你可能只是删除'$ .noConflict'行，它什么也不做。 – adeneo