Jquery success function is not called after executing the rest url

Question

My form details are below:

<form id="CreateAttachmentForm" method="post"  enctype="multipart/form-data"  action="../../uploadFile" >

My file is defined as below:

<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf"    "/>

My custom button related code is below:

<contact:contactbutton
        id="printButton"
        style="position:relative; width:90px; top:27px; height:30px; left:160px;"
        textTop="7px"
        defaultButton="false"
        tabindex=""
        accesskey="C"
        onClickEx="createAttachmentRequest();"
        onfocus="if(event.altKey){click();}">
            <u>C</u>reate
</contact:contactbutton>

I have the following function which is called upon clicking a custom button:

function createAttachmentRequest(){
alert("ONE");
$("#CreateAttachmentForm").trigger("submit", function() {
var formData = new FormData($(this)[0]);
alert("TWO");

$.ajax({
url: 'http://HDDT0214:8080/pqawdTestWebApp/uploadFile',
    type: 'POST',
    data: formData,
    async: false,
    success: function (data) {
        alert("test");
        alert(data)
    },
            cache: false,
    contentType: false,
    processData: false
});

return false;

});

The above Jquery code is calling my rest service successfully and the response is also returned by the rest service. Surprisingly the success function is not getting invoked/called even there is response from rest service. Is there something wrong with my code?

Answer 1

Looking at https://api.jquery.com/trigger, I don't think you can pass a function as the second parameter to the "trigger" method. That argument should be an object or array containing some extra options which are then passed to the event handler function (which should be declared elsewhere). The anonymous function you've defined there runs. Therefore, the normal postback behaviour of the form carries on regardless, and there's no ajax call. That's why you appear to see a response, but don't get the "success" or "error" callbacks triggered - there's never an ajax call in the first place.

What you've done is not the correct way to define an event on an element. The "trigger" method is intended to trigger an event which has already been defined previously. It can't be used to define the event handler itself.

This should work - it creates an event handler for the "submit" event of the form, which suppresses the default postback behaviour and runs the ajax call instead:

$(document).ready(function() {
  $("#CreateAttachmentForm").submit(function(event) {
    event.preventDefault(); //stop default postback behaviour.
    $.ajax({
      url: 'http://HDDT0214:8080/pqawdTestWebApp/uploadFile',
      type: 'POST',
      data: formData,
      success: function (data) {
        alert("test");
        alert(JSON.stringify(data));
      },
      error: function(jqXHR, errorThrown, textStatus) {
        alert("Ajax error: " + jqXHR.status + " - " + jqXHR.statusText);
        console.log(jqXHR.responseText);
      },
      contentType: false,
      processData: false
    });
  });
});

You can then remove the createAttachmentRequest() function and all references to it.

N.B. This will work as long as whatever <contact:contactbutton is renders an <input type="submit"... or <button type="submit"... style button to the page, within the form. If not, you need to amend this to output the correct element, otherwise it will not trigger the form's native submit event.