I have a simple xpage with 2 inputText field (username and password) and a button.
The idea is that when hitting the "return" or "enter" key , that the onclick event of the button will be activated. I guess this is normally done with an auto onfocus, but can't find a way to let this work.
I think best is to define a small function from a js library you load in each page you need this
function fireButton(e, buttonId) {
if (typeof e == "undefined" && window.event) {
e = window.event;
}
if (e.keyCode == dojo.keys.ENTER) {
dojo.byId(buttonId).click();
e.preventDefault();
}
}
Then in the onkeydown attribute you can call it:
<xp:inputText onkeydown="fireButton(event, '#{id:buttonId}')"
From the Button's "All Properties" tab, set type to submit,
Related
I have a p:accordionPanel and inside of each tab of the panel there is some info that the user can manipulate, what i need to do is if the user close the tab show a confirm dialog (before the tab get closed) whit something like "are you sure you wanna close the tab? if you do your changes will be lost". here is what i tried
<p:ajax event="tabClose" onstart="return myFunction()"
listener" {myBean.myMethod}" process="#this" />
function myFunction() {
var answer = confirm("are you sure you wanna close the tab? if you do your changes will be lost");
if(answer){
//some logic
return true;
}else{
//some logic
return false;
}
}
The problem is that if i choose cancel on the confirm dialog the tab get close anyway. Shouldn't the tab closing be canceled by the onStart="return false"? is there a way to achieve what i'm trying to do?
Finally I solved my problem, apparently the onStart="return false" does not prevent the tab from change its statatus but the onTabChange attribute of the p:accordionPanel does, the only problem is that for some reason the onTabchange event of the accordion don't get execute when the tab is been closed just when the tab is been opened so i have to override the acordionPanel unselect function of primefaces to call the onTabChange event
PrimeFaces.widget.AccordionPanel.prototype.unselect = (function(index) {
var cached_function = PrimeFaces.widget.AccordionPanel.prototype.unselect;
return function() {
var panel = this.panels.eq(index);
if(this.cfg.onTabChange) {
var result = this.cfg.onTabChange.call(this, panel);
if(result === false)
return false;
}
var result = cached_function.apply(this, arguments);
return result;
};
})();
then i only had to placed myFunction(); on the onTabChange event of the accordiong panel (onTabChange="return myFunction()")and it works.
In my fabric application, I'm currently listening for certain key presses such as the delete key, and deleting any selected elements. My method of listening for key presses is:
document.onkeydown = function(e) {
if (46 === e.keyCode) {
// 46 is Delete key
// do stuff to delete selected elements
}
I'm running into a problem though: I have other elements like text boxes on the page, and when typing in a text box, I don't want the delete key to delete any elements.
In this question, there's a method described to attach an event listener to an HTML5 canvas:
canvas.tabIndex = 1000;
allows you to use canvas.addEventListener with keyboard events.
Could I use something similar to this with fabric's canvas?
When I tried it like this,
var CANVAS = new fabric.Canvas('elemID', {selection: false})
CANVAS.tabIndex = 1000;
CANVAS.addEventListener("keydown", myfunc, false);
I get "Uncaught TypeError: undefined is not a function" from Chrome.
Here's what I've ended up doing: I've got a wrapper div around the canvas used by fabric, and I've added the event listener to this wrapper.
var canvasWrapper = document.getElementById('canvasWrap');
canvasWrapper.tabIndex = 1000;
canvasWrapper.addEventListener("keydown", myfunc, false);
This is working exactly like I want. The delete presses that happen inside a text box aren't picked up by the the listener.
As Jay suggested "If the user is editing, don't do anything. If not, then delete active objects". If someone is looking complete solution, here it is:
canvas= this.$refs.canvas
checkDelete(e) {
if (
e.keyCode == 46 ||
e.key == 'Delete' ||
e.code == 'Delete' ||
e.key == 'Backspace'
) {
if (this.canvas.getActiveObject()) {
if (this.canvas.getActiveObject().isEditing) {
return
}
this.deleteObject()
}
}
}
// Delete object
deleteObject() {
this.canvasContext.remove(this.canvasContext.getActiveObject())
this.canvasContext.renderAll()
}
<div
tabIndex="1000"
id="canvasWrapper"
#keyup="checkDelete($event)"
>
<canvas ref="canvas"></canvas>
</div>
I want to assign value to the element and auto submit after page completely load.I encounter some question.
1.How to get the element in the tab?
2.How to fire submit event when assigned value?
I want to fire as the follow code:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
var url = tab.url;
var config = null;
if (tab.status !== "complete") {
return;
}
else {
// assign value and fire submit event
}
});
Help!!
I wouldn't do it this way. Why not use jQuery in a content script and trigger your action on ($document).ready()? That way you'll have the document and can use jQuery selectors to get the elements that interest you. To submit, just get button using a selector and call click().
I have a problem with the sharepoint lists. I need to change the OK button to display as Submit. Anyone has any ideas how to do that?
Thanks,
Jason
1) In your URL box, after NewForm.aspx (or EditForm.aspx,) add this text: ?toolpaneview=2
Your url should look like "http://mysite.com/mylist/NewForm.aspx?toolpaneview=2"
2) Hit enter. The page will open in Shared editing mode. Choose "Add a Web Part" anywhere on the page.
3) Add a Content Editor Web Part. In the Text Source of the Content Editor Web Part, paste the following code:
<script type="text/javascript">
function changeOKButtons()
{
var inputs = document.getElementsByTagName("input");
for(i = 0; i<inputs.length; i++)
{
if(inputs[i].type == "button" && inputs[i].value == "OK")
inputs[i].value = "Submit";
}
}
_spBodyOnLoadFunctionNames.push("changeOKButtons");
</script>
If you can, use the jQuery equivalent of zincorp's code:
function changeButton()
{
$("input").each(function() {
if ($(this).attr("value") === "ButtonName") {
$(this).attr("value", "NewButtonName");
}
});
}
And if you have jQuery 1.6 or greater, use "prop" instead of "attr".
This seems like it should be pretty straightforward but I'm not feeling it.
I have a JSF CommandButton that executes a long running serverside task (10-15 seconds). I've seen forms where the button context changes after it's been clicked (The label on the button changes and the button becomes disabled until the processing is complete).
I'm using ICEFaces and have the disabled property set to a boolean on the underlying page code.
The action listener bound to the button changes that boolean to disable it but alas, no changes on the JSP.
Anyone?
What you can do is to change the status of the button using Javascript:
<h:commandButton ... onclick="this.disabled=true"/>
Edit regarding the comment:
If the previous code does not submit the form, then you have to disable the button a little time after the click, not "during" the click itself. You can do that using the following code:
<h:commandButton ... onclick="setTimeout('this.disabled=true', 100);"/>
I'm not sure if the fact to use the this keyword directly in the setTimeout method will work correctly. If not, you can use another way to do that:
<h:commandButton ... onclick="disableButton(this.id);"/>
with the following Javascript function:
function disableButton(buttonId) {
setTimeout("subDisableButton(" + buttonId + ")", 100);
}
function subDisableButton(buttonId) {
var obj = document.getElementById(buttonId);
if (obj) {
obj.disabled = true;
}
}
(I'm sure this code can be enhanced, thus)
You should use an ice:commandButton instead of h:commandButton, since it has the partialSubmit property, which will perform the action as an AJAX call. This should refresh your button's state, so if the property on the server has been set to false, your button should be disabled.
do a javascript submit(); first and then disable the button
Similar to the solution from romaintaz
For a Firefox specific solution, the following works (it does not work in IE):
<h:commandButton ... onclick="disableButton(this.id);" />
Using Javascript function:
function disableButton(buttonId) {
var obj = document.getElementById(buttonId);
if (obj) {
setTimeout(function(thisObj) { thisObj.disabled=true; }, 50, obj);
}
}
do it after icefaces has updated the DOM. you can use ice.onAfterUpdate(callback):
Here with jQuery
ice.onAfterUpdate(function(){
updateButtons();
});
function updateButtons(){
if(!isButtonEnabled()){
jQuery(".myButton").attr('disabled', true);
jQuery(".myButton").removeClass("iceCmdBtn").addClass("iceCmdBtn-dis");
}else{
jQuery(".myButton").removeAttr('disabled');
jQuery(".myButton").removeClass("iceCmdBtn-dis").addClass("iceCmdBtn");
}
}