Thanks for the sample; I tried it, and it looks like it works fine, but there is a snag when I make the call to add a button to my dialog box, the clickButton function is called immediately. That means when I click my Search button in my JSF page, instead of opening the dialog box, it immediately submits the form. Obviously, I want the dialog to open, and then only submit the form when the Submit button on the dialog box is clicked. Why is the clickButton function being called as soon as the dialog box is created? I two javascript books from OReilly yesterday and am trying to figure this out, but I dont understand why a reference to a function is automatically executing that function. Any suggestions?
// Example for using a popup taken directly from the yui-ext documentation.
// It works before I try to add a reference to my own function in the last
addButton call, below.
var HelloWorld = function(){
// everything in this space is private and only accessible in the
HelloWorld block
// define some private variables
var dialog, showBtn;
// An early attempt at submitting the form directly.
var myTestFunction = function(){
getEl('searchForm').submit();
};
// clickLink uses code from the MyFaces wiki, but generates an error
// when fireOnThis is assigned...says it has no elements.
var clickLink = function(linkId)
{
var fireOnThis = document.getElementById(linkId);
if (document.createEvent)
{
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( 'click', true, false );
fireOnThis.dispatchEvent(evObj);
}
else if (document.createEventObject)
{
fireOnThis.fireEvent('onclick');
}
return false;
};
// Added this per Elvind's posting, but the function is run as
// soon as the button is added to the dialog (below)!
var clickButton = function(formName, elementId)
{
var elementToGet = formName + ":" + elementId;
var form = document.forms[formName];
var button = form.elements[elementToGet];
button.click();
};
var toggleTheme = function(){
getEl(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = getEl('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this, true);
getEl('theme-btn').on('click', toggleTheme);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it
once
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
// This is where the magic is supposed to happen...I added
the id searchForm to my form
// and hiddenLink7 to my button
random names so I could
test this.
// The add button signature is:
// public function addButton(String/Object config, Function
handler, [Object scope])
dialog.addButton('Submit', clickButton('searchForm',
'hiddenLink7'), dialog);
// The line below is the original call to addButton, and it
works fine:
// dialog.addButton('Submit', dialog.hide, dialog);
}
//dialog.on("beforeHide", clickButton('searchForm',
'hiddenLink7'), dialog, true);
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the
application
// when the DOM is ready, without waiting for images and other resources to
load
YAHOO.ext.EventManager.onDocumentReady(HelloWorld.init, HelloWorld, true);
_____
From: Rønnevik, Eivind [mailto:[EMAIL PROTECTED]
Sent: Friday, January 19, 2007 4:50 AM
To: MyFaces Discussion
Subject: RE: How to submit a form using javascript
Hi!
I can give you an example of how I use javascript to do a click on a
button. :)
You must remember that if your form id is myForm, and the buttons id is
myButton, the correct name of the button (element) in javascript is
myForm:myButton
(This changes is you use the tomahawk components and set the forceId to
true)
An example of a generic function in javascript:
function clickButton(formName, elementId)
{
var elementToGet = formName + ":" + elementId;
var form = document.forms[formName];
var button = form.elements[elementToGet];
button.click();
}
Hope this leads you in the right direction at least :)
Regards,
Eivind
_____
From: Romanowski, Tim [mailto:[EMAIL PROTECTED]
Sent: 18. januar 2007 22:54
To: MyFaces Discussion
Subject: How to submit a form using javascript
Im trying to integrate some components form Jack Slocums yui-ext project
[1], but have run into a problem in trying to submit a form or link in my
JSF code from javascript. The details are posted at [2]. The current
information on MyFaces wiki at [3] has not helped (see the clickLink
javascript function used with a hidden link at the bottom of the page); Im
not sure why, but Im wondering if it has something to do with the scope of
the function and the way it tries to access dom elements. The first couple
examples show how to call javascript from within a commandButton or
commandLink, but Im interested in doing the reverseusing javascript to
execute a button or link. If anyone could offer some insight, it would be
greatly appreciated.
Tim
[1] http://www.yui-ext.com/
[2] http://www.yui-ext.com/forum/viewtopic.php?t=2204
[3] http://wiki.apache.org/myfaces/JavascriptWithJavaServerFaces
smime.p7s
Description: S/MIME cryptographic signature
