We Keep Coding

how to disable button during ajax request

so I have a razor form and I want to disable a button during ajax request.
Also I want to be able to send only one request to controller - (disable any flood attempt)
This is my html:
<div class="row">
<div class="col-md-8 col-md-offset-2">
#using (Html.BeginForm(null, null, FormMethod.Post, new { id = "contactForm" }))
{
<div class="clearfix">
<div class="cf-left-col">
<div class="form-group required">
#Html.TextBoxFor(m => m.CheckInCheckOutDate, new { #class = "form-control input-md round", #required = "required", #autocomplete = "off", #id = "input-id", #placeholder = Resources.Resources.CheckInCheckOutPlaceholderKey })
<div>
#Html.ValidationMessageFor(m => m.CheckInCheckOutDate, null, new { #class = "text-danger" })
</div>
</div>
<div class="form-group required">
#Html.TextBoxFor(m => m.Name, new { #class = "form-control input-md round", #required = "required", #placeholder = "Name" })
<div>
#Html.ValidationMessageFor(m => m.Name, null, new { #class = "text-danger" })
</div>
</div>
<div class="form-group required">
#Html.TextBoxFor(m => m.MobilePhone, new { #class = "form-control input-md round mobile", #required = "required", #placeholder = "Mobile phone" })
<div>
#Html.ValidationMessageFor(m => m.MobilePhone, null, new { #class = "text-danger" })
</div>
</div>
<div class="form-group required">
#Html.TextBoxFor(m => m.EMail, new { #class = "form-control input-md round", #required = "required", #placeholder = "E-Mail" })
<div>
#Html.ValidationMessageFor(m => m.EMail, null, new { #class = "text-danger" })
</div>
</div>
<div class="form-group required">
#Html.TextBoxFor(m => m.AdultsNumber, new { #class = "form-control input-md round person", #required = "required", #placeholder = "Guests" })
<div>
#Html.ValidationMessageFor(m => m.AdultsNumber, null, new { #class = "text-danger" })
</div>
</div>
<div class="form-group required">
#Html.TextBoxFor(m => m.ChildrenNumber, new { #class = "form-control input-md round person", #placeholder = "Children" })
</div>
</div>
<div class="cf-right-col">
<div class="form-group required">
#Html.TextAreaFor(m => m.MessageBody, new { #class = "form-control input-md round", #rows = 10, #placeholder = "Message" })
<div>
#Html.ValidationMessageFor(m => m.MessageBody, null, new { #class = "text-danger" })
</div>
</div>
#*localhost*#
#*<div class="g-recaptcha" data-sitekey="6LdKaUAUAAAAAMi2MkpRBxJYnmqWJmnJmF22RsRF1"></div>*#
</div>
</div>
#Html.HiddenFor(m => m.MobilePrefixCountry)
#Html.HiddenFor(m => m.ApartmentName)
#Html.HiddenFor(m => m.NumberOfNights)
<br />
<div class="align-left pt-10">
<div class="form-group">
<input id="submitBtn" class="btn btn-default" type="submit" value="Send Message" />
</div>
</div>
<div id="successAlert" class="alert alert-success collapse">
×
<strong>Success!</strong> You have successfully send email. Our staff will respond in shortest amount of time.
</div>
<div id="errorAlert" class="alert alert-danger collapse">
×
<strong>Sending failed!</strong> Please fill all neccessery fields and try again.
</div>
}
</div>
</div>
I have this js:
$("#contactForm").submit(function (e) {
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").attr("value", 'Sending...');
//$.ajax({
// type: "POST",
// async:false,
// url: "/Home/SendEmail",
// data: form.serialize(), // serializes the form's elements.
// success: function (data) {
// if (data == "True") {
// $('#successAlert').show('fade')
// .delay(9000)
// .fadeOut(function () {
// $(this).remove();
// });
// }
// else if (data == "False") {
// $('#errorAlert').show('fade')
// .delay(6000)
// .fadeOut(function () {
// $(this).remove();
// });
// }
// }
//});
setTimeout(function () {
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
}, 3000);
e.preventDefault();
});
This works just fine, but when I uncomment ajax section, I am not able to see transition of toggling button disable/enable. I've put async:false.
UPDATED (still not working):
$("#contactForm").submit(function (e) {
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").attr("value", 'Sending...');
$.ajax({
type: "POST",
async: false,
url: "/Home/SendEmail",
data: form.serialize(), // serializes the form's elements.
success: function (data) {
if (data == "True") {
$('#successAlert').show('fade')
.delay(9000)
.fadeOut(function () {
$(this).remove();
});
}
else if (data == "False") {
$('#errorAlert').show('fade')
.delay(6000)
.fadeOut(function () {
$(this).remove();
});
}
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
},
error: function () {
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
}
});
e.preventDefault();
});

Change async: false to async: true and enable button again in some callback of ajax request. As long as you keep async: false you are blocking main thread and changes for GUI elements will not take effect till function returns.
async from false to true is the only change to #adaptable.services' code.

Place your button enable code inside the ajax success.
This will enable the disabled button after ajax completion.

first make your <input type="submit"> to <button type="submit">Send Message</button>
and then try this..
<script>
$("#contactForm").submit(function (e) {
e.preventDefault();
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").html('Sending...');
$.ajax({
type: "POST",
async:false,
url: "/Home/SendEmail",
data: form.serialize(), // serializes the form's elements.
success: function (data) {
if (data == "True") {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
$('#successAlert').show('fade')
.delay(9000)
.fadeOut(function () {
$(this).remove();
});
}
else if (data == "False") {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
$('#errorAlert').show('fade')
.delay(6000)
.fadeOut(function () {
$(this).remove();
});
}
},
error: function () {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
}
});
});
</script>

$('#button').attr("disabled", true);
$.ajax({
url: url,
data: data,
type: 'post',
dataType: 'json',
cache: false,
async: true,
complete: function(response){
$('#button').attr("disabled", false);
},
});

MVC Asp.Net Controller returns raw JSON to new window

like my title says, I have a problem where my MVC Controller alwas returns the JsonResult in an new window and don't return it back to the ajax success event.
I also tried to GET the data from the Controller via Ajax or change the contenttype to something like "application/json", but I always get a new window with my raw Json data. In my opinion, the problem has to be something with the controller or the javascript is unable to catch the json data.
It's also not a browser specific problem, I have this in every common browser.
Is there anything I miss or is it just weird?
Controller:
public JsonResult Update(ChangeUserInformationViewModel model)
{
var user = UserManager.FindById(User.Identity.GetUserId());
user = model.User;
UserManager.Update(user);
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}
Ajax:
$(document).ready(function () {
$('#save-user-alert').click(function () {
$("#ChangeUserInformation").submit();
});
$('#save-user-alert').on("submit", function (event) {
event.preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: formData,
contentType: "json",
success: function (resp) {
if (resp.success) {
swal("Goo Job!", "Yippii", "success");
};
},
error: function (resp) {
swal("Failes", "Upps.. something went wrong", "danger");
}
});
});
});
Html:
#using (Html.BeginForm("Update", "User", FormMethod.Post, new { id = "ChangeUserInformation" }))
{
<div class="form-group">
<label for="Username">Username</label>
#Html.TextBoxFor(x => x.User.UserName, new { #class = "form-control", value = Model.User.UserName, id = "Username" })
</div>
<div class="form-group">
<label for="FirstName">First Name</label>
#Html.TextBoxFor(x => x.User.Firstname, new { #class = "form-control", value = Model.User.Firstname, id = "FirstName" })
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
#Html.TextBoxFor(x => x.User.LastName, new { #class = "form-control", value = Model.User.LastName, id = "LastName" })
</div>
}
<button class="btn btn-danger waves-effect waves-light btn-sm" id="save-user-alert">Click me</button>
Pleas help me!
Sebastian

You are gettting the JSON response in the browser because your code is not doing an ajax post, instead it is doing a normal form submit.
Why is it not doing the ajax submit ?
Because you do not have any code which says to do so. You are binding the submit event to the wrong element. You should bind it to the form, not the button.
$('#ChangeUserInformation').on("submit", function (event) {
event.preventDefault();
// do your ajax call
});
Now when user clicks the other button, it will call the submit event on the form and the above submit event handler will be invoked and it will make an an ajax call..

I think the problem is that you are using the form Submit for your ajax call.
Change your javascript code into this to remove the submit behavior:
$('#save-user-alert').click(function () {
event.preventDefault();
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: formData,
contentType: "json",
success: function (resp) {
if (resp.success) {
swal("Goo Job!", "Yippii", "success");
};
},
error: function (resp) {
swal("Failes", "Upps.. something went wrong", "danger");
}
});
});

MVC AJAX post sending updated model data

I'm trying to send a post request to the Action with the Model data after the value of some of it's properties is changed :
#{
JsonSerializerSettings jss = new JsonSerializerSettings {
ReferenceLoopHandling = ReferenceLoopHandling.Ignore };
}
<div id="contents">
<!--Lead Stage-->
#if (Model.LeadStagesNav != null)
{
for (int i = 0; i < Model.LeadStagesNav.Count; i++)
{
#Html.HiddenFor(a => a.LeadStagesNav[i].PermissionId)
<div class="form-group" style="margin-bottom:10px">
#Html.Label("Lead Stage", new { #class = "col-md-2" })
<div style="display:inline-block;position:relative">
#Html.DropDownListFor(model => model.LeadStagesNav[i].Name, null, new { #class = "form-control", #style = "width:200px", onchange = "ChangeValue()" })
</div>
#if (ViewData["LeadStagesNav[" + i + "].LeadStatus"] != null)
{
<!--Lead Status-->
#Html.Label("Lead Status", new { #style = "margin-left:15px;margin-right:15px" })
<div style="display:inline-block;position:relative">
#Html.DropDownListFor(model => model.LeadStagesNav[i].LeadStatus, null, new { #class = "form-control", #style = "width:200px", onchange = "ChangeValue()" })
</div>
if (ViewData["LeadStagesNav[" + i + "].LeadSubStatus"] != null)
{
#Html.Label("Lead Sub Status", new { #style = "margin-left:15px;margin-right:15px" })
<div style="display:inline-block;position:relative">
<!--Lead Sub Status-->
#Html.DropDownListFor(model => model.LeadStagesNav[i].LeadSubStatus, null, new { #class = "form-control", #style = "width:200px" })
</div>
}
}
</div>
<!--Delete Button-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Delete Lead Stage"
onclick="document.getElementById('index').value = #i"
name="submit" class="btn btn-default" />
<input type="hidden" id="index" name="index" />
</div>
</div>
}
}
</div>
<script type="text/javascript">
window.ChangeValue = function () {
var model = #Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented, jss));
$.ajax({
method: "POST",
url: "/CmsPermissions/Edit",
data: { permission: model },
success: function (data) {
$("#contents").html(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
};
the thing is the The problem is that I get the old model data
posted to the Action instead of the
new data after the dropdown selected value has changed,
Anyone has any idea ?

that is because you are passing the old model as data
var model = #Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented, jss));
you need to serialize your form and pass it an example is
function SubmitForm() {
var data = $("#YourFormID").serialize();
var url = "/YourURL/ACtion"
var form = $('#policyForm')[0]
var formdata = false;
if (window.FormData) {
formdata = new FormData(form);
}
return $.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: formdata ? formdata : data,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
error: function () {
$('#imgLoadingForPortal').modal('hide');
Lobibox.notify('error', {
size: 'mini',
rounded: true,
delay: false,
position: 'center top', //or 'center bottom'
msg: 'Something went wrong..please try again later',
sound: false,
delay: 5000,
});
}
})
}

send parameters to aspx webform codebehind method using ajax in asp.net mvc

I'm developing asp.net mvc 5 web application.
I want to send parameters to aspx web-form code-behind method using ajax in asp.net mvc
I have following aspx web page and relevant files
within that Incomplete_Prodcut.aspx.cs codebehind file I have webmethod which is
[WebMethod]
public static string OnSubmit(string type, string category, string country, string subsidary, string dateHERE)
{
return "it worked";
}
This is what I did upto now
.................
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group"></div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
#Html.LabelFor(m => m.Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.Type, Model.TypeList, "Select the type", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Type, "", new { #class = "text-danger" })
</div>
</div>
</div>
..............................
<div class="row">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" id="report" value="Generate Report" class="btn btn-success submit" />
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
................................
<script type="text/javascript">
$('#report').click(function () {
var type = $('#Type');
var category = $('#Category');
var country = $('#Country');
var subsidary = $('#Subsidary');
var dateHERE = $('#Date');
var dataValue = { type: type.val(), category: category.val(), country: country.val(), subsidary: subsidary.val(), dateHERE: dateHERE.val() };
$.ajax({
type: "POST",
url: "/Report/Incomplete_Prodcut.aspx/OnSubmit",
data: dataValue,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
},
success: function (result) {
alert("We returned: " + result);
}
});
});
</script>
}
but once I click "Generate Report" button Im getting following error
Internal Server Error

Ajax request returns OLD HTML from Controller Method that is passing NEW HTML

I'm working with .NET Framework / MVC 4 / C#. I have a View that contains a Partial View which I update/refresh depending on user actions which include clicking a SAVE or CANCEL button. An Ajax request calls a Controller method which returns a Partial View with a blank model to refresh the View. THE PROBLEM is that when returning to the Ajax call from the Controller method, the HTML that the Ajax call presents is the OLD HTML from the Partial View that I am trying to replace??? The model returned by the Controller method is definitely blank, but the Ajax request is not getting it for some strange reason.
After the user clicks either button:
A javascript function is triggered.
The Form inside the Partial View is serialized (hidden inputs, text boxes, and dropdowns).
The serialized Form data is passed into an Ajax request which calls a Controller method and passes in the data.
//Submit a New Payment
$('#paymentpartial').on("click", ".savepayment", function () {
event.preventDefault();
var $form = $('form');
if ($form.valid()) {
var form = $form.serialize();
//Save
$.ajax({
url: '/Payments/SavePayment',
datatype: "json",
traditional: true,
data: form,
cache: false,
success: function (html) {
$("#paymentpartial").html(html);
oTable.fnDraw();
},
//AJAX call failed
error: function (data, status, errorThrown) { alert(status + ", " + errorThrown); }
});
}
return false;
});
Controller method does stuff and returns a Partial View with a blank model.
public ActionResult SavePayment(PaymentSummaryVM model)
{
try
{
//Save Stuff Here
//Build a brand new model for the Partial View
PaymentSummaryVM newModel = new PaymentSummaryVM();
newModel.ParticipantId = model.ParticipantId;
List<PaymentType> pTypes = db.PaymentTypes.Where(pt => pt.Active == true).OrderBy(pt => pt.ord).ToList();
newModel.PaymentTypeList = new SelectList(pTypes, "PaymentTypeId", "Name");
return PartialView("_AddEditPayment", newModel);
}
catch (Exception ex)
{
TempData["Error"] = "There were errors while saving your changes. " + ex.Message;
return RedirectToAction("Index", new { id = model.ParticipantId });
}
return RedirectToAction("Index", new { id = model.ParticipantId });
}
On success, Ajax returns the HTML of the Partial View and injects it in a DIV using the jQuery .html() function.
$.ajax({
url: '/Payments/SavePayment',
datatype: "json",
traditional: true,
data: form,
cache: false,
success: function (html) {
$("#paymentpartial").html(html);
}
THE PROBLEM is that the HTML returned by the Controller method, as seen in the Ajax call, is the OLD HTML from the previous Partial View that I'm trying to replace. I'm so confused. Here's the Partial View HTML:
#using BeyondThemes.BeyondAdmin.Models
#model PaymentSummaryVM
#if (Model.PaymentId == 0)
{
<div class="widget-header bordered-bottom bordered-blue">
<span class="widget-caption">New Payment</span>
</div>
}
else
{
<div class="widget-header bordered-bottom bordered-blue">
<span class="widget-caption">Edit Payment</span>
</div>
}
<div class="widget-body" style="margin-bottom:20px">
#Html.HiddenFor(m => m.ParticipantId)
#Html.HiddenFor(m => m.PaymentId)
<div class="row">
#Html.Bootstrap().LabelFor(m => m.PaymentDate).LabelText("Date:").HtmlAttributes(new { #class = "col-md-1 control-label" })
<div class="form-group col-md-3">
#Html.Bootstrap().TextBoxFor(m => m.PaymentDate).Placeholder("Payment Date").HtmlAttributes(new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.PaymentDate)
</div>
#Html.Bootstrap().LabelFor(m => m.PaymentTypeId).LabelText("Type:").HtmlAttributes(new { #class = "col-md-1 control-label" })
<div class="form-group col-md-3">
#Html.Bootstrap().DropDownListFor(m => m.PaymentTypeId, Model.PaymentTypeList).OptionLabel("Select a Payment Type").HtmlAttributes(new { #class = "form-control", #id = "creditcard" })
#Html.ValidationMessageFor(m => m.PaymentTypeId)
</div>
#Html.Bootstrap().LabelFor(m => m.Notes).LabelText("Notes:").HtmlAttributes(new { #class = "col-md-1 control-label", #maxlength = "250" })
<div class="form-group col-md-3">
#Html.Bootstrap().TextAreaFor(m => m.Notes).HtmlAttributes(new { #class = "form-control", #maxlength = "250" })
#Html.ValidationMessageFor(m => m.Notes)
</div>
</div>
<div class="form-group col-md-offset-1">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success savepayment" style="width:100%">Save</button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default cancelpayment" style="width:100%">Cancel</button>
</div>
<div class="col-md-9">
</div>
</div>
</div>
</div>
And it's being injected from the main View like this:
#using (var form = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal).HtmlAttributes(new { #id = "paymentpartial" })))
{
Html.RenderPartial("_AddEditPayment", Model);
}
UPDATE:
I just got it to do what I wanted. I had to make the following change, that is, NOT SERIALIZING the form. Just passed in the specific value..Really no clue why this worked but hey..
var pid = $("#ParticipantId").val();
$.ajax({
url: '/Payments/GetAddPaymentPartial',
datatype: "json",
//traditional: true,
data: { participantid: pid },

Try triggering a reset/clear on your success.
$.ajax({
url: '/Payments/SavePayment',
datatype: "json",
traditional: true,
data: form,
cache: false,
success: function (html) {
$("#paymentpartial").html(html);
$("#paymentpartial").find('form')[0].reset();
}