I have two edit boxes in an XPage and one label.
Leave Start Date : EDIT BOX
Leave End Date : EDIT Box
Holidays Taken : label
I want to calulate the diffence in dates and get it computed in the label using the following code in onChange event of second(Leave End Date) edit box but on chaging the value of the edit box it clears the two field and nothing gets computed:
var leaveStartDate = document1.getValue("fld_Leave_Start_Date1");
var leaveEndDate = document1.getValue("fld_Leave_End_Date1");
var difference = null;
try{
var nDateStart = session.createDateTime( leaveStartDate );
var nDateEnd = session.createDateTime( leaveEndDate );
difference = nDateEnd.timeDifference(nDateStart);
difference = (Math.floor(difference/86400)) + 1;
}catch(e)
{
return e
}
document1.setValue("fld_NoOfDays",difference);
I tried getComponent("fld_Leave_Start_Date1").getSubmittedValue(), but didn't work either.
Can someone please help.
Thanks a lot in advance!
If the edit boxes are getting cleared, it sounds like you've set the event to do a full refresh instead of a partial refresh.
The other possible cause of clearing fields is if you're using Partial Execution Mode (execMode="Partial" in the source pane for the eventHandler) but have specified a execId that does not include the two edit boxes. (Partial Execution by default runs on the current component, so you should not lose the values of that Edit Box.) But I don't think that's the case.
Related
I would like to calculate the visibility of a button based upon the content of a text area field (multi line edit box). it should contain at least some text.
I could use the onkeypress event (server) and perform a partial refresh on the button BUT I notice that the partial refresh spinner appears then when users are writing in the field. I would like to avoid this.
What options do I have?
You would be best off writing a client side script for that event. This script should show the button when there are more than 200 characters in the textarea. You will need to set the style visibility to hidden for the button initially. If the form can be edited multiple times, you will need to write this as a function and call it on page load as well as in the keypress event.
If you can use the keyup event instead of keypress, this may be better.
var textareaID = '#{id:textareaID}';
var buttonID = '#{id:buttonID}';
var textareaValue = document.getElementById(textareaID).value;
var visibility;
if (textareaValue.length > 200) {
visibility = 'visible';
}
else
{
visibility = 'hidden';
}
document.getElementById(buttonID).style.visibility=visibility;
I want to create a textarea where users can select a part of a text, and I will react according to their selection. So I need to
1) get the start and end positions of the selection text
2) get the position of the focus, if it is in the textarea and there is no selection
It seems that the functions to do so are different from an explorer to another. So could anyone tell me what is the approach to do that in Office Add-in?
I have tried the following 2 ways (ie, select a part of the text in myTextarea, click on button, and then debug the code), they don't seem to be the right functions.
(function() {
"use strict";
Office.initialize = function(reason) {
$(document).ready(function() {
app.initialize();
$('#button').click(showSelection);
});
};
function showSelection() {
// way 1
console.log(document.selection); // undefined
document.getElementById("myTextarea").focus();
var sel = document.selection.createRange(); // Uncaught TypeError: Cannot read property 'createRange' of undefined
selectedText = sel.text;
// way 2
console.log(document.getElementById("myTextarea").selectionstart); // undefined
console.log(document.getElementById("myTextarea").selectionend); // undefined
}
})();
Additionally, it would be great if one could also tell me how to realise the follows by code:
1) select a part of a text, from a start and end positions
2) set the focus at a certain position of the textarea
Edit 1:
I just tried window.getSelection() within my Excel add-in:
function showselection() {
var a = window.getSelection();
var b = window.getSelection().toString();
var c = window.getSelection().getRangeAt(0);
}
After selecting a text in the textarea, and clicking on button, I debugged step by step: the first line made a a = Selection {anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, is ...; the second line returned "", the third line got an error Home.js:19 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. It looks like the selection has not been successfully caught...
Here is JSBin without Excel add-in frame, which returns almost same results as above.
Use JQuery.
For instance, the following two lines get the caret position:
function showselection() {
console.log($('#myTextarea')[0].selectionStart);
console.log($('#myTextarea')[0].selectionEnd);
}
There are some plug-ins:
https://github.com/localhost/jquery-fieldselection
http://madapaja.github.io/jquery.selection/
The second one has several short samples with buttons (where we may lose selection). You could either use their API, or look into their code to see which JQuery functions they call.
If the desired selection is just the selected text in the HTML page (and not the user's selection in Excel/Word), then there are some good stackoverflow answers about accessing that selection.
One of the key features of the JavaScript APIs for Office is that they follow an asynchronous model (the code you've written above for showSelection() appears to be synchronous). I'd recommend reading the Excel and Word JS API overview pages to get a feel for how they work. As an example, here's how you'd get the text from a selection:
Word.run(function (context) {
var myRange = context.document.getSelection();
context.load(myRange, 'text');
return context.sync().then(function () {
log("Selection contents: " + myRange.text);
});
})
Then for the other specifics of your question please clarify as requested in my comment. Thanks!
-Michael (PM for Office add-ins)
My question is exactly opposite of this question. So what I'm trying is I'm trying to find a way to lose focus on a cell after user selects an item from the autocomplete combobox in that cell.
$input.autocomplete({
delay: 0,
minLength: 0,
source: args.column.options,
select: function (event, ui) {
$input.val(ui.item.label);
grid.getEditController().commitCurrentEdit();
return false;
}
});
I used this code to lose focus indirectly after finishing with editing. It works fine, however, the cell stays selected somehow.
grid.getEditController().commitCurrentEdit();
I also tried the code below to lose focus but it throws error everytime when I run the code.
grid.setActiveCell();
grid.setSelectedRows(-1);
After selecting an item from the autocomplete combobox, I want the grid to lose focus and select nothing on the viewport of the grid.
Thanks for your answers in advance.
Try calling grid.resetActiveCell().
There was a commit made to the master branch last week that might address your issue: Fix keyboard focus getting trapped when cell has tabbable elements.
You can achieve it as follows,
if (grid.getActiveCell()) {
var row = grid.getActiveCell().row;
var cell = grid.getActiveCell().cell;
grid.gotoCell(row, cell, false);
}
I was wondering if it was possible to replace one control in a TableLayoutPanel with another at runtime. I have a combo box and a button which are dynamically added to the TableLayoutPanel at runtime, and when the user selects an item in the combo box and hits the button, I'd like to replace the combobox with a label containing the text of the selected combo box item.
Basically, if I could simply remove the control and insert another at it's index, that would work for me. However I don't see an option like "splice" or "insert" on the Controls collection of the TableLayoutPanel, and I was wondering if there was a simple way to insert a control at a specific index. Thanks in advance.
Fixed this by populating a panel with the two controls I wanted to swap and putting that into the TableLayoutPanel. Then I set their visibility according to which I wanted to see at what time.
This is what I've been able to come up with for what I needed. It gets the position of the ComboBox and makes a new label using the selected value.
// Replaces a drop down menu with a label of the same value
private void lockDropMenu(ComboBox dropControl)
{
TableLayoutPanelCellPosition pos = myTable.GetCellPosition(dropControl);
Label lblValue = new Label();
myTable.Controls.Remove(dropControl);
if (dropControl.SelectedItem != null)
{
lblValue.Text = dropControl.SelectedItem.ToString();
lblValue.Font = lblValue.Font = dropControl.Font;
// Just my preferred formatting
lblValue.AutoSize = true;
lblValue.Dock = System.Windows.Forms.DockStyle.Fill;
lblValue.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
myTable.Controls.Add(lblValue, pos.Column, pos.Row);
}
}
I've been playing around with this for a couple of weeks now with no success...
In a CKEditor dialog, text input fields are renamed with a unique number - e.g. id: 'txtUrl' will become something like id='27_textinput'.
How do I reference this?
// I feel it should be something like:
var myfield = CKEDITOR.instances.myElement.document.$.body.getId('txtUrl');
// or maybe:
var myfield = CKEDITOR.dialog.getContentElement('info','txtUrl');
// and then:
myfield.value = 'myvalue';
But these don't work. Please help! Thanks in advance, R
This was the final solution:
var dialog = CKEDITOR.dialog.getCurrent();
dialog.setValueOf('info','txtUrl',"http://google.com");
return false;
within an onchange part of an element I now use
dialog = this.getDialog();
alert(dialog.getContentElement('info', 'grootte').getInputElement().$.id);
and it gives 'cke_117_select' as a result. (It's a selectbox)
alert(dialog.getContentElement('info', 'txtUrl').getInputElement().$.id);
gives 'cke_107_textInput'.
I think this is what you (or other visitors to this page) are looking for.
You have a page containing the CKEditor 3 and a dialog pop up. You open from this dialog, another pop up window, that is a JSP page. In order to set a value to a field in the dialog of CKEditor's parent window, you do the following:
window.opener.CKEDITOR.dialog.getCurrent().getContentElement('dialogTabId', 'dialogTabFieldId').setValue('yourValue');
This applies to CKEditor 3.
Look at the api dialog sample:
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
// Set the default value for the URL field.
var urlField = infoTab.get( 'url' );
urlField['default'] = 'www.example.com';
get
var ckValue = CKEDITOR.instances['txtUrl'].getData();
and set
CKEDITOR.instances['txtUrl'].setData(ckValue);