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. ;)
Related
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.
i have a select box/dropdown/combobox which contains more than 14000 options it takes a long time to load these options when going to use it i'm using bootstrap select library for searching on options
https://silviomoreto.github.io/bootstrap-select/examples/
how to load on typing in search box or load 100 option only and load others on scroll or any other option to load it quickly.
this is the code
<div class="form-group select-group">
<label>{{trans('home.diag_name')}}</label>
{!! Form::select('diagnosis',$diagnosis,$v->Diagnosis->id,['class'=>'form-control selectpicker','data-live-search' => 'true' , 'title' => 'Select a Diagnosis']) !!}
</div>
i'm using laravel 5.2
better than using library select2 :
on this link and ajax method : https://select2.github.io/
I have this issue where I have created a form (using Laravel), it looks like this in part:
{{-- Choose a category from the radios provided, this is where I need to get the $category->id and pass it to the next element for the sub category selection
--}}
<div class="form-group">
<p><b>Choose a category:</b></p>
#foreach (App\Http\Models\GalleryCategories::all() as $category)
{!! Form::label('category_id', $category->name) !!}
{!! Form::radio('category_id', $category->id, null, ['class' => 'form-field']) !!}
#endforeach
</div>
{{-- Using the category id passed to this form-group I can then access only the sub categories
that have a gallery_categories_id = category --}}
<div class="form-group">
<p><b>Choose a sub category:</b></p>
#foreach (App\Http\Models\GallerySubCategories::all() as $sub_category)
{!! Form::label('sub_category_id', $sub_category->name) !!}
{!! Form::radio('sub_category_id', $sub_category->id, null, ['class' => 'form-field']) !!}
#endforeach
</div>
The way I have the database setup is that a category has many sub categories. So first it will display a list of categories, something like:
cat1 ( ) cat2 ( ) cat3 ( ) ...
Then the form will display the sub categories like this:
subcat1 ( ) subcat2 ( ) subcat3 ( )
But what I want to do is that when someone selects a category I want to capture that $category->id and then pass it immediately to the next form element that will then display the sub categories that relate to that category.
Easy enough if I was to break it all down and submit a couple of forms to pass the data back and forth however I wanted to be able to achieve this without the form being submitted.
It seems JS/Ajax would be the best way to accomplish this, I am not sure. What do you think? I have no experience yet with either however I am going to guess that it could be a fairly simple process.
Thanks
What you probably want it's to use jQuery and use the .change() event on the radio buttons that contain the categories. Then you take its value and via AJAX you send to the server the category ID and have returned via JSON their subcategories. With this JSON, you just have to loop its content, and build the new radio buttons that contain the new information. Seems a pretty easy task, there is no need at all to submit forms for this.
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.
I am trying to hide/show a KendoUI Dropdownlist depending on the user's level of access; so that it would be only visibile for AdminUsers
#if (User.IsInRole(Constants.Admin))
{
<div>
<div class="editor-label">
Filter by Staff:
</div>
<div class="editor-field">
#(Html.Kendo().DropDownList().Name("UserDropDownList").BindTo(Model.Users)
.DataTextField("User").DataValueField("UserId")
.SelectedIndex(Model.Users.IndexOf(Model.Users.FirstOrDefault(x => x.UserId == Model.Default)))
.Events(e => e.Change("SelectedUserChanged")))
</div>
</div>
}
Now this wont work when the user is not an admin because as you see, this Dropdownlist has a Change event which feeds a Grid. I wonder if there is anyway that you're aware of to resolve this issue. Many thanks.
You could bring the dropdown hidden and at document ready of javascript call a action on controller that tells you if you can show or not the dropdown ($("#UserDropDownList").show() you can also use .hide()). And if you need you can trigger manually.
$("#UserDropDownList").data("kendoDropDownList").trigger("change");