I want to make a calendar where you can select the date, and automatically you can select the time. I shouldn't use butons to change the time :(
So I have the next:
<rich:calendar id="currentDate" popup="true"
datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
showFooter="false" required="true" resetTimeOnDateSelect="true"
oncollapse="return timeSelected;"
showWeeksBar="false" showWeekDaysBar="true"
value="#{bean.currentDate}"
ondateselected="timeSelected=false; Richfaces.getComponent('calendar',this).showTimeEditor(); return true;"
ontimeselected="timeSelected=true; return true;"
ontimeselect="timeSelected=true; return true;"
>
<a4j:support event="onchange" ajaxSingle="true" />
</rich:calendar>
But it doesn't work at all.
There are two problems.
1 - When you choose a day, the popup appears. But if you press 'Accept' withouth changing the time, you can't close the calendar :(
2 - Once you have selected the date/time, but you want to change only the time, you can't do it because you can't select the current day, so you can't see the time editor.
I'm using rich faces 3.3.3
Thanks
The ondateselected and ontimeselected attributes are only invoked when the date or time is actually changed, not when you just click on the date or closes the time editor. There are no standard <rich:calendar> attributes which capture that. You need to override the standard calendar.js functions eventCellOnclick() (which is invoked when a date is clicked) and hideTimeEditor() (which is invoked when time editor is closed).
The following works for me with RichFaces 3.3.3 (and Mojarra 1.2_15 and Tomcat 7.0.29).
<h:form id="form">
<rich:calendar id="currentDate" popup="true"
datePattern="dd/MM/yyyy - HH:mm" enableManualInput="false"
showFooter="false" required="true" resetTimeOnDateSelect="true"
showWeeksBar="false" showWeekDaysBar="true"
value="#{bean.currentDate}"
oncollapse="return this.component.timeSelected;"
>
<a4j:support event="onchange" ajaxSingle="true" />
</rich:calendar>
</h:form>
<script>
var currentDateComponent = $('form:currentDate').component;
var originalCellOnClickFunction = currentDateComponent.eventCellOnClick;
currentDateComponent.eventCellOnClick = function() {
this.timeSelected = false;
originalCellOnClickFunction.apply(this, arguments);
currentDateComponent.showTimeEditor();
};
var originalHideTimeEditorFunction = currentDateComponent.hideTimeEditor;
currentDateComponent.hideTimeEditor = function() {
this.timeSelected = true;
originalHideTimeEditorFunction.apply(this, arguments);
};
</script>
Note that ondateselected, ontimeselect and ontimeselected attributes are removed and that oncollapse attribute has been changed. Also note that the script must be executed after the calendar is been populated in the DOM. So the above works as-is. If you want to move the script into its own JS file (which is a good thing), make sure that it's executed on DOM ready only (i.e. put script in end of <body>, or execute it by window.onload() or jQuery.ready()).
Related
I have a function that shows the password on a textbox and another the hides it and hows the dots.
Here's one of them:
function MouseOver_MudarTipoPassword() {
document.getElementById('<%= tb_PalavraPasse.ClientID %>').setAttribute('type', 'singleline');
}
And the control that has the events:
<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword()" onmouseout="MouseLeave_MudarTipoPassword()" />
So, I I've been cleaning up the code because there are functions being used on several pages and I'm combining them into a javascript file. It works like this if I put it in the head section of the page. But I want to pass an argument instead. I want to pass the textbox clientid. How can I do that?
Make the function take a parameter:
function MouseOver_MudarTipoPassword(elementId) {
document.getElementById(elementId).setAttribute('type', 'singleline');
}
Pass the id into the function call:
<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword('img_Eye')" onmouseout="MouseLeave_MudarTipoPassword('img_Eye')" />
Update
Apologies, I didn't pay enough attention to the question. The problem with my answer is that the script must run before the DOM is created, like in the HEAD.
To make it work like you want you will have to attach an event listener to your elements. You also need a way to dynamically associate the target of the listener code. You can do that with data-* attributes.
See this fiddle for working example
The sample markup:
<input type="text" id="theTextBox" value="The IT Crowd" />
<hr />
<img id="Moss" src="https://media0.giphy.com/media/TrDxCdtmdluP6/giphy.gif" data-target="theTextBox" />
The
sample javascript:
var test = document.getElementById("Moss");
test.addEventListener("mouseover", MouseOver_MudarTipoPassword, false);
function MouseOver_MudarTipoPassword( event ) {
var theImg = event.srcElement;
var target = theImg.dataset.target; //re-use this function by applying data-target to all elements that need it (does not have to be named "target")
document.getElementById(target).setAttribute('type', 'password');
}
I'm running into a bit of an issue. My JavaScript function returns "undefined" when using master pages. However, when I'm not using master pages, it works fine. Here is my code:
HTML:
<input id="txtPhoneNumberAreaCode" class="TextBox" runat="server" type="text" onkeyup="GoToNextTextBox(this.id, 3, 'cphMainArea_txtPhoneNumberFirstThree')" />
The Javascript:
function GoToNextTextBox(CurrentTextBox, MaxCharLength, NextTextBox) {
alert(CurrentTextBox.value);//pops up "undefined"
if (CurrentTextBox.value.length == MaxCharLength) {
NextTextBox.focus();
NextTextBox.style.backgroundColor = '#FFFFFF';
}
Again, this works fine when not using master pages. So I'm completely confused.
This is because, you are doing it wrong.
In GoToNextTextBox(), you are expecting a DOM element, but you are passing only its id.
DO this:
<input id="txtPhoneNumberAreaCode" class="TextBox" runat="server" type="text"
onkeyup="GoToNextTextBox(this, 3, 'cphMainArea_txtPhoneNumberFirstThree')" />
When using master pages and user controls the rendered ID of your controls change, but there is a way to stop it.
Let's say you have a Textbox
<asp:Textbox id="txtName" runat="server"></asp:Textbox>
on a standard asp page, it's id will be as you expect, txtName
Now you add a master page, called Site.Master. In your rendered html, the controls name is now different.
cntl1_Site_txtName
I might have the syntax of the new name a bit off, but you can view source and find it for yourself.
There is a way to control that though. There is a property on your page, ClientIDMode.
If i remember correctly it has 3 or 4 options. Auto ID is default I believe.
If you set it to static for that page, then you will no longer get the verbose control IDs, they will be as you expect.
This can be a downfall when using things like Repeaters though. You will not have easy access to specific fields if they do not have the verbose ID
This is my first time using jquery and while this is a fairly simple task I'm stuck already.
I've got a input box with the time of day in it. I would like to create a button to grab the time and send it to a variable (setTime) so I can use the time elsewhere in the script.
However I'm having trouble the variable to pass, I've added an alert window but all I get is either a blank alert or an "undefined" alert.
The first line Start Time.... works fine its the setTime stuff that's broken.
Page header:
setTime = $('#setTime').text();
$('#formTime').timeEntry({show24Hours: true});
Page body:
<p>Start Time <input type="text" size="2" id="formTime" class="spinners" value="" /> </p>
<input type="button" value="Set Time" onclick="$('#setTime').val('#formTime');" />
<input type="button" value="Show Date" onclick="alert(setTime);" />
Thanks
You have to make a few changes to your code.
Update your Html by adding some ids for example.
<p>
Start Time <input type="text" size="2" id="formTime" class="spinners" value="" />
</p>
<input id="setTime" type="button" value="Set Time" />
<input id="showTime" type="button" value="Show Date" />
Personally I don't like assigning script to events within the html controls as they become hard to maintain and add clutter to the page.
You can write script at the bottom of the html page within a script tag or better yet, use an external js file. External js files will also keep your Html clean and your scripts unobtrusive.
var setTime = 0;
var $fromTime = $("#formTime")
$("#setTime").off("click").on("click", function(){
setTime = $fromTime.val();
});
$("#showTime").off("click").on("click", function(){
alert(setTime);
});
See working DEMO
Using jQuery can be confusing at times but the on-line documentation is fantastic.
#setTime means "The element with the id 'setTime'" - you have no element with that id, and the control you are trying to get the value of has no id at all.
timeEntry is not a jQuery method, so will error when you try to call it. If you are using a plugin that you think should add that method then you should say so.
.val('#formTime') will set the value of a form control to the string #formTime. If you want to get the value, don't pass that method an argument … and do assign the return value of the method call to something.
You should probably work through an introduction to programming and JavaScript.
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!
I have apex tag that generate input text field.
<apex:page id="my_page">
<apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>
When someone clicks this field, I want to execute javascript.
But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.
<input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010"
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">
As you can see id has junk part :(
id="j_id0:j_id3:j_id4:c_txt"
In my Javascript I'm trying to getElementById('c_txt') but this does not work of course. How to deal with this???
UPDATE
Seems like I can do this but not working...
<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>
<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />
datepickerjs
var elem = getElementById('c_txt');
alert(elem);
The alert shows 'null' so something must be wrong.
Even this alert returns null...
var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);
You can use the $Component notation in javascript, you use it like so:
var e = document.getElementById("{!$Component.ComponentId}");
One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="theBlockSection">
<apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>
// snip
// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");
I got solution to my problem.
$Compoent global visualforce expression can only be used in visualforce code not inside of
Javascript as far as my search.
Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.
Created Date: <apex:inputText id="dah" value="{!created}" size="50"
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>
<script>
function go(field) {
var huh = document.getElementById(field).value;
alert(huh); //returns the string u put inside of input text field
}
</script>