Reset DropDownListing when modal window is closed - asp.net

I've got a modal contact us window that pops up, with a drop down listing where you select a category. I'm trying to figure out a way to reset the selected item when the modal is closed either by the cancel button or the x button. So far the only way I've figured out how to do this is by quickly refreshing the page (see the CloseAndRefresh function near the bottom) when either of the buttons are clicked. This is not ideal because if someone has entered data and not submitted it, refreshing will erase it all. Is there an easier way to achieve this without refreshing?
Below is the code for my modal button
#Html.ModalButton( string.Empty, Rxcs.Contact + " " + Rxcs.Support, "none", "HelpContactSupport" )
<div id="page-contact-form">
X
#using (Html.BeginForm( "ContactHelp", "emails", FormMethod.Post ))
{
<div class="row">
#if (Request.IsAuthenticated && Session["PersonID"] != null)
{
<input type="hidden" name="address" value="#ViewContext.GetContext().people.Find(Session["PersonID"]).Email" />
}
else
{
<label for="address" class="medium-2 columns text-right">Email Address:</label>
<div class="medium-10 columns">
<input type="text" name="address" id="address" />
</div>
}
<div class="medium-2 hide-for-small columns"> </div>
<div class="medium-10 columns">
<p>#Rxcs.What_is_your_question</p>
</div>
<label class="medium-2 columns text-right" for="contactCat">
#Rxcs.Category
</label>
<div class="medium-10 columns" id="selectParent">
#Html.DropDownListing( "contactCat", new SelectList( ViewContext.GetContext().contact_category, "ID", "CategoryNameEnglish" ) )
</div>
<div id="bodyParent">
<input type="hidden" name="Subject" value="Contact Help on Page: #Request.Url.AbsoluteUri" class="col-md-10" />
<label class="medium-2 columns text-right" for="body">#Rxcs.Body.Replace( "English", "" ).Replace( "anglais", "" )</label>
<div class="medium-10 columns">
<textarea rows="10" cols="100" name="body" id="body"></textarea>
</div>
<input type="submit" value="#Rxcs.Send" class="button float-right" onclick="$('#contactCat').next().children().first().css('border', '1px solid #f00');return $('#contactCat').val() != '';" />
</div>
<a class="button inline float-left" onclick="CloseAndRefresh()">#Rxcs.Cancel</a>
<script>
function CloseAndRefresh() {
location.href = '#';
javascript: history.go(0);
}
</script>
<br />
</div>
}
</div>
#Html.ModalButtonEnd()

I did this by clearing dropdownlist selection and then assign it's text to the first text Here is a code snippet might be help you
dropdownname.ClearSelection();
dropdownname.Items.FindByText(Your Text).Selected = true;

Related

AngularJS1 : ng-blur inside the ng-if

I'm trying to use ng-blur. Below is my HTML code:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName()" ng-model="QueryName" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
JavaScript code for blur event call is:
$scope.performValidationQueryName = function () {
if($scope.QueryName != null && $scope.QueryName != '') {}
};
The issue I'm facing is:
When ng-if="CurrentStage==='SaveQuery'" is there inside div, my ng-model="QueryName" is not getting updated. And with blur of the text, I get $scope.QueryName = "" with performValidationQueryName function.
If, I remove ng-if="CurrentStage==='SaveQuery'", all things works perfectly and I get the value inside the $scope.QueryName.
How can I call ng-blur which is placed inside the div with an ng-if condition?
You should use object in your input model will solve your problem because it comes under ng-if as shown below,
Template:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName(Query.Name)" ng-model="Query.Name" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Controller:
$scope.performValidationQueryName = function (queryName) {
if (queryName != null && queryName != ''){
//do something..
}
};

Setting error message to right side of control bootstrap and Angular Js

I am using Angular js, in which i have the below control.
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container form-horizontal" ng-show="createMenu">
<br />
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
<div class="col-sm-4">
<input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Recipient Group:<em style="color:red">*</em></label>
<div class="input-group col-sm-4" style="padding-left:10px;">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" required="" placeholder="Search the group" ng-model="searchDatalocation" ng-change="searchgroups()" name="searchValue">
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.searchValue.$error.required">Please select a Recipient group.</span>
</div>
</div>
</form>
</div>
</body>
The error message "Please enter Name" appears on right side of the textbox, however, the error message "Please select a Recipient group" appers below the control. I have tried changing the css, but it has not worked. How to set the error message to be shown on right side after the control.
Thanks
Style the .input-group div with display: inline-table; and float:left;
Please also note that there is one missing closing tag </div> for class="container form-horizontal"

Using ng-repeat with bootstrap css and span tags for error message

I am using Angular Js, in which I am using bootstrap css. I have a ng-repeat added to the form. I have a submit button at the end of page. I have added a required field validation to each of the controls being created in ng-repeat. On click of submit button, if the data is not available in any of the rows in ng-repeat, I am showing a error message. This works fine. However, if there are 20 rows in ng-repeat, and if all are left empty, clicking on submit button is dragging the page, thereby the submit button becomes invisible. I have used the below code:
<link href="/Content/bootstrap.css" rel="stylesheet" />
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="row" ng-repeat="Descriptions in seasonsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<br />
</div>
<br/>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
Adding screenshot to explain in more:
As you can see, the buttons are getting invisible when the error messages are shown. Is this the correct way to use css and span in ng-repeat. I have tried with setting
style="min-height:100px;"
in the form, but that did not solve it. How to fix this?
Thanks
It could work, but it's much more complicated than it needs to be. Check out angular forms (link below)
<div class="form-group col-md-5">
<textarea name="descriptionValidate_{{$index}}" class="form-control input-md noresize" required="" maxlength="500" ng-model="Descriptions.Description" noresize=""></textarea>
<span style="color: red;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
It will turn into (styling excluded)
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
https://angular.io/docs/ts/latest/guide/forms.html
There are a number of validation rules built into an Angular input
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
More on input validation usages: https://docs.angularjs.org/api/ng/directive/input
Hopefully this helps simplify some of your code

fetching and populating values in bootstrap modal popup

This is what I'm trying to achieve here. The user clicks on a button and the bootstrap modal popup appears. The user enters the event id value in the text box of the modal popup and I want information regarding the event to be displayed on the other fields in the modal popup.
I wrote a function under txtEventId_TextChanged event and I was able to get the value entered in the event id textbox. I was able to pass that value to the database and retrieve it's corresponding values from database as well.
My problem now is that I'm not able to display those data in the modal popup.
Here is the HTML Code :
<!-- Maintainenance Modal -->
<div class="modal fade" id="maintenanceModal" role="dialog" tabindex = -1 aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<!-- Maintaineance Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Maintain Event</h4>
</div>
<div class="row">
<div class="col-xs-2">
<div class ="form-group">
<label for="eventID" id="lblEventId">EventID</label>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<asp:TextBox ID="txtEventId" runat="server" CssClass="form-control dialogtextbox" AutoPostBack="false" OnTextChanged="txtEventId_TextChanged"></asp:TextBox>
</div>
</div>
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div class="modal-body">
<div class="EventsIcons">
<div class ="form-group">
<label for="MaintainDropDown" id="MaintainEventLabel">Select The Event Type </label>
<select id="MaintainDropDown" runat="server" class="btn btn-default dropdown-toggle eventdropdown" data-toggle="dropdown" aria-expanded="true">
<option value="WorkAnniversary">WORKANNIVERSARY</option>
<option value="Birthday">BIRTHDAY</option>
<option value="Community">COMMUNITY</option>
<option value="FoodSafety">FOOD SAFETY</option>
<option value="Health&Safety">HEALTH & SAFETY</option>
<option value="Holiday">HOLIDAY</option>
<option value="Maintenance">MAINTENANCE</option>
<option value="QualityAudit">QUALITY AUDIT</option>
<option value="SocialEvent">SOCIAL EVENT</option>
<option value="Stat-Holiday">STAT-HOLIDAY</option>
<option value="Sustainability">SUSTAINABILITY</option>
<option value="TownHall">TOWN HALL</option>
<option value="Visitor">VISITOR</option>
<option value="Wellness">WELLNESS</option>
</select>
</div>
</div>
<div class="Description">
<label for="description" id="MaintainDescription">Description</label>
<textarea class="form-control" rows="5" id="maintainTxtDescription" name="eventdescription" runat="server"></textarea>
</div>
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label id="Label3">Start Time</label>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<div class='input-group date' id="maintainStartDate">
<asp:TextBox ID="maintainTxtStartDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group date" id="startTime">
<asp:TextBox ID="maintainTxtStartTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label id="Label4">End Time</label>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group date" id="endDate">
<asp:TextBox ID="maintainTxtEndDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group date" id="endTime">
<asp:TextBox ID="maintainTxtEndTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1 col-xs-6">
<div class="form-group">
<asp:CheckBox ID="maintainChkBoxAllDayEvents" runat="server" CssClass="checkbox" Text="All Day Event" OnClick="document.getElementById('maintainTxtStartTime').disabled = this.checked;document.getElementById('maintainTxtEndTime').disabled = this.checked;" />
</div>
</div>
<div class="col-xs-offset-1 col-xs-4">
<div class="form-group">
<asp:Button ID="btnMaintainSubmit" runat="server" Text="SUBMIT"
CssClass="btn btn-group-justified btn-success" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
And here is my code behind code.
protected void txtEventId_TextChanged(object sender, EventArgs e)
{
BusinessLogicLayer BL = new BusinessLogicLayer();
EventId = Convert.ToInt32(txtEventId.Text);
try
{
DataTable dt = BL.BLGetEventDetails(EventId);
foreach (DataRow row in dt.Rows)
{
StartDate = row["StartDate"].ToString();
EndDate = row["EndDate"].ToString();
StartTime = row["StartTime"].ToString();
EndTime = row["EndTime"].ToString();
EventDescription = row["EventDescription"].ToString();
EventType = row["EventType"].ToString();
if (StartDate.Equals(""))
{
MessageBox.Show("EventId Does Not Exists");
maintainTxtStartDate.Text = "";
maintainTxtStartTime.Text = "";
maintainTxtEndDate.Text = "";
maintainTxtEndTime.Text = "";
MaintainDropDown.Disabled = true;
}
else
{
maintainTxtStartDate.Text = StartDate;
maintainTxtStartTime.Text = StartTime;
maintainTxtEndDate.Text = EndDate;
maintainTxtEndTime.Text = EndTime;
MaintainDropDown.Value = EventType;
maintainTxtDescription.InnerText = EventDescription;
}
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "txtEventId_TextChanged", MessageBoxButtons.OK, MessageBoxIcon.Error);
}
}
If I specify AutoPostBack="true" for txtEventId then the popup disappears from the screen after I input the value and hit enter. If I set the AutoPostBack = "false" then it is not populating the values as the control is not going to txtEventId_TextChanged function. I do not want to set AutoPostBack="true" because during postback the whole page will reload and the modal popup will disappear. I tried setting scriptmanager and updatepanel for it but since I have already an another existing scriptmanager and updatepanel added in the Default.aspx page, I'm not able to add a new one to it.
Please let me know what I'm doing wrong and how to rectify this. Your guidance is highly appreciated.
You have two options:
RegisterStartupScript
Use the RegisterStartupScript at the end of your method to send JS code to the client, you will send the call to your modal like this
ScriptManager.RegisterStartupScript(this, typeof(Page), "callModal",
"$('#maintenanceModal').modal();", true);
This is the easiest way to accomplish what you want
PageMethods
You can use the PageMethods to return a JSON with the values you want to display, this way you don't need to do a Postback, and you will get the info you want. See the requirements and how to use PageMethods

My bootstrap form has two un-clickable inputs, can't figure out why

I have a bootstrap 3 form.
when its in the tabled and larger media query state, the middle input field is somehow overlaying the two inputs above making them none clickable jsfiddle.net/wT7gp/.
I have put an example in jsfiddle. (remember to make it wide enough to see the problem)
Repro:
Open link.
make the outwindow large.
click the input for firstname.
Expected it to start typing state, but nothing happens.
Hope someone here can explan what I did to cause it :) I failed at finding the issue. (other then yes the middle element is overlaying the two others.
You should be wrapping your rows of form groups in div with row class like so:
Fiddle: http://jsfiddle.net/wT7gp/1/
HTML
<div class="row">
<div class="form-group col-sm-6">
<input class="form-control input-lg " placeholder="First Name" id="first-name" tabindex="1" name="FirstName" data-bind="value: firstName" type="text" maxlength="50" />
<label for="first-name" style="display:none;" data-bind="validationMessage: firstName, css: { error: !firstName.isValid() }" class="error"></label>
</div>
<div class=" form-group col-sm-6">
<input class="form-control input-lg " placeholder="Last Name" id="last-name" tabindex="2" name="LastName" data-bind="value: lastName" type="text" maxlength="50" />
<label for="last-name" style="display:none;" data-bind="validationMessage: lastName, css: { error: !lastName.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input class="form-control input-lg " placeholder="Email" id="email" tabindex="3" name="Email" data-bind="value: email" type="email" maxlength="50" />
<label for="email" style="display:none;" data-bind="validationMessage: email, css: { error: !email.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="Choose a password" id="password1" tabindex="4" name="Password" data-bind="value: password" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: password , css: { error: !password.isValid() }" class="error"></label>
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="password, again" id="password2" tabindex="5" name="ConfirmPassword" data-bind="value: confirmPassword" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: confirmPassword , css: { error: !confirmPassword.isValid() }" class="error"></label>
</div>
</div>
I had the same problem. It was caused by a div covering my input controls. It seemed the div 'knew no bounds'.
So when I worked out which div was causing the problem I applied the overflow:hidden; style.
I'm guessing that's why the row class worked for Kevin Pei - maybe it keeps the col divs contained.
Aside: I used Firefox Firebug to show me which div was covering my controls.
We had a very similar problem within our web application. Using bootstrap 3.3.7 our signup form did not work any more on iPhones. The initial form looked like this:
<form ...>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-4">
<input type="submit" value="Register">
</div>
</form>
The problem was caused by the last two div elements which did not have corresponding class definitions for the xs-size. So on iPhone the <div class="col-sm-6 col-md-4"> class resulted in a very big div overlaying the whole form and preventing touch events for input fields beneath the div.
The solution is simply adding a xs-size class to the div and everything worked well on iPhones. In our case we adjusted the form like that:
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
In my case i set z-index:1 for the controls not allowing inputs and no z-index setting for the controls allowing inputs.

Resources