未捕获的错误:jQuery.tabs 上不存在方法加载

Uncaught Error: Method load does not exist on jQuery.tabs

提问人:Sergio 提问时间:2/4/2023 更新时间:2/4/2023 访问量:43

问:

我正在使用 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 无法识别提交按钮(这些事情是在加载选项卡时完成的)

我所需要的只是在单击链接时重新加载该选项卡。

任何帮助将不胜感激。

javascript jquery jquery-ui-tabs

评论


答:

0赞 Sergio 2/4/2023 #1

事实证明,我引用了另一个版本的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);
    }
    });

});

也许这不是最干净的解决方案,但它有效。