Question posted in
You can find the official documentation here.

Writing a general AJAX function with custom success section – Jquery ajax

I am trying to minimalise the number of similar functions I am adding to my code by writing one general function in jQuery. When it comes to form submissions, the top section of AJAX code is more or less the same for all my applications, however what happens in the success section can vary greatly between applications.

function general_submit_form(url, query, button, form) {
    $(document).on("click", button, function() {
        var data = $(this).closest('form').serialize();
        var url = url + '?' + query;
        $.ajax({
            type: 'POST',
            data: data,
            url: url,
            success: function(data) {
                console.log(data);
                if (data == 0) {
                    alert("Required parameters are empty!");
                } else if (data == 1) {
                    alert("Storage Space Added");
                        //fetch_storage_spaces();
                        $(form)[0].reset();
                        $(".custom_input").closest('tr').addClass('hidden');

                        fetch_storage_names("fetch_storage_names", "#storage_names");
                        fetch_all_storage_submit_forms();   
                    } else if (data == 2) {
                        alert("Storage name or serial taken");
                    }               
                }
            });
    }); 
}

This function is an example of a general function I am trying to write. Is there any way I could change what happens inside the success section of the code outside the function? Specifically inside the data == 1 if statement?

Thank you!

Tags:

2

Answers


  1. 0

    To achieve this you could provide a function as an argument to the general_submit_form() call which you can execute under the right condition, something like this:

    function general_submit_form(url, query, button, form, successHandler) {
  $(document).on("click", button, function() {
    var data = $(this).closest('form').serialize();
    var url = url + '?' + query;

    $.ajax({
      type: 'POST',
      data: data,
      url: url,
      success: function(data) {
        console.log(data);
        if (data == 0) {
          alert("Required parameters are empty!");
        } else if (data == 1) {
          successHandler && successHandler(form); // invoke the callback here, passing the form and any other data
        } else if (data == 2) {
          alert("Storage name or serial taken");
        }
      }
    });
  });
}

general_submit_form('https://example.org/', 'abc=123', 'button', 'form', function(form) {
  alert("Storage Space Added");
  $(form)[0].reset();
  $(".custom_input").closest('tr').addClass('hidden');
  fetch_storage_names("fetch_storage_names", "#storage_names");
  fetch_all_storage_submit_forms();
});
    Login or Signup to reply.
  2. 0

    You can pass success function as parameter too.

    function general_submit_form(url, query, button, form, success) {
    $(document).on("click", button, function() {
        var data = $(this).closest('form').serialize();
        var url = url + '?' + query;
        $.ajax({
          type: 'POST',
          data: data,
          url: url,
          success: success,
        });
    }); 
}

const success_fn = function(data) {
  console.log(data);
  if (data == 0) {
    alert("Required parameters are empty!");
  } else if (data == 1) {
    alert("Storage Space Added");
    //fetch_storage_spaces();
    $(form)[0].reset();
    $(".custom_input").closest('tr').addClass('hidden');

    fetch_storage_names("fetch_storage_names", "#storage_names");
    fetch_all_storage_submit_forms();   
  } else if (data == 2) {
      alert("Storage name or serial taken");
  }               
};

general_submit_form("url", "query", "button", "form", success_fn);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search