Ajax call leads to page reload

Question

I have the following AJAX call in a React method:

  handleActivitySubmit: function handleActivitySubmit(activity, urlActivity, callbackMy) {
    console.log("making query with activity: " + JSON.stringify(activity));
    $.ajax({
      url: urlActivity,
      dataType: 'json',
      type: 'GET',
      data: activity,
      success: function (data) {
        callbackMy(Object.keys(data));
      }.bind(this),
      error: function (xhr, status, err) {
        console.error(urlActivity, status, err.toString());
      }.bind(this)
    });
  },

Whenever the call is unsuccessful, the entire page reloads and all the state is lost.

Why is that the case?

Answer 1

Your HTML form must be submitting the form to action = url . This is the default way in which forms are handled, ie if you click element <input type="submit" .. /> it will always reload the browser. You will need to use event.preventDefault() within your handler to prevent the default action.

Get the click event on form submit as the last argument of handleActivitySubmit ie

handleActivitySubmit: function handleActivitySubmit(activity, urlActivity, callbackMy, event) {
  event.preventDefault();
  // your remaining code
  }