jquery函数在ajax加载的jquery选项卡中不起作用
我很难让jquery函数(datepicker和dialog)在jQueryAjax加载的选项卡中工作 当我单击相应的选项卡时,我不断得到一个“datepicker不是函数”或“dialog不是函数”。我在网上搜索了很多关于这个问题的信息,也有类似的问题,但是我找不到适合我的解决方案 我明白,如果出现这样的错误,问题可能是由于系统无法识别脚本。因此,在更高的层次上,我并不真正理解ajax加载选项卡如何处理与主脚本相关的脚本 希望我的代码能帮助说明我的错误 header.htmljquery函数在ajax加载的jquery选项卡中不起作用,ajax,jquery-ui-dialog,jquery-ui-datepicker,jquery-tabs,Ajax,Jquery Ui Dialog,Jquery Ui Datepicker,Jquery Tabs,我很难让jquery函数(datepicker和dialog)在jQueryAjax加载的选项卡中工作 当我单击相应的选项卡时,我不断得到一个“datepicker不是函数”或“dialog不是函数”。我在网上搜索了很多关于这个问题的信息,也有类似的问题,但是我找不到适合我的解决方案 我明白,如果出现这样的错误,问题可能是由于系统无法识别脚本。因此,在更高的层次上,我并不真正理解ajax加载选项卡如何处理与主脚本相关的脚本 希望我的代码能帮助说明我的错误 header.html <head
<head>
...
<!-- External javascript call -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/main.js"></script>
</head>
谢谢你的帮助
编辑:我应该注意,当您在自己的浏览器窗口中查看view_sch.php页面时,它工作得很好。通过ajax加载的jquery选项卡查看页面时会出现问题。我注意到您在文档就绪处理程序之前缺少jquery对象。如果没有它,你的代码根本无法加载
$(document).ready(function(){...})
或者更好
$(function(){...})
效果也一样我想我已经弄明白了(在我朋友的帮助下)。我首先删除了view_sch页面中多余的外部脚本调用,因为header.html已经处理了这个问题。接下来,我使用jquery选项卡中的函数,特别是“load”事件来创建回调情况。具有讽刺意味的是,在我将if条件添加到加载块之前,如果您多次选择该选项卡,它仍然不起作用。希望下面的代码能帮助其他人
schedule.js
var GAME = {
loadDialog: function() {
$( "#date" ).datepicker();
$( "#AddGameForm" ).dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true,
buttons: {
"Add New Game": function() {
// Add game to database
GAME.add();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( "#add-game" )
.button()
.click(function() {
$( "#AddGameForm" ).dialog( "open" );
});
},
add: function() {
var form_data = $('form').serialize();
$.ajax({
type: "POST",
url: "../manager/add_game.php",
data: form_data, // Data that I'm sending
error: function() {
$('#status').text('Update failed. Try again.').slideDown('slow');
},
success: function() {
$('#status').text('Update successful!').slideDown('slow');
},
complete: function() {
setTimeout(function() {
$('#status').slideUp('slow');
}, 2000);
},
cache: false
});
}
}
$(document).ready(function() {
// Load game dialog
GAME.loadDialog();
});
var GAME = {
loadDialog: function() {
$("#date").datepicker();
$( "#AddGameForm" ).dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true
}
});
}
}
$(document).ready(function()
{
// jQuery UI Tabs
$('#tabmenu').tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$(anchor.hash).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. "
);
}
},
load: function ( event, ui ) {
if (ui.index == 2) {
// Load game dialog
GAME.loadDialog();
$( "#add-game" ).on("click", function() {
$( "#AddGameForm" ).dialog( "open" );
});
}
}
});
$(function(){...})
var GAME = {
loadDialog: function() {
$("#date").datepicker();
$( "#AddGameForm" ).dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true
}
});
}
}
$(document).ready(function()
{
// jQuery UI Tabs
$('#tabmenu').tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$(anchor.hash).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. "
);
}
},
load: function ( event, ui ) {
if (ui.index == 2) {
// Load game dialog
GAME.loadDialog();
$( "#add-game" ).on("click", function() {
$( "#AddGameForm" ).dialog( "open" );
});
}
}
});