在ajax之后触发js

Question

I have a page containing all the usual elements (html/php, css, js) and from within it I call (using a form) a page via ajax. All that works just fine and I'm happy with that...EXCEPT it's somehow not completing!

The ajax call is:

$( ".view_button" ).click(function( event ) {
    $( "#reportframe" ).html( "Loading...");
    var geturl = $( "#holder" ).attr("action");
    $.ajax({
        url: geturl,
        type: 'get',
        dataType: 'html',
        async: false,
        data: $('#holder').serialize()
    })
    .done(function(html) {
        $( "#reportframe" ).html(html);
        alert("Loaded!");
    });
});

.view_button is the form's submit button, #holder is the form id and #reportframe is div into which the page is loaded. The reason geturl is set is because depending on the options selected in the form it will change the 'action' attribute of the form to get a different page.

There are two things that I can't seem to resolve:

1. The first time the page is loaded via ajax the 'alert' does not show and most jquery elements do not work. HOWEVER, the second (and subsequent) time the page is loaded via ajax the 'alert' pops up on completion and SOME of the jquery elements work!

2. Getting ALL jquery to work in the loaded page! Specifically there's a tool we load called 'tooltipster' - this clearly doesn't get added in because console says 'tooltipster is not a function', even though the js file is called and loaded.

All js/jquery code and files are called at the end of the loaded page.

One more thing - I can't seem to grab data to display it even though it clearly gets transmitted in the ajax. Any ideas?

Any insights VERY gratefully received!!

Answer 1

If the .view_button element is a submit button then the form will be submit. This means that JS code will stop execution and the page will be transferred. This in turn means that your AJAX call will not be made, or will be aborted before it completes.

To fix this, hook your code to the submit event of the form and call preventDefault() on the provided event to stop the standard submission, like this:

$("#holder").submit(function(e) {
    e.preventDefault();

    $("#reportframe").html('Loading...');

    $.ajax({
        url: $(this).prop('action'),
        type: 'GET',
        dataType: 'html',
        data: $(this).serialize()
    }).done(function(html) {
        $('#reportframe').html(html);
    });
});

Note I removed async: false as it's considered very bad practice, to the point where the browser will warn you not to use it in the console.

Also, as you're using this AJAX request to load remote HTML in to an element you could replace the $.ajax call with load() instead:

$("#holder").submit(function(e) {
    e.preventDefault();    
    $("#reportframe").html('Loading...').load($(this).prop('action'), $(this).serialize());
});