JavaScript function after clicking on clear button
function resetTime() {
document.getElementById("to_time").valueAsDate = null;
}
PrimeFaces calendar tag
<p:calendar id="to_time"
value="#{anomaliesList.toDate}"
readonlyInput="true"
maxdate="#{currentDate}"
size="16"
pattern="dd/MM/yyyy HH:mm" />
First of all, p:calendar is deprecated. Use p:datePicker instead.
The easiest way to deal with this is setting a widgetVar on your p:datePicker. This allows you to use the client side API.
To reset a date, use:
PF('yourWidgetName').setDate(null);
Note that if you want to use getElementById you probably need to incorporate the form clientId.
See also:
How can I know the id of a JSF component so I can use in Javascript
Related
I am using AngularJS with this bootstrap-datepicker plugin:
Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
Copyright 2012 Stefan Petre
Improvements by Andrew Rowls
I have it bound like this:
<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />
I get the values to inputs using ng-model.
When I type the date into this field using keyboard it all works OK, but when I click on a field and select a date from the Datepicker:
the model doesn't get updated,
the field is not treated as dirty (no ng-dirty class).
Is there a way to tell Angular to update value of obj.FirstDate when using the Datepicker? For example to attach it to an event? Or any other way that this would work?
I have a few of these fields so I don't want to write the script which attaches to a field using its id. Any help appreciated.
After much time of struggling with this I was forced to use below code to fix every of my datepicker instances at once:
function fixDatepickerTriggerChange() {
$(document).ready(function () {
$('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
angular.element($(this)).triggerHandler('input');
});
});
}
And run it from within the angular.controller.
Based on this answer: https://stackoverflow.com/a/23850753/1813219.
I am using JSF 1.2 and RichFaces. I have a requirement where on click of command button (<h:commandButton>) RichFaces data table will be displayed with 3 set of rows, This is working fine but the problem is I need to set the focus in the text box of data table which is not working. Please find the sample code I am working with.
Command button :
<a4j:commandButton immediate="true"
action="#{bean.addTomethod}"
reRender="myform"
oncomplete= "setFocusOnRichComponenet();"
rendered="true">
</a4j:commandButton>
JavaScript code :
function setFocusOnRichComponenet(){
document.getElementById("myform:richDataTableList:0:richTextBoxID").focus();
}
Here, myform:richDataTableList:0:richTextBoxID is the id of the component where I want to put focus.
When the id is generated dynamically, it can be erroneous at times to try to refer using document.getElementById as you must know the full id.
Simpler way to do this is use the RichFaces method clientId('elementName')
This will basically resolve the exact id so you don't have to refer by tableName[].Element[] format.
So for your scenario, you could replace the javascript function as below:
function setFocusOnRichComponenet(){
document.getElementById("#{rich:clientId('myTextBox')}").focus();
}
where 'myTextBox' is the name of the textbox you are trying to refer
Add a class in input:
<h:inputText id="test" class="testClass"/>
In function set focus by class with jQuery:
function setFocusOnRichComponenet(){
jQuery(".testClass").focus();
}
I created a DateTimePicker and am currently using the "onChangeDateTime" as a means of updating a page using ajax. But I'm not a front end person and I'm having trouble understanding what exactly is going on and I have almost no experience with Jquery. I'm working on learning more but in the mean time I'd appreciate some advice if anyone is offering.
What I'm trying to do is have a link/button on the page where I can call some method to change the time in the date picker and have it trigger the onChangeDateTime function.
I thought it would be as simple as doing $("#DateTimePicker").somefunction() to change the time but I can't seem to figure out even how to change the time nor how to trigger onChangeDateTime().
I'm creating a schedule viewer and I'd like to let users click a button to cycle forward and backward in time rather than having to select the specific time over and over again on the datetimepicker.
I got my version of datepicker from http://xdsoft.net/jqplugins/datetimepicker/
Edit: this is what I've written so far.
<body>
<input id="datetimepicker" type="text" value="2015/04/08 17:49">
<a id="myLink" title="Click to do something"
href="#" onclick="backEpisodes();">Backwards</a>
<a id="myLink" title="Click to do something"
href="#" onclick="forwardEpisodes();">Forwards</a>
<script>
jQuery('#datetimepicker').datetimepicker({
formatTime:'g:ia',
format: 'm/d/Y g:i a',
inline:true,
maxDate:'<?php echo date('Y/m/d', strtotime("+3 week")); ?>',
onSelectTime:function(current_time,$input){
updateEp($input.val());
}
});
</script>
</body>
You can programmatically set the value of the DateTimePicker by using it's setOptions() function and specifying the "value" option like this:
$('datetimepicker').data('xdsoft_datetimepicker').setOptions({
value: '1944/06/06 6:06' // Of course this needs to match the correct format
});
jsfiddle
Note: The jsfiddle contains a function that parses a string into a JavaScript Date object. That could be implemented using a regular expression, but I took a shortcut and utilized the moment.js library.
Notes:
You might want to use the "onChangeDateTime" option, rather than the "onSelectTime" option if you want that code to also execute when the user changes the date.
The format of your initial value ("2015/04/08 17:49") does not match the format you give to the datetimepicker ('m/d/Y g:i a'). You will want to correct that.
The "formatTime" option is needed only if you are specifying the "minTime" and/or "maxTime" options. Similarly, the "formatDate" option is needed only if you are specifying the "minDate" and/or "maxDate" options. Therefore, you don't need to specify the "formatTime" option. You could specify the "formatDate" option since you do specify a "maxDate", but it defaults to "Y/m/d".
id values should be unique, so you should not use "myLink" as the value for both your <a> elements.
I use calendar with timeOnly attribute likes:
<p:calendar pattern="HH:mm" timeOnly="true" value="#{data.currentAbsenceData.ABZTIMF}" id="xabsQuickFromTime" onchange="calculateQuickHour();" timeZone="#{data.timeZone}"/>
<p:calendar pattern="HH:mm" timeOnly="true" value="#{data.currentAbsenceData.ABZTIMT}" id="xabsQuickToTime" onchange="calculateQuickHour();" timeZone="#{data.timeZone}"/>
<p:inputText id="xabsQuickHourInput" value="#{data.currentAbsenceData.ABZDAYI}">
Javascript code:
function calculateQuickHour(){
console.log("hello _ calculateQuickHour");
getHourValue('xabsQuickFromTime', 'xabsQuickToTime', 'xabsQuickHourInput');
}
Well, I use the slider of the calendar to change the value of its input field, the value of the input field changes perfectly but the javascript function is not called by "onchange" event. This works fine in Primefaces 3.5. So, what is the possible event that should be used in this case?
Try this:
<p:ajax event="dateSelect" oncomplete="calculateQuickHour();"/>
Have a look at org.primefaces.component.calendar.Calendar.EVENT_NAMES to see all events valid for calendar. If you don't know wich class implements your component have a look in the corresponding taglib.
If in some case this doesn't help you can set something invalid and a breakpoint on that particular exception at any time. Just before the exception is thrown there will be some code comparing your invalid value against the valid ones.
I need to clear the default values from input fields using js, but all of my attempts so far have failed to target and clear the fields. I was hoping to use onSubmit to excute a function to clear all default values (if the user has not changed them) before the form is submitted.
<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form' value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>
How would you accomplish this?
Read the ids+values of all your fields when the page first loads (using something like jquery to get all "textarea", "input" and "select" tags for example)
On submit, compare the now contained values to what you stored on loading the page
Replace the ones that have not changed with empty values
If it's still unclear, describe where you're getting stuck and I'll describe more in depth.
Edit: Adding some code, using jQuery. It's only for the textarea-tag and it doesn't respond to the actual events, but hopefully it explains the idea further:
// Keep default values here
var defaults = {};
// Run something like this on load
$('textarea').each(function(i, e) {
defaults[$(e).attr('id')] = $(e).text();
});
// Run something like this before submit
$('textarea').each(function(i, e){
if (defaults[$(e).attr('id')] === $(e).text())
$(e).text('');
})
Edit: Adding some more code for more detailed help. This should be somewhat complete code (with a quality disclaimer since I'm by no means a jQuery expert) and just requires to be included on your page. Nothing else has to be done, except giving all your input tags unique ids and type="text" (but they should have that anyway):
$(document).ready(function(){
// Default values will live here
var defaults = {};
// This reads and stores all text input defaults for later use
$('input[type=text]').each(function(){
defaults[$(this).attr('id')] = $(this).text();
});
// For each of your submit buttons,
// add an event handler for the submit event
// that finds all text inputs and clears the ones not changed
$('input[type=submit]').each(function(){
$(this).submit(function(){
$('input[type=text]').each(function(){
if (defaults[$(this).attr('id')] === $(this).text())
$(this).text('');
});
});
});
});
If this still doesn't make any sense, you should read some tutorials about jQuery and/or javascript.
Note: This is currently only supported in Google Chrome and Safari. I do not expect this to be a satisfactory answer to your problem, but I think it should be noted how this problem can be tackled in HTML 5.
HTML 5 introduced the placeholder attribute, which does not get submitted unless it was replaced:
<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>
Further reading:
DiveintoHTML5.ep.io: Live Example... And checking if the placeholder tag is supported
DiveintoHTML5.ep.io: Placeholder text
1) Instead of checking for changes on the client side you can check for the changes on the client side.
In the Page_Init function you will have values stored in the viewstate & the values in the text fields or whichever controls you are using.
You can compare the values and if they are not equal then set the Text to blank.
2) May I ask, what functionality are you trying to achieve ?
U can achieve it by using this in your submit function
function clearDefaults()
{
if(document.getElementById('cs-Price-2').value=="Min. Price")
{
document.getElementById('cs-Price-2').value='';
}
}