Develop Reference

Detect changes in django-bootstrap-datepicker-plus with JQuery

I am using django-bootstrap-datepicker-plus package, and I am trying to display an alert when the date is changed. However, jquery does not seem to detect any changes to the date.
Following this question Detect change to selected date with bootstrap-datepicker only works when I add the JQuery UI CDN to my code, which causes a problem as two datepickers appear. Is there a way to get JQuery to detect a change in django-bootstrap-datepicker without adding JQuery UI code?
forms.py
from django import forms
from bootstrap_datepicker_plus.widgets import DatePickerInput
class ExampleForm(forms.Form):
DOB = forms.DateField(required=False, label="Date of Birth",
input_formats=['%d/%m/%Y'],
widget=DatePickerInput(format='%d/%m/%Y')
)
Html
<div class="col-12 col-md-6 mb-0 p-1">
{{ form.DOB|as_crispy_field }}
</div>
Rendered HTML

There is a lot of JS packages with similar [date,time]picker functionality. django-bootstrap-datepicker-plus uses eonasdan picker, according to the docs. They use different event names. Eonasdan implementation prefixes all events with dp. namespace, as stated here, so the following should work:
$('#id_DOB').on('dp.change', ev => myHandler(ev));

Add fixed item and non-removable item to select2?

I have a mail module and I want to add the mentioned (in the photo) email or hr#example.com to be fixed selected and non-removable option in cc in a multi selection select2. How may I achieve this? any idea?
Here is my Blade syntax for selecting cc :
<div class="form-group">
<label>CC <span class="astirered">*</span></label>
{!! Form::select('cc[]', $employee_list, $mail_cc_user_id, ['class'=>'form-control select2','multiple']) !!}
<span class="astirered">{!! $errors->first('cc') !!}</span>
</div>
and this is the script of select 2 :
$('.select2').select2({
placeholder: "Please select one"
});

I dont think select 2 has a built in way for that, but with some additional JQuery it is possible to hide it. If you look the select box with inspector you will find something like this
<li class="select2-selection__choice" title="mni#email.com" data-select2-id="id">
<span class="select2-selection__choice__remove" role="presentation">×</span>
mni#email.com
</li>
You could remove that x by jQuery like this:
$('li.select2-selection__choice[title="mni#email.com"]').find('span.select2-selection__choice__remove').remove();
And then for exmaple you could mark that specific email default selected in the form, then run that jQuery command when document loads.

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

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.

How to add search for select in materialize css framework

I am new in materialize CSS framework and I am looking for searchable select.
I have added select component but now I want it to be searchable so that user can search value from dropdown options and select the value.
Thanks in advance

Another solution to this problem is to set minLength:0 when using Autocomplete - this essentially triggers the dropdown options on focus, and allows for searching or selecting.
The HTML:
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
The JS:
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
minLength: 0,
});
Codepen here.

I have been searching for this option for quite a while. After digging deeper into materialize Git Hub threads found this answer from LeMinaw
he got everything nailed out. but he was using a custom materialize file and also it wasn't working on the mobile. So, I have modified the code to fix mobile issue. Please use import the following script file after you imported the Materialize.js file MaterilizeSelect.js.
and format your select as following
<div class="input-field col s6">
<select data-id="26" id="MySelct" serachname="myselectsearch" searchable="your placeholder for seach box">
<option value="some1">Some One</option>
<option value="SeamSeam">SeamSeam</option>
<option value="toott">Toott</option>
<option value="Flat">Flat</option>
</select>
<label for="roof_type">My Select</label>
</div>
serachname --> A meaning fullname for search box
searchable --> placeholder your search box(label)
Hope this helps. Once again thanks to LeMinaw

There is an open issue on github.
LeMinaw's solution:
Improvements :
No need to modify Materialize JS files Grabs keyboard focus nicely No
need for annoying JQuery Renders correctly for any widget width Demo
The code is avalaible in this gist :
https://gist.github.com/LeMinaw/52675dae35531999e22f670fb66d389b
To use it, just load this JS file and add searchable="placeholder" to
your select element.

Materialize's search option just isn't great. You could work with these to try to "fix" it, but you're better off just utilizing a better select javascript package, like Select2, which does all this easily. https://select2.org/getting-started/installation
I use materialize for lots of things, but always strengthen it with Select2 (and some other form UI libraries).