我正在制作一个搜索页面,其中具有单个输入的表单结果将显示在一个Fancybox内。一切工作完美,但如果我关闭花式盒子,那么它将不会打开第二次。使用调试器,我发现阻止它显示的错误是:
Uncaught TypeError: Object function (a,b){返回新的e.fn.init(a,b,h)}没有方法'fancybox'
我使用的代码如下:
头/Jquery脚本:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="includes/fancybox/jquery.fancybox.pack.js?v=2.0.3"></script>
<script type="text/javascript" src="includes/jquery.form.js"></script>
<link rel="stylesheet" href="includes/fancybox/jquery.fancybox.css?v=2.0.3" type="text/css" media="screen" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(".submit").click(function() {
$('#page_effect').fadeIn(500);
});
$(".form").ajaxForm( {
success: function(responseText)
{
$.fancybox({
content : responseText,
maxWidth : 545,
maxHeight : 560,
fitToView : false,
autoSize : false,
closeClick : false,
openEffect : 'fade',
closeEffect : 'fade'
});
$('#page_effect').fadeOut(200);
}
});
});
</script>
形式:
<form name="input" action="search.php" method="post" class="form">
<input name="searchterms" class="input" type="text" />
<input class="submit" type="submit" value="Zoek naar video!" />
</form>
修改了提交post表单的代码。
<script type="text/javascript">
$(document).ready(function() {
$('.submit').click(function(e){
var $query = $('.form').formSerialize();
$('#page_effect').fadeIn(500);
$.ajax({
data: $query,
dataType: 'html',
type: 'post',
url: 'includes/functions.php'
}).done(function(data){
$.fancybox({
content : data,
maxWidth : 545,
maxHeight : 560,
fitToView : false,
autoSize : false,
closeClick : false,
openEffect : 'fade',
closeEffect : 'fade'
});
$('#page_effect').fadeOut(200);
});
e.preventDefault();
});
});
</script>