提问人:Sergio 提问时间:2/4/2023 更新时间:2/4/2023 访问量:43
未捕获的错误:jQuery.tabs 上不存在方法加载
Uncaught Error: Method load does not exist on jQuery.tabs
问:
我正在使用 JQuery 选项卡。每个选项卡加载不同的文件。
在其中一个选项卡中,有一个表单是 ajax - submitted。成功提交表单后,该选项卡中会出现一条消息:“成功!!”,并且我有一个用于重新加载原始表单的链接,以防您想再次提交表单。
我需要重新加载该选项卡,而不仅仅是“重新定位”,因为在加载方法上,有些东西是初始化的,例如 JS 日期选择器。
以下是选项卡的创建方式:
<div id="tabs" style="border:0px;">
<ul>
<li><a href="someFile.jsp" class="myMenu">title 1</a></li>
<li><a href="anotherFile.jsp" class="myMenu">title 2</a></li>
<li><a href="createMeeting.jsp" class="myMenu">title 3</a></li>
</ul>
</div>
这是选项卡加载的代码。如果未调用“theCalendar()”函数,则使用此表单的日期选择器不可用,因此它必须存在:
$('#tabs').tabs({
cache: true,
load: function(event, ui) {
var active = $('#tabs').tabs( "option", "active" );
if (active == 2){
$('#amstart').addClass('selectedRadio');
$( "input[type=submit]" ).button();
theCalendar();
}
}
});
我所说的表单位于第 3 个选项卡 (createMeeting.jsp) 中,然后提交代码是:
$('#ui-tabs-3').on('click', '#submitBtn', function(event) {
event.preventDefault();
... //many validations...
myData = $("#formMeeting").serialize();
$.ajax({
url: './meeting_details.jsp',
type: 'POST',
data: myData,
success: function(data){
$('#ui-tabs-3').html(data);
},
error: function (request, status, error) {
alert(request.responseText);
}
});
});
到目前为止,一切正常,表单已提交,生成的 html 显示在同一个选项卡上。
最后,在生成的 html 中,有一个链接用于再次加载表单,以防您想添加另一条记录:
<a id="createAnotherMeeting" class="vacanteItem" href="createMeeting.jsp">Add another one</a>
并且从主文件中是这样处理的:
$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
e.preventDefault();
$("#tabs").tabs("load",2); // option 1
$("#tabs").tabs("load",$(this).attr('href')); // option 2
$(this).parent().tabs("load",2); // option 3
});
有一个“选项 1、2 和 3”注释,因为我已经尝试了所有这些(一次一个),但是我一直收到此错误:
Uncaught Error: Method load does not exist on jQuery.tabs
at Function.error (jquery-3.2.1.min.js?_=1675464032676:2:1979)
at jQuery.fn.<computed> [as tabs] (materialize.min.js?_=1675464032678:6:13237)
at HTMLAnchorElement.<anonymous> (videoConferencias.jsp:242:20)
at HTMLDivElement.dispatch (jquery-1.8.3.js:3058:9)
at HTMLDivElement.eventHandle (jquery-1.8.3.js:2676:28)
...
...
我能够更改选项卡的位置,以便显示 createMeeting.jsp 文件,但是,这并没有解决我的问题,因为没有加载日期选择器函数,并且 JQuery 无法识别提交按钮(这些事情是在加载选项卡时完成的)
我所需要的只是在单击链接时重新加载该选项卡。
任何帮助将不胜感激。
答:
事实证明,我引用了另一个版本的jQuery,并在另一个页面(createMeeting.jsp)的“隐藏”底部具体化:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
我删除了它们,错误消失了;)
为了使用该链接重新加载选项卡,我做了另一个ajax提交,这样我就可以调用日期选择器和其他东西:
$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
e.preventDefault();
$.ajax({
url: './crearMeeting.jsp',
type: 'POST',
data: '',
success: function(data){
$('#ui-tabs-3').html(data);
$('#amstart').addClass('selectedRadio');
$( "input[type=submit]" ).button();
theCalendar();
},
error: function (request, status, error) {
alert(request.responseText);
}
});
});
也许这不是最干净的解决方案,但它有效。
评论