asked on

Disable the form when any button or dropdown is clicked ASP.Net VB.Net

Hi Experts,

I have a form with dropdowns and buttons. When I select a 'Location' from the dropdown, it fills the 'Rooms' and generate a financial report for that 'Location'. I have written all the server side code in 'Onchange' event. I want to disable the form so that no body should able to click anything else while this operation is going on and display some wait message. How can I do this. Please help.

Thanks in advance.

HainKurt

check this demo

https://jsfiddle.net/h89rg8fu/

enable/disable all form elements on client side...

$("#btnDisable").on("click", function() {
  $("#myForm :input").attr("disabled", true);
});

$("#btnEnable").on("click", function() {
  $("#myForm :input").attr("disabled", false);
});

Open in new window

RadhaKrishnaKiJaya

ASKER

Hi,

Thanks for your reply. Actually I need to disable the whole page when some operation is going on with some 'Wait' message. I have attached a screen shot of what I want.

Thanks you.
Loading.png

HainKurt

check this

https://jsfiddle.net/d02brj5L/

$("#btnDisable").on("click", function() {
  $("#divWait").show();
  setTimeout(processEnd, 5000);
});

function processEnd() {
  $("#divWait").hide();
}

Open in new window

we show a div which covers all area and then hide it to enable everything...

RadhaKrishnaKiJaya

ASKER

I have copied your program and trying to run it. But getting this error. Please suggest.

<head>
<title></title>
<style type="text/css">
.form {
padding: 10px;
margin: 10px;
border: 1px dotted silver;
}

#divWait {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: #666;
background-image: url('ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
z-index: 10000000;
opacity: 0.4;
filter: alpha(opacity=40);
display: none;
text-align: center;
}
</style>

<script type="text/javascript">

$("#btnDisable").on("click", function () {
//$("#myForm :input").attr("disabled", true);
$("#divWait").show();
setTimeout(processEnd, 5000);
});

function processEnd() {
$("#divWait").hide();
}

</script>
</head>
<form id=myForm class=form>
click something button...
<br>
<input id=txt1>
<br>
<textarea></textarea>
<br>
<select>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
<br>
<button>
send
</button>
</form>

<button id=btnDisable>
Disable
</button>

<div id="divWait">
<div>
<img src="http://www.healthytweeting.com/images/ogwait.gif">
</div>
</div>
Error.png

HainKurt

check my demo & source code...

https://jsfiddle.net/d02brj5L/

1. you need jQuery library, on top, between head tags

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Open in new window

2. code should be wrapped in jQuery DOM ready function, place anywhere...

$(function(){
 ... your jquery code here
};

Open in new window

RadhaKrishnaKiJaya

ASKER

It is working for a button. But I want for a dropdown list too. So I am trying to add the code for 'change' event. But it does not work. Also instead of 5 sec timer can we make it dynamic? It should close after the loading is done.

Thanks for your help.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlLocations").on("change", function () {
$("#divWait").show();
setTimeout(processEnd, 5000);
});

function processEnd() {
$("#divWait").hide();
}
});
</script>

HainKurt

for above code work, you need to have an element that can change / have change event with id=ddlLocations

see this
https://jsfiddle.net/wr53h8bp/

you can call it anywhere anytime...

I put 5 sec timer to demonstrate how enable / disable will work...
you will hide that whenever required...

RadhaKrishnaKiJaya

ASKER

Thanks for trying to help me. But for some reason it does not work with my code. Please help.

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContentPlaceHolder" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server">
<link href="/css/AllPages.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlLocations").on("change", function () {
$("#divWait").show();
setTimeout(processEnd, 5000);
});

function processEnd() {
$("#divWait").hide();
}
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="mainContentPlaceHolder" Runat="Server">
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-lg-12">
<h3>ADMIN DASHBOARD</h3>
</div>
</div>

<div class="MessageDiv">
<table>
<tr>
<td> <asp:Label ID="lblMessage" runat="server" Text="Label" CssClass ="label" Visible="false" ></asp:Label></td>
</tr>
</table>
</div>

<hr />

<div id="divWait" class ="divWait">
<div>
<img src="http://www.healthytweeting.com/images/ogwait.gif">
</div>
</div>

<div class="InputDiv SpaceDiv">
<div style="width:100%;float:left;">
<table class="inputtables">
<tr>
<td colspan="2" style="padding-left:5px">Customer:</td>
<td colspan="2">
<asp:DropDownList ID="ddlCustomer" runat="server" TabIndex="1" CssClass ="MediumDropDown" AutoPostBack ="true" >
</asp:DropDownList>
</td>
<td colspan="1">Location:</td>
<td colspan="2">
<asp:DropDownList ID="ddlLocations" runat="server" TabIndex="2" CssClass ="MediumDropDown" AutoPostBack ="true">
</asp:DropDownList>
</td>
<td colspan="1">Room:</td>
<td colspan="1" style="padding-left:5px">
<asp:DropDownList ID="ddlRooms" runat="server" TabIndex="2" CssClass ="MediumDropDown" AutoPostBack ="true">
</asp:DropDownList>
</td>

<td colspan="1">Select Date:</td>
<td colspan="2">
<asp:TextBox ID="txtSelectedDate" runat="server" CssClass="MediumTextBox" AutoPostBack ="true" ></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>

</div>
</div>

</asp:Content>

HainKurt

try

$("<%=ddlCustomer.ClientID%>").on("change", function () {

Open in new window

or use class

$(".MediumDropDown").on("change", function () {

Open in new window

> will be used for all dropdowns with that class... or use this

$(".MediumDropDown, .MediumTextBox").on("change", function () {

Open in new window

to add that function to all dropdown and text box...

demo, https://jsfiddle.net/cxqzbteq/

RadhaKrishnaKiJaya

ASKER

Hi,

Thanks for your time and help.

$(".MediumDropDown").on("change", function () { This one worked. Please help me with the last thing. now it is running for 5000ms. How can I change it , so that it will run till the processing is done and close after that.

This is the code running when I change the Location. I need to make sure it is disable till the financial data and rooms are load.

Protected Sub ddlLocations_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlLocations.SelectedIndexChanged
Try
ddlRooms.Items.Clear()
lblMessage.Text = ""
lblMessage.Visible = False
mnuCalender.SelectedDates.Clear()
If ddlLocations.Text <> "---Select Location---" Then
Dim dsRooms As DataSet = Get_Rooms(ddlLocations.SelectedValue, lblMessage)
If dsRooms.Tables(0).Rows.Count > 0 Then
ddlRooms.DataSource = dsRooms
ddlRooms.DataValueField = "RoomID"
ddlRooms.DataTextField = "RoomName"
ddlRooms.DataBind()
ddlRooms.Items.Insert(0, "---Select Room---")
ddlRooms.SelectedValue = ddlRooms.Items.FindByText("---Select Room---").Value
Dim CurrentMonth As String = DateTime.Now.Month.ToString()
Dim CurrentYear As String = DateTime.Now.Year.ToString()
Dim MonthName As String = DateTime.Today.ToString("MMMM")
'txtSelectMonthYear.Text = MonthName & " " & CurrentYear
Load_Customer_Financial_Data(ddlCustomer.SelectedValue, ddlLocations.SelectedValue, CurrentMonth, CurrentYear)
Else
ddlRooms.Items.Insert(0, "---No Room Found---")
ddlRooms.SelectedValue = ddlRooms.Items.FindByText("---No Room Found---").Value
ReportDiv.Visible = False
End If
Else
ddlRooms.Items.Insert(0, "---No Room Found---")
ddlRooms.SelectedValue = ddlRooms.Items.FindByText("---No Room Found---").Value
ReportDiv.Visible = False
End If
Catch ex As Exception
MessageBox("Problem during changing the Location!! " & ex.Message, lblMessage)
End Try
End Sub

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

how come you can use

MessageBox("Problem during changing the Location!! " & ex.Message, lblMessage)

in a web application? there is no such thing, this is web app not windows form app!
unless it is a custom function that you wrote! which is just simple javascript:alert() function...

RadhaKrishnaKiJaya

ASKER

Thank you very much for your wonderful help!!!