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.
Related
Using marionette and trying to display a jquery date picker. However, when I click on the input, the calendar does not appear.
This is my view:
const view = app.Views.Layout.extend({
template: require('./templates/template'),
ui: {
dateInput: '#date_input',
},
onShow() {
this.ui.dateInput.datepicker();
},
My template with the datepicker div:
<div id="date_container" class="input_holder">
<input type="text" id="date_input" placeholder="mm/dd/year"></input>
<div id="date_picker_holder"></div>
</div>
I would assume this would be enough for the calendar to render properly however it doesnt happen. Am I missing something in my view or my template?
this.ui.dateInput
is a selector. You need to create a jQuery object by passing this selector to it and then call .datepicker() on the result:
$(this.ui.dateInput).datepicker();
I'm trying to do some stuffs with Angular from a few days and I'm stucked with an update problem.
This is part of my HTML page :
<div ng-app="monApp" ng-controller="monControleur">
Date de début : <input type="text" ng-model="date_deb" placeholder="JJ/MM/AAAA" value="" name="date_d" id="champ_date_deb" size="12" maxlength="10"> <span id="calendarMainDeb"></span>
<script type="text/javascript">
//<![CDATA[
calInit("calendarMainDeb", "Calendrier Deb", "champ_date_deb", "jsCalendar", "day", "selectedDay","calendarWrap1");
//]]>
</script>
<table border='1'>
<tr data-ng-repeat="evenement in mydata | entre_deux_dates:date_deb:date_fin ">
....
When I input a new date_deb with the keyboard, displayed values are filtered with Angular. On the contrary, if a use a JS calendar to set the date_deb value, it sets the value but no filtering is realized unless giving focus in JS and pressing "space".
Here is the last part of the JS which updates the date value :
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
field.focus();
What can I do to dynamically update the filtered values right after a date is picked in the calendar ? I wouldn't like the user to have to press "space" after each selection ...
I have tried a lot of solutions in angular (ng-model-options, etc.) and in JS but none worked.
You need to invoke a digest cycle:
$scope.$applyAsync(function() {
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
field.focus();
});
That is because angular works by dirty checking - in each digest cycle (apply means run a digest for the root scope), all watchers in the scope hierarchy are checked for changes, and updates occur as necessary.
You can put your answer in $timeout, as $timeout runs the digest cycle as well as it saves from the error "$apply alreay running".
$timeout(function() {
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
});
I am using a Kendo template with an array to dynamically add rows to a form, however, when I push an item onto the array, it adds two rows, both bound to the same data object in the MVVM (so with two objects, there are four rows). I've run the page with a debugger; line in the template, and as suspected, it hits twice before it finishes.
And what's weirder is that it renders the rows in order, then in reverse order, so if I make a change on the first row, it then makes the same change to the last row (since they are bound to the same object in the array), etc.
HTML
Here is the HTML where the form resides (the observable object classInfo is already bound to the <form> tag, hence the reason it's missing from the data-bind):
<fieldset id="classWhen">
<p>
<!-- other form stuff -->
</p>
<div id="classDates" data-bind="source: classInfo.ClassDates" data-template="classDateTemplate"></div>
</fieldset>
Kendo Template
Here is the template which is a row that contains a dropdown list and two date pickers:
<script id='classDateTemplate' type='text/kendo-ui-template'>
<p>
<select class="classDateTypeDropdown">
<option><!-- TYPE 1 --></option>
<option><!-- TYPE 2 --></option>
<option><!-- TYPE 3 --></option>
<option><!-- TYPE 4 --></option>
</select>
<input class="classDatePicker" data-bind="value: DateStart" style="width: 125px;" /> to
<input class="classDatePicker" data-bind="value: DateStop" style="width: 125px;" />
</p>
</script>
Kendo Observable Object
Here is the Kendo Observable which has an array, which is formatted as such:
var classModel = new kendo.observable({
classInfo: {
//.....
ClassDates: [],
//.....
}
});
Javascript push Function
And an addDate() function which pushes a new item to the array:
function addDate() {
classModel.get("classInfo.ClassDates").push({
"ClassType": "Type 1",
"DateStart": null,
"DateStop": null
});
//change inputs to DatePickers
//change select to DropDownList
}
I have tried running it without creating the DropDownList and DatePickers, using the basic HTML elements, but with the same result. Any help would be greatly appreciated.
So, I'm not sure why this was happening (some research will need to be involved), but the cause of the problem was with my binding. Apparently the Kendo template does not like binding to object arrays that belong to other objects, as I have with classInfo.ClassDates.
I changed the bindings from:
kendo.bind($('#addClassWindow'), classModel);
<div data-bind="source:classInfo.ClassDates"data-template="classDateTemplate"></div>
to:
kendo.bind($('#addClassWindow'), classModel.classInfo);
<div data-bind="source:ClassDates"data-template="classDateTemplate"></div>
and now it works fine. For whatever reason.
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 integrate a calender view in a python based application. I Am almost done with it. now i have only a single problem of generating Ids for the calendar fields. eg If I have one calendar field then that field works fine with the below code, however if I have 2 or more calendar fields in one form how would I generate Ids for Them. and is there a need to write a separate script for every field. here is my code sample that I apply for a single field.
<script type="text/javascript">
$(function() {
$('#popupDatepicker').calendarsPicker({calendar: $.calendars.instance('islamic'), dateFormat: 'dd-mm-yyyy'});
});
</script>
And My web application code is here :-
<input type="text" **id="popupDatepicker"** name="${name}" autocomplete="OFF" size="3"
class="${css_class}" ${py.attrs(attrs, kind=kind, value=value)}/>
Now I want to generate id dynamically. The above code is called nly on my calendar type of fields. so how should i generate <input Ids > and their respective script here.
You could instead give them a class of popupDatepicker, and then change your jQuery to use .popupDatepicker instead of #popupDatepicker.
So replace your HTML with the following:
<input type="text" class="popupDatepicker" name="${name}" autocomplete="OFF" size="3" class="${css_class}" ${py.attrs(attrs, kind=kind, value=value)}/>
And your jQuery with this code:
<script type="text/javascript">
$(function() {
$('.popupDatepicker').calendarsPicker({calendar: $.calendars.instance('islamic'), dateFormat: 'dd-mm-yyyy'});
});
</script>
why not make a class only for those fields you want to have calendar then edit your selector as:
//get the element with popupDatepickerClass class and makeit a calendarsPicker()
$('.popupDatepickerClass').calendarsPicker(SOME TXTS);
notice how your '#' becomes '.'
your element looks like:
//add the popupDatepickerClass on every element you want to be converted as calendar
class="${css_class} popupDatepickerClass"
this way your script will look for all elements with the same class and make it a calendar.
//create a css class with name: popupDatepickerClass and its not necessarily to have a value
.popupDatepickerClass { }