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.
Related
I've been self-teaching coding for the last 3 months or so and I have a couple of issues with a page I'm trying to make. I think my problems are a bit basic so I'm a little ashamed to ask. Any guidance would be very useful. Thank you!
I have a page that accepts recipes. Each recipe has a set number of instructions or ingredients.
The form that accepts the new recipe by default shows 3 fields to add instructions and 3 fields to add ingredients.
I'd like to implement a button that allows the user to add an extra ingredient or an extra step to the instructions.
This is what the New view file looks like in the instruction segment. It's pretty much the same for ingredients give or take a few things.
<div class="mb-3">
<label class="form-label" for="instructions" id="labelInstructions">instructions</label>
<% for(let i = 0; i<3; i++){ %>
<div class="input-group" id="instructionGroup">
<div class="input-group-prepend">
<span class="input-group-text">Step <%= i+1 %> </span>
</div>
<textarea class="form-control" aria-label=<%=`Instructions-Step-${i +1}`%> name=<%=`recipe[instructions][${i}][body]` %> id="instructions"></textarea>
</div>
<div class="valid-feedback">Looks good!</div>
<% } %>
I tried adding an onclick function to a
<button onclick="addInstruction()">+</button>
I required the file on the template and the file attempted to add the appropriate amount of divs and modify the classes and innertext, etc, etc.
But I got stuck here:
function addInstruction() {
console.log('clicked')
const label = document.getElementById('labelInstructions')
const tempDiv = document.createElement('div')
label.insertAdjacentElement("afterend", tempDiv)
}
In the console it shows that it is being clicked but it doesn't add the div I created. I know the rest of the logic isn't there yet I just wanted to see if I could see the div first, but I can't see anything.
Then I started thinking it would be easier to just add one to the loop limit. But that loop is written inside an EJS tag, I was wondering if there was a way to modify that through an onclick event. Or if there's just an entirely better way of doing this that I'm missing.
I'm very new to this, any help is appreciated. Thank you!
I think you are asking how to add some sort of div inside the DOM when a user clicks a button. To do this I would just use the .appendChild() method and append the div as a child element of the form for example document.querySelector("form").appendChild(<Div Variable>)
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));
I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:
HTML
<div class="row">
<div class="col-md-3">
<label>By Group</label>
<select id="groups" name="group" class="form-control selectpicker" multiple></select>
</div>
<div class="col-md-3">
etc...
</div>
</div>
JS
ajax_fetch('build_group_options', {groupno:groupno}).done(function(html) {
//var html is a list of options in html format
$('#groups').html(html).find('option[value=""]').remove();
//refresh the selectpicker to make sure options are registered in the picker
$('.selectpicker').selectpicker('refresh');
});
Try to reset all the pickers:
$('#reset_filters').click(function() {
$('.selectpicker').selectpicker('deselectAll');
$('.selectpicker').selectpicker('render');
$('.selectpicker').selectpicker('refresh');
$(this).closest('form').find('.selectpicker').each(function() {
$(this).selectpicker('render');
});
});
As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.
I got solution from following code.Try it
$("#listID").val('').trigger('change');
And also you can try this
$("#listID").val('').selectpicker('refresh');
Maybe it's a little late, but maybe it'll help someone someday. For me the solution was this:
$("#listID").val([]).selectpicker('refresh');
I had the multiselect option and with this you replace your chosen items for an empty array, otherwise you'll choose the option where the value is empty val('').
So I looked in the selectpicker.js file, the deselectAll and selectAll functions both filter their respective options by a few arguments (see line 884):
deselectAll: function () {
this.findLis();
this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();
}
A little breakdown:
.not('.divider') //prevents the divider receiving a click event!
.not('.disabled') //ignore any disabled elements
.filter('.selected') / .not('.selected') //depending if its selectAll() or deselectAll()
.filter(':visible') //prevent any non-visible element receiving a click event!?
My problem was the .filter(':visible'), the list was not visible when the click event was triggered so these options were filtered out and therefore did not get 'clicked'/'deselected'.
I amended my version of the plugin and now my 'reset' button works as expected. The new line is:
this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();
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");
I have this piece of html code in my application (the ng-app and ng-controller values are defined before):
<div>
<label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
<input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
<img ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>
My AngularJS controller looks like this:
function ProjectSearchCtrl($scope) {
$scope.startDate = '';
$scope.hasStartDate = function () {
return $scope.startDate != '';
};
$scope.clearStartDate = function () {
$scope.startDate = '';
};
$scope.dateOptions = {
dateFormat: "yy-mm-dd",
showOn: "focus"
};
}
This works perfectly: I have a datepicker set up correctly thanks to AngularUI, the AngularJS binding works...
But if I change the showOn value to "button" or "both" (the two possible options which will actually show the datepicker button), everything after the input (containing the ui-date attribute) stops working: ng-show, ng-click... The controller doesn't even get called.
Versions (all is up-to-date):
jQuery 1.7.2
angularJS 1.0.0
angularUI 0.1.0
Chrome 20
Please take a look at this line in the Select2 directive. This is a note to ANYONE writing a directive / implementing a plugin in AngularJS (not just AngularUI):
Any plugin that injects a new DOM element immediately after the linked element runs the risk of disrupting the compiler. The reason is because the way AngularJS works, it caches the index of each DOM element at compile time, and then makes a second pass upon linking. When you inject new DOM, you offset the index of all siblings immediately after the directive.
For this reason, I've been forced to wrap both TinyMCE and Select2 in a setTimeout so that the DOM is injected after the linking is done. Note that I don't bother using $timeout because I really don't need/want $apply() to fire just to turn on the plugin, as there are already callbacks in place that do this when the plugin changes the data.
I'll look into making sure this is uniform across AngularUI. Unfortunately, there appears to be no elegant solution to this problem in AngularJS at this time, however it's a problem I've been thinking about for some time and am constantly looking for a better solution towards.
Read this Google Groups post for more information about compiling vs linking: https://groups.google.com/forum/?fromgroups#!searchin/angular/compile$20link/angular/RuWn5W3Q5I0/KJhcQJ_RNsIJ
You can also open a bug ticket on the AngularUI project in the future.
As suggested by Pete BD in his comment on the question, there is some kind of bug/unwanted behaviour in the way that jQueryUI and angularJS interact. A workaround is to wrap the input control in a div.
<div class="date">
<label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
<div>
<input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
</div>
<img class="clear" ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>
Now I can use showOn "both" or "button".
This is fixed in the latest release!