I am using a Jquery ui datepicker as follows:
<input type="text" name="StartDate" id="StartDate" class="date-picker" />
<input type="text" name="FinishDate" id="FinishDate" class="date-picker" />
in my JS
$(".date-picker").datepicker({
onSelect: function (date) {
alert("selected!");
}
});
Is there a way to detect when the user left the datepicker empty similar to the way selection is detected as above?
Sure, you're looking for the onClose callback: jsFiddle
$("input").datepicker({
onClose: function(dateText){
if( !dateText ){
alert('empty!');
}
}
});
Related
I have a Range Slider in my template. I want to call a function in my view on Range Slider value change.
index.html
<input id="slider1" type="range" value="3" min="1" max="20" step="1" />
I am using a button and text also I took help from this
Python 2.7.10 Django 1.9
Assume you have call_view(request) to call...
<input type="range" ... onchange="callFun(this.value)">
Note: I used fetch
function callFun(value) {
fetch('call_your_url/?value='+ value).then(function(response) {
console.log(response.status);
}
}
In your view function...
def call_view(request):
request.GET.get('value')
return HttpResponse("success")
I want to add data-value attribute in input element:
{{input type="text" data-value=ec.ec_id value=ec.ecl_subject placeholder=ec.ecl_en_subject name="ecl_subject" class="form-control" }}
But its not visible in browser:
<input id="ember874" class="ember-view ember-text-field form-control" placeholder="Doctor4US: Appointment" type="text" name="ecl_subject">
ADDING DATA ATTRIBUTES
By default, view helpers do not accept data attributes
i.e.
{{input type="text" data-value=ec.ec_id value=ec.ecl_subject name="ecl_subject" }}
Render as
<input id="ember257" class="ember-view ember-text-field" type="text" value="12">
There are two ways to enable support for data attributes. One way
would be to add an attribute binding on the view, e.g. Ember.TextField for the specific attribute:
Ember.TextField.reopen({
attributeBindings: ['data-value']
});
Now the same handlebars code above renders the following HTML:
<input id="ember259" class="ember-view ember-text-field"
type="text" data-value="110" value="12">
You can also automatically bind data attributes on the base view with the following:
Ember.View.reopen({
init: function() {
this._super();
var self = this;
// bind attributes beginning with 'data-'
Em.keys(this).forEach(function(key) {
if (key.substr(0, 5) === 'data-') {
self.get('attributeBindings').pushObject(key);
}
});
}
});
For more detail reffer:https://guides.emberjs.com/v1.10.0/templates/binding-element-attributes/
Ember Input helpers doesn't allow data-attributes. The list of allowed attributes can be found at https://guides.emberjs.com/v2.6.0/templates/input-helpers/
The solution for problem is that you use html tag itself, when you want to place data-attributes like below
<input type="text" data-value="{{ec.ec_id}}" value="{{ec.ecl_subject}}" placeholder="{{ec.ecl_en_subject}}" name="ecl_subject" class="form-control/>
I have a datapicker and i use it two times.
I have to disable previous dates if first datapicker is initialized and give user to chose modified datapicker.
So, i have this code :
<script>
$(document).ready(function() {
$( ".datapick" ).datepicker(
{
minDate: 0,
dateFormat: 'dd-mm-yy',
});
});
</script>
<input type="text" name="start" class="datapick" placeholder="Starting date" class="datapick">
<input type="text" name="end" class="datapick" placeholder="End date" class="datapick">
I am using minDate to disable previous days, but i dont know if selected 24-12-2014, to disable all previous days.
I think you get me :))
Try this following. I hope it will work.
<script type="text/javascript">
jQuery(function() {
jQuery(".Start").datepicker({ dateFormat: 'mm-dd-yy', maxDate: 0 });
jQuery(".End").datepicker({ dateFormat: 'mm-dd-yy', minDate: 0 });
});
</script>
<input name="Start" class="Start" type="text" placeholder="Starting date">
<input name="End" class="End" type="text" placeholder="Ending date">
It may solve your problem :-)
I don't know anything about cookies or how to set them and I need some advice. I have two radio buttons. For example if an option is changed from one to another, that option will remain even if the page is refreshed or changed on other pages where this radio buttons exist, and I need to make the cookie setting for this code. Can someone can give me some advice regarding what code should I add to my php?
This is js code:
$(document).ready(function() {
$('radio[name=radio]').each(function() {
$(this).click(function() {
my_function();
});
});
});
my_function()
{
var value_checked = $("input[name='radio']:checked").val();
$.ajax({
type: 'POST',
url: 'page.php',
data: {'value_checked':value_checked},
});
}
html code
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" /><label for="radio2">Choice 2</label>
</div>
</form>
It is important to remember that cookies can only be set before any output is sent to the client on a webpage, because cookies are set as headers, and headers can only be sent prior to any part of the webpage output. Therefore, you need to refresh the page to set a cookie to the value of your radio button.
At the very top of the php, BEFORE the <!DOCTYPE> html or <html> tag, you need to add something like this:
<?php
if(isset($_POST['radio1'])) {
setcookie('radio1', true, 600, '/');
setcookie('radio2', false, 600, '/');
} else if(isset($_POST['radio2'])) {
setcookie('radio2', true, 600, '/');
setcookie('radio1', false, 600, '/');
}
?>
The above code will make sure that only one of the cookies is set to true and the other is set to false. The cookies will expire after ten minutes.
This is after you properly set up the html form so that you can detect that your user has selected a button:
<form method="POST" action="index.php">
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" />
<label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Choice 2</label>
</div>
</form>
The PHP Manual page has more information: http://php.net/manual/en/function.setcookie.php
EDIT: Semantic code changes and fixed the html tags described.
See setcookie examples how to set cookies in PHP. But you can do it also with javascript js_cookies.
The application is written using ASP.NET MVC 3 in vs2010.
I have a knockout template that updates some css and visible bindings using a
dependantObservable.
The issue ONLY occurs when I bind the
value of the select element to the
IntervalID. If this is not bound the
UI is updated as expected.
I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.
The dependantObservable is called HasChanged.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>
<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
<script id="intervalTemplate" type="text/html">
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
<h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>
<script type="text/javascript">
function IntervalModel(data) {
var _this = this;
_this.IntervalID = ko.observable(data.IntervalID);
_this.Start = ko.observable(data.Start);
_this.End = ko.observable(data.End);
_this.IntervalTypeID = ko.observable(data.IntervalTypeID);
_this.OriginalStart = ko.observable(data.Start);
_this.OriginalEnd = ko.observable(data.End);
_this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);
_this.HasChanged = ko.dependentObservable(function () {
return !(_this.OriginalStart() == _this.Start() &
_this.OriginalEnd() == _this.End() &
_this.OriginalIntervalTypeID() == _this.IntervalTypeID());
});
}
var viewModel;
$(function () {
var viewModel = {};
viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
ko.applyBindings(viewModel);
});
</script>
Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.
Thanks!
There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133
The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.
So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.
Here it is working:
http://jsfiddle.net/rniemeyer/uDSFa/