Ajax request after submit form

Hi,
trying to make a web request after a form was saved, but it looks like the form is being closed before the request was sent.

fd.spSaved(function (result) {
var postURL = "https://...my web service url...";
var data = JSON.parse('{"partnerID":"' + Dialog.getArgs().partnerID + '","ticketID":"' + Dialog.getArgs().parentID + '","title":"' + fd.field("Title").value + '","author":"' + _spPageContextInfo.userDisplayName + '","userId":"' + _spPageContextInfo.userId + '"}');
jQuery.ajax({
url: postURL,
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
data: JSON.stringify(data),
success: function () {
console.log("call successful.");
}
});
});

Am I doing it the wrong way?

it seems to work with fd.spBeforeSave() instead of fd.spSaved() function.

Dear Alex,

Yes, spSaved() is not an async event, it’s executed and the form is closed.

It should run in spBeforeSave() just fine, and you can even utilize some async functionality in it, so it doesn’t complete saving until the request returns an answer.

First of all Merry Christmas :slight_smile: hope you enjoyed your last few days.

Now to my issue. My function looks similar to Alex's except I run the function on a Button inside a form.

fd.spSaved(function(result) {
var itemId = result.Id;
console.log(itemId);
var postURL = "https://URL";
var data = JSON.parse('{"ItemID":"' + itemId + '"}');
console.log(data);
console.log(JSON.stringify(data));

    jQuery.ajax({
        url: postURL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function () {
            console.log("call successful.");  
            alert('call successful.');   
        },
        failure: function () {
            console.log("something went wrong.");
            alert('something went wrong.');
        }
    });

});

fd.save();

As described, I tried to run the function inside spBeforeSave instead of spSaved() but with no success.

It is special that when I check the console, I get the logs until before the jQuery.ajax HTTP post is sent.
The only indication of an error is this (only appears for a millisecond before the console gets cleared.
image

spBeforeSave() is not an option as I need the Item ID for other reasons along the process. spSaved also worked fine until a couple of weeks ago, and still does on other tenatns.

I have this problem with various customer tenants and urgently need a fix or support.

BR
Andreas

Hello @andy,

Merry Christmas! :christmas_tree:

Most probably the form closes before the function is completed. You can add the code to prevent redirection and see if that will work for you:

//for full screen
fd.spSaved(function(result) {
    //prevent redirection on save
    var redirect = result.RedirectUrl;
    result.RedirectUrl = null;

    //your async function is here
    //after it you can close the form window.location.href = redirect;

});

//for panel

fd.spSaved(function(result) {
    //prevent form panel from closing
    result.KeepPanelOpened = true;

    //your async function is here
});

Hi, Mnikitina
Saadly your fix alone did not work... we also had to put everything in an additional function to get the result.Id after saving. Otherwise, the function would send the HTTP push without the item ID. Strangely, this worked fine for several years and then gradually started to fail at various tenants.

Please let me know if you finde the reason and if this will work in the future.

function SaveFuntcion() {
fd.spSaved(function(result) {
var itemId = result.Id;
console.log(itemId);
var postURL = "https://URL.net";
var data = JSON.parse('{"ItemID":"' + itemId + '"}');
console.log(data);
console.log(JSON.stringify(data));

result.KeepPanelOpened = true;
var redirect = result.RedirectUrl;
result.RedirectUrl = null

    jQuery.ajax({
        url: postURL,
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function () {
            console.log("call successful.");  
            alert('call successful.');   
        },
        failure: function () {
            console.log("something went wrong.");
            alert('something went wrong.');
        }
    });

});

fd.save();
};
SaveFuntcion();

BR
Andreas

Hello @andy,

I don't know why it worked before, but when calling functions inside the fd.spSaved() event, the function doesn't have enough time to complete. That is why we have always suggested using this approach in cases like this.