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

Question

I'm using JQuery tabs. Every tab loads a different file.

In one of the tabs, there's a form that is ajax - submitted. After the form is successfully submitted, a message appears in that tab: "successful!!" and I have a link for reloading the original form, in case you want to make another form submission.

I need to re-load that tab, not just "relocate", because on the load method some things are initialized, like a JS date-picker.

This is how the tabs are created:

<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>

This is the code for the tabs loading. If "theCalendar()" function is not invoked, then the date-picker that uses this form is not available, so it has to be there:

    $('#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();
            }           
        }
    });

The form I'm talking about is in the 3rd tab (createMeeting.jsp) and then the submit code is:

    $('#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);

    }
    });
    

});

So far, everything works fine, the form is submitted and the resulting html is shown on that very same tab.

Finally, in that resulting html there's a link for loading the form again in case you want to add another record:

<a id="createAnotherMeeting" class="vacanteItem" href="createMeeting.jsp">Add another one</a>

And is handled like this from the main file:

    $("#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

    });

There's an "option 1,2 and 3" comments because I've tried all of those (one at the time), however I keep getting this error:

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)
... 
...

I was able to change the location of the tab so the createMeeting.jsp file is shown, however, that didn't solve my problem since the date-picker function wasn't loaded, and the submit button wasn't recognized by JQuery (these things are done when the tab is loaded)

All I need is to reload that tab when the link is clicked.

Any help will be really appreciated.

Answer 1

it turns out that I had a reference to another version of jQuery and materialize at the bottom of 'hidden' in another page (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>

I deleted them and the error disappeared ;)

In order to re-load the tab using that link, I did another ajax submit, so I could invoke the date-picker and the other stuff:

$("#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);
    }
    });

});

Maybe it's not the cleanest solution, but it works.