We Keep Coding

How to fix form submission error, form is using ASP.NET Core 3.1 and jQuery

I keep running into issues and I'm hoping the community can help me. I have a web application that was built a year or two ago using ASP.NET Core 3.1 with Razor Pages, and code behind (C#) files. The site is also using jQuery.
The form I'm having issues with is a "delete item" form. It's important that users confirm the item(s) they want to delete before they delete them from the database. On the front-end, we have DeleteItem.cshtml which is has the following code:
...
<form id="delete-form">
<label for="confirm-button">Step 1: Confirm</label>
<br />
<button id="confirm-button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Yes, I am sure I want to delete these questions.
</button>
<br />
<br />
<label for="submit-button">Step 2: Delete</label>
<br />
<div style="position:relative">
<div id="submit-div"
style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<button id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
</div>
</form>
</main>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thank you for confirming you want to delete the question or questions listed. Please close this confirmation box, and select the delete button.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
$('#delete-form').on('submit', function (e) {
e.preventDefault();
});
$('#confirm-button').click(function () {
$('#submit-button').prop('disabled', false);
});
$('#submit-div').click(function () { submitForm(); });
$('#submit-button').click(function () { submitForm(); });
function submitForm() {
console.log('in submitForm() function');
if ($('#submit-button').is(':disabled'))
alert('Please select the confirmation button before selecting the delete button.');
else
deleteButtonPush();
}
function deleteButtonPush() {
console.log('in deleteButtonPush() function');
if ($('#submit-button').is(':disabled')) {
alert('Please selete the confirmation button first.');
}
else {
$('#submit-button').prop('disabled', true);
$('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
$('#delete-form').prop('method', 'post');
$('#delete-form').prop('action', 'DeleteItem?id=#Model.Item.ItemTableID');
$('#delete-form').submit();
}
}
});
</script>
}
Why isn't the form being submitted, after clicking the confirmation button, and the delete button? I can see the delete button is disabled, and the spinner is added, after the submit-button button is clicked. However, the post isn't happening. How can this be fixed so post/submit will occur when the submit-button is clicked? Thanks, Everyone.

Remove the e.preventDefault() inside the on('submit') callback. Or if you want to check for other conditions, you can call the $('#delete-form').submit().
The problem with your code is after you calling the submit method on the form, then inside the submit callback, you cancel the default submit behaviors. For more information, you can read this Event.preventDefault()
// For example, you can read this code
$(document).ready(function() {
$('#delete-form').on('submit', function(e) {
// Checking condition
if (someError) {
// some error happen, don't submit the form
e.preventDefault();
// then if you want to submit the form inside this block, use this
// $("delete-form").submit();
}
// other things...
});
// ... Other things
})

Change your code like below:
<form id="delete-form">
<label for="confirm-button">Step 1: Confirm</label>
<br />
<!--Add type="button"-->
<button type="button" id="confirm-button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Yes, I am sure I want to delete these questions.
</button>
<br />
<br />
<label for="submit-button">Step 2: Delete</label>
<br />
<div style="position:relative">
<div id="submit-div"
style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<!--Add type="button"-->
<button type="button" id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
</div>
</form>
</main>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thank you for confirming you want to delete the question or questions listed. Please close this confirmation box, and select the delete button.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
//$('#delete-form').on('submit', function (e) {
// e.preventDefault();
//});
$('#confirm-button').click(function () {
$('#submit-button').prop('disabled', false);
});
$('#submit-div').click(function () { submitForm(); });
$('#submit-button').click(function () { submitForm(); });
function submitForm() {
console.log('in submitForm() function');
if ($('#submit-button').is(':disabled'))
alert('Please select the confirmation button before selecting the delete button.');
else
deleteButtonPush();
}
function deleteButtonPush() {
console.log('in deleteButtonPush() function');
if ($('#submit-button').is(':disabled')) {
alert('Please selete the confirmation button first.');
}
else {
$('#submit-button').prop('disabled', true);
$('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
$('#delete-form').prop('method', 'post');
$('#delete-form').prop('action', 'DeleteItem?id=#Model.Item.ItemTableID');
$('#delete-form').submit();
}
}
});
</script>
}

Everyone. Thank you for your feedback. With your help, the confirmation and delete buttons are working correctly now. I decided to use an AJAX request in order to solve the need to post/submit to the server. It's not finished yet, but here is an answer:
...
<form id="delete-form">
<h2>Questions to be Deleted</h2>
<p>Step 1: Select one or more questions</p>
#if (Model.Questions != null && Model.Questions.Count > 0)
{
<table class="table" summary="select one or more questions to be deleted">
#* output table of questions w/ checkboxes to select or "unselect" each question *#
</table>
}
<h2>Confirm and Delete</h2>
<p>
Please confirm you are sure you want to delete the question(s), reading passages, and/or science tabs,
for the question(s) listed above.
</p>
<input type="hidden" name="ID" value="#Model.Item.ItemTableID" />
<label for="confirm-button">Step 2: Confirm</label>
<br />
<button type="button"
id="confirm-button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Yes, I am sure I want to delete these questions.
</button>
<br />
<br />
<label for="submit-button">Step 3: Delete</label>
<br />
<div style="position:relative">
<div id="submit-div"
style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<button type="button" id="submit-button" class="btn btn-primary" disabled>Delete</button>
</div>
#Html.AntiForgeryToken()
</form>
</main>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thank you for confirming you want to delete the question or questions listed. Please close this confirmation box, and select the delete button.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
$('#delete-form').on('submit', function (e) {
if ($('#submit-button').is(':disabled')) {
showDeleteError();
e.preventDefault();
}
else
deleteButtonPush();
});
$('#confirm-button').click(function (e) {
$('#submit-button').prop('disabled', false);
e.preventDefault();
});
$('#submit-div').click(function () { submitForm(); });
$('#submit-button').click(function () { submitForm(); });
function submitForm() {
console.log('in submitForm() function');
if ($('#submit-button').is(':disabled'))
showDeleteError();
else
deleteButtonPush();
}
function deleteButtonPush() {
console.log('in deleteButtonPush() function');
if ($('#submit-button').is(':disabled'))
showDeleteError();
else {
$('#submit-button').prop('disabled', true);
$('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
let data = $('#delete-form').serialize();
$.ajax({
type: "POST",
data: data,
url: "ProcessDeletetion?handler=Delete",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function () {
console.log('ok')
},
error: function () {
console.log('error');
}
});
}
}
function showDeleteError() {
alert('Please select the confirmation button before selecting the delete button.');
}
});
</script>
}

Prevent multiple clicks on bootstrap modal button with ASP.NET

I use boostrap modals for saving data on an ASP.NET Web page and I'm having an issue when users by mistake clicks more than once the "Save" button on the modal. The event fires the number of times the user presses the click. This happens because the modal doesn't closes immediatly. It takes about 1 second to close, enough for the user to click more than once the button.
My database is validated (I'm using Entity Framework) so, there's no duplicate values inserted. But if the user clicks two times, it tries to insert the record two times, and the error message is displayed.
How can I prevent this?
This is the modal code:
<asp:Panel runat="server" ID="pnlBank" DefaultButton="btnSaveBank">
<div class="modal fade" id="modBank" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Banco</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="form-group">
<div class="row">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankName" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox>
</div>
</div>
<label class="col-md-2 control-label">Address</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankAddress" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox>
</div>
</div>
<div class="row">
<label class="col-md-2 control-label">Phone</label>
<div class="col-md-10">
<asp:TextBox ID="txtBankPhone" CssClass="form-control" runat="server" MaxLength="15"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
Cerrar
<asp:Button ID="btnSaveBank" runat="server" Text="Save" CssClass="btn btn-primary" OnClick="btnSaveBank_Click" />
</div>
</div>
</div>
</div>
</asp:Panel>
And this is the code behind:
protected void btnSaveBank_Click(object sender, EventArgs e)
{
Bank newBank = new Bank();
newBank.Name = txtBankName.Text;
newBank.Address = txtBankAddress.Text;
newBank.Phone = txtBankPhone.Text;
using (bankEntity)
{
try
{
bankEntity.Bank.Add(newBank);
bankEntity.SaveChanges();
lblResult.Text = "Bank successfully saved";
ObtenerBancos();
}
catch (Exception ex)
{
lblResult.Text = "Error when saving bank: " + ex.Message;
}
}
}

You can try disabling the save button and closing the modal via jQuery and once the modal is closed you can re-enable the save button again using jQuery. Just make sure that the jQuery event handlers are defined after btnSaveBank_Click so that btnSaveBank_Click takes precedence over the close/hide trickery:
$(document).ready(function () {
$("#btnSaveBank").click(function() {
$(this).prop("disabled", true);
$("#modBank").modal("hide");
});
$("#modBank").on("hidden.bs.modal", function() {
$("#btnSaveBank").prop("disabled", false);
});
});

How to append data to the repeater control from client side

I want to append data to the repeater, the repeater has some data already on page load. But i want to remaing load data while Scrolling Page down.
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
showData();
}
});
function showData() {
PageMethods.getData(onSuccess, onError); // getData is a page webmethod thats return five record in json string.
function onSuccess(data) {
alert(data); // data has all five record.
}
function onError(data) {
alert('Problem');
}
}
</script>
.NET
<div id="Posts" class="container-fluid padded">
<asp:Repeater ID="PostsRepeater" runat="server">
<ItemTemplate>
<section>
<div class="col-md-2">
<img src="images/" <%#("ImagePath") %> alt="<%#Eval("username") %>" class="img-circle img-responsive" />
</div>
<div class="col-md-10">
<div>
<b><%#Eval("username") %></b><p><span class="glyphicon glyphicon-time"></span>Posted on Feb <%#Eval("CreationDate") %></p>
</div>
<hr>
<p><%#Eval("Status") %></p>
<img src="images/1451285316491.jpg" class="img-responsive">
</div>
<div class="row commentbox">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive user-photo img-circle" src="images/1451285316491.jpg">
</div>
<!-- /thumbnail -->
</div>
<!-- /col-sm-1 -->
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Ali</strong> <span class="text-muted">commented 5 days ago</span>
</div>
<div class="panel-body">
This Is awsome post
</div>
<!-- /panel-body -->
</div>
<!-- /panel panel-default -->
</div>
<!-- /col-sm-6 -->
</div>
<!-- /row commentbox -->
</section>
</ItemTemplate>
</asp:Repeater>
<img id="loader" class="img-responsive col-md-offset-4" alt="" src="images/loading.gif" style="display:none" />
</div>

On window scroll, you can make a jQuery Ajax call which returns data and on success method get the response and bind it to your parent Div Posts (i.e. repeator control)
Edited: Code to bind data .i.e( Ajax success method)
function OnSuccess(response) {
var items = response.d;
var fragment='';
$.each(items, function (index, val) {
var aData_imgSRC= val.imgSRC;
var aData_USERNAME= val.USERNAME;
// .....
fragment += "<section> <div class='col-md-2'> <img src='"+aData_imgSRC+"' class='img-circle img-responsive' /> </div> <div class='col-md-10'> <div> <b>"+aData_USERNAME+"</b><p><span class='glyphicon glyphicon-time'></span>Posted on Feb "+aData_Date+"></p> </div> <hr> <p>"+aData_Status+"</p> <img src='images/1451285316491.jpg' class='img-responsive'></div> </section>";
});
$('#Posts').append(fragment);
}

Bootstrap Modal - Add server code ASP.Net

Net webform application implementing Bootstrap. Currently I have a label and a text box displayed in Bootstrap - Modal to which Im trying to send the data from the server c# file. For some reason the Modal disappears and doesnt show anything on the UI.
ASPx file
<!-- Button to trigger modal -->
Launch demo modal
<%--<asp:Button ID="Button1" role="button" type="button" runat="server" Text="Modal" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal"/>--%>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
C# file
protected void Click_Me(object sender, EventArgs e)
{
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
}
Please advice
ps : do i need to use an Update panel ?

An Update Panel would likely not be the best solution for this because only a partial amount of the html is updated and the Javascript/Jquery for the modal is not being called again after the partial postback.
You need some way of invoking the Javascript again after the postback. You could invoke the Javascript needed to open the modal on your Click_Me event.
protected void Click_Me(object sender, EventArgs e)
{
// do stuff
Label1.Text = "test label";
TextBox1.Text = "text box text";
modal_Img.Src = "test path";
// make sure the modal opens
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#MyModal').modal('show')});</script>", false);
}

Recover selected tab after postback with Bootstrap

I'm using tabs on Bootstrap: in this example I have 4 tabs and use some ASP.NET WebControls within them, like DropdownLists, Buttons and TextBoxes.
When I select dropdownlist item or click a buttons, lost previous and actual selected tab state and cannot recover it.
<script src="/Scripts/bootstrap-tabs.js" type="text/javascript"></script>
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Selección Fecha">
<ul id="profileTabs2" class="nav nav-tabs">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
<div class="tab-content" id="myTabContent2">
<div id="detallepagosactividad" class="tab-pane fade">
some text
</div>
<div id="detallefacturacion" class="tab-pane fade">
other text
</div>
<div id="detallefacturacion2" class="tab-pane fade">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="detallefacturacion3" class="tab-pane fade">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
</div>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

Bootstrap TabContainer is a html control and not a asp.net webcontrol. Thus no state is maintained for the tab container. But on a postback the the entire update panel content is replaced with the new content from server. This is what is resetting you tab settings (in fact, the css class "active" is removed from the previously selected tabs)
You have to rethink your update panel arrangement. Instead of wrapping your entire bootstrap tabcontainer into a updatepanel you should break up your update panel into multiple smaller ones. Like so:
<asp:Panel ID="Panel1" runat="server" GroupingText="Selección Fecha">
<ul id="profileTabs2" class="nav nav-tabs">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
<div class="tab-content" id="myTabContent2">
<div id="detallepagosactividad" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
some text
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="detallefacturacion" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
some text
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="detallefacturacion2" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="detallefacturacion3" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
</asp:Panel>
On this way you gain more control over what content you want to update. Additionally on postbacks your tabs and tabpanes won´t be reset to initial state

First use a hidden control to store the index of the selected tab:
The initial value should be (1) which is the first tab:
User onclick or OnClientClick at the anchor or LinkButtons to set the hidden field value for example:
<li>uno</li>
<li>dos</li>
<script type="text/javascript">
function SelectTab(tab) {
document.getElementById('<%=hdnTab.ClientID %>').value = tab;
}
</script>
Put this javascript at the end of your html and before the < /body> tag
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (s, e) {
FixTabs();
});
</script>
Now place FixTabs javascript function at the begining and will run at every completed postback. In this function just simply get the selected tab and set its class to "active".
<script type="text/javascript">
function FixTabs() {
var tabIndex = document.getElementById('<%=hdnTab.ClientID%>').value;
var t1 = document.getElementById("detallepagosactividad");
var t2 = document.getElementById("detallefacturacion");
//do same for the rest of tabs
t1.setAttribute('class', '');
t2.setAttribute('class', '');
if (tabIndex == "1")
t1.setAttribute('class', 'active');
else if (tabIndex == "2")
t2.setAttribute('class', 'active');
}
</script>
Hope this helps..