CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxforms
Nuno Silva
Nuno Silva

Reputation: 758

Abort AJAX and form submitions, save them, change them, and send it later

I need to request additional credentials to a user when he clicks certain buttons and submits certain forms.

I way I am trying to do it is:

My current code for AJAX requests is:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
  if (ajaxOptions.type === "POST") {
    $.current_request = jqXHR;
    jqXHR.abort();
    $.check_password_with_my_dialog();
  }
});

$.check_password_with_my_dialog: function() {
  $("#validate-password-prompt").dialog({
    modal: true,
    title: "input pw",
    buttons: {
      Ok: function() {
        $.password = $("#validate-password-prompt input").val();
        $.deliver_current_request();
        return $(this).dialog("close");
      },
      Cancel: function() {
        return $(this).dialog("close");
      }
    }
  });
}

deliver_current_request: function() {
  $.current_request.beforeSend = function(jqXHR, ajaxOptions) {
    ajaxOptions.data = ajaxOptions.data.concat("&password=" + $.password);
  };
  $.ajax($.current_request);
}

The problem so far is that ajaxOptions.data is undefined, so I can't add my data. And the requests seems to be going as a GET instead of POST.

Am I doing this the right way, or am I way of?

Upvotes: 0

Views: 194

Answers (1)

Sagar Bommidi
Sagar Bommidi

Reputation: 1409

updated

Here is a way i can think of to accomplish answer for your question.

<form id="myForm" >
  <button id="submit-form-btn">Submit</button>
</form>
<div id="validate-admin-password-prompt">
    <input type="password"/>
</div>

In javascript,

function submitForm(pwd) {
    var formData = $('form#myForm').serialize() + "&password=" + pwd;
    $.ajax({
        type: "POST",
        url: "http://google.com",
        data: formData,
        dataType: "script"
    });
    alert("POSTed: " + formData.toString());
}

function alertDialog() {
  $("#validate-admin-password-prompt").dialog({
    modal: true,
    title: "Admin password is required",
    zIndex: 10000,
    buttons: {
      Ok: function() {
        $(this).dialog("close");
        var pwd = $("#validate-admin-password-prompt input").val();
        submitForm(pwd);
      },
      Cancel: function() {
        $(this).dialog("close");
        alert('Not authorized to submit the form');
        return false;
      }
    }
  });
}
$("#submit-form-btn").click(function(e) {
  e.preventDefault();
  $ele = $("#validate-admin-password-prompt input");    
  if ($ele.val()==null || $ele.val().trim()=="") {
      alertDialog();
  } else {
      submitForm($ele.val());
  }
});

Upvotes: 1

Related Questions