on single button want to post a form and also post data by ajax?

Question

I have make a one page in which I have used the KendoUI treeview control and its data is posted by an AJAX call, and there is also form data. Currently I have a separate buttons for the AJAX call and for posting the form, now I want to post form data and also perform the AJAX call on single button.

I have tried to make a jQuery function which triggers both buttons on a single click. I have made another button which has a click event:

<input type=submit onclick="BtnClick" />  <-- on click function call

javascript function:

function BtnClick() {
    $("#Submit").click(); <-- Submit ajax call
    $("#Save").click(); <-- post form
}

In the above function, the AJAX call is going and on same time page is also posting so the AJAX call is not completing.

How can I get this functionality by a single click?

Please advise.

Answer 1

You need to place the code that is run under those buttons within their own functions so that they can be called either individually under the #Save or #Submit buttons, or together under the BtnClick function. Try this:

<form id="myForm">
    <!-- your fields ... -->

    <input type="button" id="postForm" />
</form>

function submitHandler(callback) {
    // make the AJAX call, using the callback parameter as the callback:
    $.ajax({ 
        url: 'foo.com',
        data: { foo: 'bar' },
        success: function() {
            callback && callback();
        }
    });
}

function saveHandler() {
    // post the form
    $('#myForm').submit();
}

function formHandler() {
    // do both
    submitHandler(saveHandler);
}

$("#Submit").click(submitHandler);
$("#Save").click(saveHandler);
$('#postForm').click(formHandler);

Answer 2

you need to send Ajax Call first and in the success function of ajax call trigger form Submit button:

Here is pseudocode:

$.ajax({
...
...
success:function(){

$("#Save").click();
}
})