Use Bootstrap-select with MVC Dropdown List - javascript

I am attempting to use Bootstrap-Select in a Web Application I am developing in MVC to style a dropdown list for like a bootstrap dropdown as the rest of my Application is using bootstrap. I have a Car Manufacturers dropdown in my Layout page which calls a Html.Action to go do a controller and builds the list of manufacturers from a Table in my DB and returns the Partial View Below: - note on clicking on one of the values in Dropdown form is submitted and User is navigated to next screen.
<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-select.css"/>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
$('#carManufacturers').change(function () {
$(this).closest('form').submit();
});
});
</script>
#using (Html.BeginForm("Index", "Cars", FormMethod.Post))
{
#Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", #class = "selectpicker" })
}
This is mostly working in that the Dropdown seems to be styled in bootstrap - one thing I am not sure of is how to add the data-style="btn-inverse" attribute to my dropdown - attempted to add a comma after the #class="selectpicker' and define it but it did not work.
Also for some reason intellisense underlines selectpicker and states 'unknown css style selectpicker'?
Also when rendering the dropdown is looking like below - how can I get rid off the second Select Car Manufacturer Text which is getting added?

To add the data-style attribute simply do:
#Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", #class = "selectpicker", data_style = "btn-inverse" })
Notice the underscore which will automatically be translated into a dash.
As for the duplicate "Select Car" text, from your picture there is no duplicate. It's showing you the currently selected value and the list of values underneath it. That's how the select list is intended to function.

Related

Laravel Populate Select Box Based on Another Select Box

I am not sure where even to start with this. I am using Laravel and LaravelCollective form fields. What I am looking to do is populate a second select box script (containing dates) based off of the selection in the first select box patient containing names. I'm assuming it will involve JavaScript somehow?
The Script model contains a patient_id column that links it to the Patient model, so that can be used to filter the script dates to only those that the patient owns.
Controller
$patients_select = Patient::orderBy('last_name', 'asc')
->get()
->pluck('full_name', 'id');
$scripts_select = Script::orderBy('prescribe_date', 'desc')
// ->where('patient_id', $patient_id)
->pluck('prescribe_date', 'id')
->map(function ($date, $key) {
return date('m/d/Y', strtotime($date));
});
Blade
<div class="form-group">
{{Form::label('patient', 'Patient')}}
{{Form::select(
'patient',
$patients_select,
null,
['class' => 'form-control', 'placeholder' => 'Select a Patient']
)}}
</div><!-- /form-group -->
<div class="form-group">
{{Form::label('script', 'Script')}}
{{Form::select(
'script',
$scripts_select,
null,
['class' => 'form-control', 'placeholder' => 'Select a Script']
)}}
</div><!-- /form-group -->
You're gonna have to listen to change event on event the patient select (yes, in javascript). There are at least two possibilities here:
Store all the "script" data in a javascript variable and, then populate options in the script select.
Render all the possible selects in the .blade file and hide them with display: none. Depending on the patient selection you will have to show only one script select. Be careful not to send them all when submitting the form.
Well you could also reload the page after selecting, but I doubt you wanna do that. ;)

Editable Grid: Multiple datepickers

I'm constructing a view where the user can edit the date of each item for the model Store and I'm using JqueryUI datepicker JS.
This is the view (extract):
#model IEnumerable<Application.Models.Store>
#foreach (var item in Model)
{
<input type="text" class="datepicker form-control" asp-for="#item.DesignatedDate"
name="DesignatedDate" form="#(String.Format("{0}{1}","form",item.StoreID))" />
and this is the JS:
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
Since I'm showing multiple Stores in this grid, each one has it's own date to be picked.
The problem I'm having is that all the datepickers are linked between each other since each input has:
asp-for="#item.DesignatedDate"
which translates to:
id="item_DesignatedDate"
Note: I use asp-for="#item.DesignatedDate" in order to show the current date that the Store has registered when the pages loads.
And so, when I change the date of any Store, it will change the date of the first Store, always.
Any idea on how to fix this?
Thanks in advance!
Solved.
I just had to add an id to each in order to be differentiated:
id="#(String.Format("{0}{1}","any",item.StoreID))"
And now it works.

ASP MVC Bootstrap - Select2 DropDownListFor Displays Duplicate Boxes

I have an ASP.net MVC project. All of my DropDownListFor's display as 2 boxes instead of 1. This is what the view looks like currently:
This is what the view SHOULD look like:
Here is the code from the view:
<div class="col-xs-12 col-sm-6 col-md-4 ">
<div class="form-group select-280">
#Html.LabelFor(model => model.HoleID)
<br />
#Html.DropDownListFor(model => model.HoleID, (List<SelectListItem>)ViewData["HoleList"], new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.HoleID)
</div>
</div>
Javascript from the view to make the DropDownListFor Searchable (Select2):
$(document).ready(function () {
$("#HoleID").select2();
}
Why are all of my DropDownListFor's displaying as duplicates, and how can I correct this bug?
EDIT
Removing the .select2() fixes the bug and removes the duplicate dropdown... however that makes the remaining dropdown not searchable. how can I fix this while still maintaining the search functionality?
I've experienced this using Kendo, and it's all around the form-control. The issue is the dropdown gets transformed into something more dynamic; the original SELECT element might actually get hidden in the UI. Select2 is probably using multiple elements to represent the select, and the original form-control class gets applied to both elements, and forces them to show, instead of show and hide. Or the form-control class is forcing the original select to show.
I had to stop using form-control, and then create a special class just for kendo controls just to not cause one of the elements to always show...
The way to figure that all out is inspect the markup. You'll see the form-control class getting passed down to the internal elements.
This was determined to be a server error via the Visual Studio publish process. The bootstrap select2 files were not existing correctly in the server.

AngularJS multi-select using ng-repeat

I'm new to AngularJS and JavaScript. I've come up with a way to build a multi-select list, which is working. The ng-model associated with the dropdown is part of a "user" DTO object, specifically a member which contains an array of "groups" the user can belong to. The "master list" of possible groups are read from a database table using a webservice, put in an array and this is what's used to build the dropdown when the page is displayed.
Those elements in the list that are included in the "groups" field of the user object are displayed below the dropdown in a "preview" field. That's all working - if a user has two selected groups, they come up in that pre-field when the page is populated... but I don't understand why these groups are not highlighted in the dropdown. Sometimes they are...like sometimes when I refresh the page, but most of the time when the page is displayed and populated from the user information, these groups contained in the user are not highlighted in the dropdown.
Here's how the code is set up (again, I'm new to AngularJS/JavaScript and webservices so bear with me).
The HTML code is like this:
<div class="form-group">
<label for="Groups" class="col-sm-2 control-label">Group Memberships: </label>
<div class="col-sm-10">
<select name="userGroups" id="userGroups" ng-model="user.userGroups" multiple style="width: 300px;">
<option ng-repeat="group in approverGroups" value="{{group.name}}" selected >{{group.name}}</option>
</select>
<pre>{{user.userGroups.toString()}}</pre>
</div>
</div>
The JavaScript side looks like this. The "get" is used to read all possible groups from a table, and that populates the dropdown:
$http({
method : 'GET',
url : '/pkgAART/rs/ApproverGroupService/approvergroups',
data : {
applicationId : 3
}
}).success(function(result) {
// Create an array from the groups for use
// in the multi-select UI component for groups
var arr = [];
for (var i = 0; i < result.approvergroup.length; i++) {
var id = result.approvergroup[i].approverGroupId;
var value = result.approvergroup[i].name;
var pair = {id : id, name : value };
arr.push(pair);
}
$scope.approverGroups = arr;
});
Here's a screenshot of the page. This is how it looks:
So again, it works, and "SOMETIMES" when I pull up the page, the items listed in the lower <pre> box are actually highlighted in the dropdown, but not often. I don't understand how to ensure they come up highlighted. In the picture I manually clicked these elements. But if I refresh the page, sometimes they are and sometimes they are not.
I think I figured it out. Per Peter's suggestion I changed to ng-options for the dropdown, but modified the array that I use as my options to just use the name string. Here's the HTML
<div class="form-group">
<label for="Groups" class="col-sm-2 control-label">Group Memberships: </label>
<div class="col-sm-10">
<select name="userGroups"
id="userGroups"
ng-model="user.userGroups"
multiple="true"
style="width: 300px;"
ng-options="group for group in approverGroups">
</select>
<pre>{{user.userGroups.toString()}}</pre>
</div>
</div>
and the js file that builds up the array of strings looks like this:
$http({
method : 'GET',
url : '/pkgAART/rs/ApproverGroupService/approvergroups',
data : {
applicationId : 3
}
}).success(function(result) {
// create an array from the groups for use
// in the multi-select UI component for groups
var arr = [];
for (var i = 0; i < result.approvergroup.length; i++) {
var value = result.approvergroup[i].name;
arr.push(value);
}
$scope.approverGroups = arr;
});
It's now showing the multi-select list's items as selected if they are contained in "user.userGroups"
Mark
I think I figured it out.
First off, you should use ng-options in the select instead of ng-repeat on <option>. This makes it so the options are bound to the model of the select.
Check out this fiddle: http://jsfiddle.net/mcxqjngm/3/
Here is the relevant select html:
<select
name="userGroups"
id="userGroups"
ng-model="user.userGroups"
multiple="true"
style="width: 300px;"
ng-options="group.name for group in approverGroups track by group.id">
</select>
The button mimics an ajax call. I gotta run, but I can answer questions in a bit.

Update an input field from a dropwdown menu populated by a database

I have a graphing calculator I am working on. I want to user to save any valid equation they write. They can choose from the saved equation by selecting a drop down menu. The problem I have is that when I click on any equation in the dropdown menu, the input box is not updated. Is there a way I can update the input box by clicking on any equations?
This is what I have:
<!-- Input Box: -->
<label for="inputField">Enter values here. <br> <em>F(x)= (x+t)</em>
<input id="inputField" value="sin(t+x)*tan(x-10)" autocomplete="off" size="20" class=" form-control prompt">
</label>
<!-- Dropdown Menu -->
<label id="recevoirDonnee" for="DBpick"> Choose from Database
<select name="DBpick" id="DBpick" class="selectpicker" >
while ($row = mysql_fetch_row($expressions)) {
echo "<option value=$row[1]>$row[1]</option>";
}
</select>
<script>
$('select').on('change', function() {
$("select option:selected").each(function () {
$('#inputField').val($(this).val()));
});
</script>
My problem is that when I select anything on the dropdown, It doesn't update the input field. What is wrong with my code. Thanks.
Try something like this:
$('select[name="DBpick"]').on('change', function() {
$('#inputField').val($(this).val())
});
Working example here
You didn't need the .each() function as there is only one selected value at one time.
FOR UPDATING URLS's
You can change the entire URL and TITLE by using HTML5's new pushState feature. Be warned using this though, as older browsers do not support this feature. For example, IE first supported it in version 10. Here's a list of supported browsers. To use this, try:
$('select[name="DBpick"]').on('change', function() {
$('#inputField').val($(this).val());
if (history.pushState) { // checks if supported
window.history.pushState(null, "New Page Title", "?"+$(this).val());
}
});
Or, you can simply change the HASH at the end of your URL. For example, to change:
mydomain.com/my-page.html#old
// to
mydomain.com/my-page.html#new
Use this:
$('select[name="DBpick"]').on('change', function() {
$('#inputField').val($(this).val());
window.location.hash = $(this).val();
});

Categories

Resources