I am having an issue with binding an onChange event to an EditorFor thats being dynamically loaded a dropdown list of countries in a partial view. I have spent a few hours looking for a solution as to what i am doing wrong and why the prop/attribute onChange event is not binding to the div element when the page loads.
The EditorFor block:
<div class="row">
<div class="col-md-2 labelText">#Html.GetResourceString("BuyNow.Step5", "CountryLabel")</div>`enter code here`
<div class="col-md-10">
#Html.EditorFor(m => m.Country, "DropDownSelect", new { DisplayLabel = "empty", List = BaseController.CountryList, CssClass = "tealInput", onChange = "OnChange()" })
</div>
</div>
Now when i view source on the page once its loaded to check if the onChange is present in the div it is not.
Viewed Source after page load:
<select class="tealInput" data-bind="value: DefaultBilling.Country" data-val="true" data-val-length="The Country value cannot exceed 50 characters. " data-val-length-max="50" id="DefaultBilling_Country" name="DefaultBilling.Country"><option value="">Select</option>
As you can see the onchange isnt present and so far i have not been able to debug the issue. Any information on this and possible resources to go study to find out why this is happening would be greatly appreciated.
I have changed the way I am displaying the dropdown:
<div class="row">
<div class="col-md-2 labelText" style="white-space:nowrap;">#Html.GetResourceString("BuyNow.Step5", "CountryLabel")</div>
<div class="col-md-10">
<select class="tealInput" name="country" data-bind='value: DefaultBilling.Country' id="ddlCountry_#Model.AddressTypeId" style="text-align:right;" onchange="OnChange()">
#foreach (var countries in BaseController.CountryList)
{
<option value="#countries.Value">#countries.Text</option>
}
</select>
</div>
</div>
Same issue here as well, on my watch its showing OnChange() is unavailable
Related
OP Update
I've figured out the problem and this issue is now closed. Would one day like to find the time to post the solution as an answer here.
I'm having a bit of an issue working with ngMessages inside an ng-form on an Angular Bootstrap tab. Further complicating things, the thing I am validating is a Angular Bootstrap datepicker. So the code is as follows, and as you can see, I've got a datepicker on an ng-form which is on a Tab.
<uib-tab index="5" heading="{{tabs[5].title}}" select="changeCheck($event)">
<ng-form name="{{tabs[5].form}}">
<div class="col-md-9">
...
<div class="col-md-6">
<h4>Add Followup</h4>
<div class="form-group">
<label for="addFollowupDate" class="control-label">Date:</label>
<div class="input-group">
<input type="text" id="addFollowupDate"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-required="true"
ng-model="newFollowup.date"
is-open="addFollowupPopup.opened"
datepicker-options="dateOptions"
close-text="Close"
alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openAddFollowupPopup()"><i class="fa fa-calendar"></i></button>
</span>
<div class="help-block" ng-messages="followupsForm.newFollowup.date.$error" ng-if="followupsForm.newFollowup.date.$invalid && followupsForm.newFollowup.date.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
</div>
I've assigned that form to the scope using the following line:
$scope.followupsForm = $('ng-form[name="followupsForm"]').data('$formController');
And I have successfully set the control to touched on a submit which does make the border go red:
if ($scope.followupsForm.$invalid) {
angular.forEach($scope.followupsForm.$error, function (formErrorField) {
angular.forEach(formErrorField, function (errorField) {
errorField.$setTouched(); // by setting to touched, the relevant message will display if the field is invalid.
});
});
}
But the ng-message for required does not display.
Any ideas why? Could be a tough one with nested scopes etc. (of the tab and the picker).
how to reproduce :
create new ASP.Net MVC project
add a model
add a controller with scaffolding views
open the Create.cshtml in browser , then change any "form-group" using firebug or developer tools :
From :
<div class="form-group">
<label class="control-label col-md-2" for="Name">Name</label>
<div class="col-md-10">
<input name="Name" class="form-control text-box single-line" id="Name" type="text" value="">
</div>
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span>
</div>
To :
<div class="form-group">
<label class="control-label col-md-2" for="Title">Title2</label>
<div class="col-md-10">
<div class="input-group">
<input name="Title" class="form-control text-box single-line" id="Title" type="text" value="">
<span class="input-group-addon">#</span>
</div>
</div>
</div>
we just put "input" inside a "div" with "class='input-group'" and added an "input-group-addon"
the result is very weird , it looks like this :
http://i.imgur.com/ylpYJKh.png
but the correct result is this :
http://jsfiddle.net/6t3d9z8e/
is this a bug with ASP.Net MVC 5 default template or what ?
It's interesting bug in interaction between bootstrap css and microsoft default styles.
See in your default css file "Site.css" and remove block after comment Set width on the form input elements since they're 100% wide by default, where setting max-width property on inputs.
And if you want to limit your input by size you should do this by bootstrap's col-md-... classes.
By looking at your screenshots, it is very clear that MVC5 is overwriting the default bootstrap input properties.
Add the below CSS code to your style sheet. This will solve the problem.
.input-group .text-box { width: 100%; }
I am getting started with JQueryMobile and love it. I am wondering if there is a way to place a prepended a select menu beside a standard text input.
For example, if the text input were to be for a name, then the prepended select would contain Mr, Mrs, etc.
Edit 1:
I've looked at the control group docs and for a case like buttons it works e.g.
<div data-role="controlgroup" data-type="horizontal">
Icon only
Icon only
</div>
However if I use an input like
<div data-role="controlgroup" data-type="horizontal">
Icon only
<input type = "text" name = "some_input" id = "some_input">
</div>
It gives a weird result with the input overlapping the button.
Edit 2:
I've looked at grids but cannot see a way to have a div span 2 grids. e.g.
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>
I've tried the above, but it doesn't work as desired, for example
<div class="ui-grid-c">
<div class="ui-block-a">
<label for = "full_name">
Name
<select id = "honorific" data-mini="true" data-inline="true">
<option value = "mr">Mr</option>
<option value = "mrs">Mrs</option>
<option value = "miss">Miss</option>
</select>
</label>
</div>
<div class="ui-block-b ui-block-c ui-block-d">
<input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
</div>
</div>
simply yeilds the select box below the full name label, and the input only spans what appears to be one cell/block - rather than the 3 cells/blocks of the grid.
From what I've seen control group works best with buttons, check boxes, etc. Not with the combination you're expecting to do. So here are two solutions for you.
Without using grids
You'll just have to make the two elements as an inline-block, like this :
.ui-select, .ui-input-text {
display:inline-block
}
Demo with No grids, No control group.
Using grids
The way you're using grids is wrong. You'll have to use two-column grid, which will have these two two classes alone: ui-block-a & ui-block-b, like this :
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
This will scale your markup accordingly. Here's how the HTML looks like :
<div class="ui-grid-a">
<div class="ui-block-a" style="width:100px">
<select name="select-choice-min" id="select-choice-min" data-mini="true">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</div>
<div class="ui-block-b">
<input type="text" name="name" id="name" value="" placeholder="Enter Name" />
</div>
</div>
Demo with grids
i have written this code in one of the view using ASP.NET MVC. MVC returns me the checkboxes values (only those are checked) and with textboxes it returns me all (0,1,2 etc). how can i co-relate which textbox value belongs to which checkbox (since only i get the checked checkbox values)
For Each item As InternalMailCalendarViewModel In ViewData("InternalMailCalendar")
End Code
<div class="editor-field">
#Html.CheckBox("InternalMailCalendarID", New With {.value = item.ID})
<label for="#item.ID">#item.Days</label>
</div>
<div class="editor-field">
<input type="text" id="RunsPerDay" name="RunsPerDay" placeholder="Runs Per Day" />
#Html.ValidationMessageFor(Function(model) model.RunsPerDay)
</div>
#*
<div class="editor-field">
<input type="checkbox" id="InternalMailCalendarID" name="InternalMailCalendarID" value="#item.ID" />
<label for="#item.ID">#item.Days</label>
</div>
<div class="editor-field">
<input type="text" id="RunsPerDay" name="RunsPerDay" placeholder="Runs Per Day" />
#Html.ValidationMessageFor(Function(model) model.RunsPerDay)
</div>
*#
#Code
Next
End Code
According to my understanding of your code and problem, I suggest you following solution:
Just assign hmtl "Name" property to textbox uniquely and that unique name assign to checkbox as a value. So that you can co-relate textbox with checkbox.
#using (Html.BeginForm("Boxing", "Company",FormMethod.Post))
{
<div class="box">
<div>
<div class="left">
<div class="topLabel">
Id No:</div>
<div class="input_text_65">
#Html.TextBoxFor(m => m.Id)
</div>
<div class="botLabel">
percentt:
</div>
<div>
<input type="text" style="width: 50px" name="percent" />%
</div>
</div>
<div class="lastDetailField">
<div class="topLabel">
D/C:
</div>
<div class="select_110">
#Html.DropDownListFor(m => m.cType, new SelectList((IEnumerable<Model.cType>)ViewData[ViewDataKeys.cTypes]), "----")
</div>
<div class="margin_top_45">
<input id="submit" type="submit" value="submit" />
</div>
</div>
</div>
</div>
}
If I didn't select any option in the dropdownlist (leaving the optionlabel "----" selected) and I press the submit button, the form will not be posted and the focus will be move to the dropdownlist
if I remove the optional Label, like this:
#Html.DropDownListFor(m => m.cType, new SelectList((IEnumerable)ViewData[ViewDataKeys.cTypes]))
then it will work just fine. I'm thinking if I will put an optional label, does that mean I am required to choose an item? I want the form to be submitted even if I leave the dropdownlist with the optionallabel selected.
thanks in advance!
Do you have a required attribute in your model/viewmoden on cType? I think the clientside validation is kicking in, but because you didn't set a validation helper, you're not seeing the message. The form won't submit though if you select the optional label.