ngMessages and Nested Scopes - Datepicker in an ngForm on a Tab - angular-ui-bootstrap

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).

Related

materializecss read radio button

New to materializecss, trying to read radio button and not having any luck.
<form class="main" id="sponsorform" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
:
<div>
<div class="row">
<div class="input-field col s12">
<p>Choose race to sponsor</p>
<p>
<input type="radio" name="race" id="wdf">
<label for="wdf">Women's Distance Festival</label>
</p>
<p>
<input type="radio" name="race" id="msm">
<label for="msm">Market Street Mile</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="nextOrSubmitPage(); return false;">Next</button>
</div>
</div>
</div>
When I click on one of the options, the circle gets highlighted but using chrome inspect I do not see any change to the dom.
And when I try to read I see either
$('input[name=race]:checked').val()
"on"
or I get an error `Cannot read property 'val' of null
Not sure what changes in between the two behaviors, though.`
Note: this is all within google apps script. Not sure if that is relevant or not.
Ok, after some hacking around, I found the following seems to work
$('input[name=race]:checked').attr('id')
Not sure if there's a better way to do this, but as I said it seems to work.
This may solve your problem.
$("input[name=group1]:checked").next().text();

ASP.NET MVC Bootstrap form controls not aligned properly

In my following ASP.NET MVC Core project view, I want to display input, its corresponding label and submit button Add controls in the same line. but they are displaying in three separate lines, why?. How can I make them display in the same line (please note that the dropdown control is correctly showing its label and submit button Go in the same line). Note: Probably not related - but we know the content of the labels are coming from the data annotations of the corresponding model.
View:
<div class="col-md-9">
<form asp-controller="myControllerName" asp-action="myTestAction" method="post" class="form-horizontal">
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<div class="col-md-9">
<label asp-for="SelectedYear" class="control-label"></label>
<select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" class="btn btn-info btn-xs">GO</button>
</div>
</div>
<div class="form-group">
<div class="col-md-9">
<label asp-for="testDesc" class="control-label"></label>
<input asp-for="testDesc" class="form-control"/><button type="submit" class="btn btn-info btn-xs">Add</button>
</div>
</div>
</form>
</div>
Snapshot of Page display from the above View
UPDATE:
After following a suggestion from the user #RatHat I've been able to display the three controls inline. But, still why they are not aligned left like the other three controls for dropdown. New display:
When using a .form-horizontal, you need to specify the number of columns that each element should cover:
<div class="form-group">
<!-- add the number of columns that the label should use -->
<label asp-for="testDesc" class="control-label col-sm-2"></label>
<!-- add the number of columns that the input should use -->
<div class="col-sm-8">
<input asp-for="testDesc" class="form-control">
</div>
<!-- add the number of columns that the Add button should use -->
<div class="col-sm-2">
<button type="submit" class="btn btn-info btn-xs">Add</button>
</div>
</div>

ng-model not working for certain attributes in angularJS

Hi I encountered a problem with ng-model. I want to create an edit page for admin user to edit the rest of the user's permission level.
So, I listed out all the user's attributes in the edit page, and these attributes should display the current values.
I can update all the attributes correctly, however, the problem is that when visiting the edit page, only certain attributes are displayed while some are not. I think it is the problem with ng-model.
code snippets from my _form.html.erb
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['email'].$invalid }">
<label class="control-label">Email</label>
<div class="input-icon right">
<i ng-show="form['email'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['email']}}" data-container="body"></i>
<input ng-model= "user.email" name="email" type="text" class="form-control">
</div>
</div>
<br>
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['events'].$invalid }">
<label class="control-label">Event Permission Level : {{user.activities.events}}</label>
<div class="input-icon right">
<i ng-show="form['events'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['events']}}" data-container="body"></i>
<input ng-model= "user.activities.events" name="activities.events" type="range" max="2" min="0" class="form-control">
</div>
</div>
<br>
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['admin_events'].$invalid }">
<label class="control-label">Admin Event Permission Level : {{user.activities.admin_events}}</label>
<div class="input-icon right">
<i ng-show="form['admin_events'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['admin_events']}}" data-container="body"></i>
<input ng-model= "user.activities.admin_events" name="activities.admin_events" type="range" max="2" min="0" class="form-control">
</div>
</div>
<br>
The code above shows 3 different ng-models, 1.user.email, 2.user.activities.events 3.user.activities.admin_events
The way I process them is the same, but when visiting the edit page, only email and events attributes displayed the current value, but not admin_events. I can update their values alright, but I cannot get admin_events to display its current value when visiting the edit page. This is weird isn't it. I mean if I can see the value of events, why can't I see the value of admin_event since they all belong to the user variable.
Can anyone explain why is it like this? It is very confusing for me. Thank you very much.
As it solved the problem, I quote myself from the comments :
If only user.activities.admin_events is not working, it may be related to the _ notation. Try camel case user.activities.adminEvents or user.activities['admin_events'].

Jquery UI and Bootstrap button conflict

I'm having a problem with button groups for bootstrap.
Right now I have jquery ui js called before bootstrap js and the button gorup works fine. However, if i keep this structure, jquery ui dialog buttons do not work, specifically the close button does not show due to conflicting js code.
If i switch the order then the jquery ui dialog close button shows but the button groups for bootstrap are all messed up, because of the conflict between the two js libraries.
I have tried using bootstraps solution:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Then when calling $(".btn").bootstrapBtn() and testing the button group every time i click a new button in the group i get the error:
cannot call methods on button prior to initialization; attempted to call method 'toggle'
I have done a ton of research and still can't come up with a solution.
Here is my code:
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
And my JS to handle the buttons:
$('.btn').button();
$('input[type=radio]').on('change', function () {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
PS: Using Jquery UI version 1.11.1 and Jquery version 1.11.1
If you simply Google that error message, you'll see that it's a jQuery UI error message, so $.fn.button at that point in your code is referring to the jQuery UI Button plugin, not the Bootstrap Button plugin.
You need to put the noConflict after you've loaded Bootstrap but before you load jQuery UI, e.g.:
<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>
You will then need to use $(...).bootstrapBtn(...) instead of $(...).button(...) in the rest of your code.
If you're using gulp or Grunt to build your assets (with main-bower-files for example) an option would be not to include the whole of jQueryUI. Just take the parts you need and skip buttons and tooltip. Those two are the ones that conflict the most in my experience.
For example put the following section in your bower.json:
"overrides":
"jqueryui": {
"main": [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/datepicker.js",
"ui/draggable.js",
"ui/droppable.js",
"ui/resizable.js",
"ui/selectable.js"
]
}
Just using the parts you need is also good practise to void page size when loading and sidesteps the conflict problem altogether. Hope this works in your case as well.
edit fixed typo
I know this an old post but I had the same issue. I had Bootstrap 3.0.3 and upgrading it to version >=3.4.1 solved the issue.
$('.btn').button();
$('input[type=radio]').on('change', function() {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
</div>
https://jsfiddle.net/codinglattice/gu4mjaep/29/
Try to move jquery UI js before bootstrap js. This way it works for me.
var bundle = new ScriptBundle("~/bundles/CommonJs")
.Include("~/js/jquery-1.12.4/jquery-ui.js")
.Include("~/js/bootstrap.min.js")

How can I use Bootstrap button addons in my MVC view

I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.

Resources