myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Romanowski, Tim" <tim.romanow...@lmco.com>
Subject RE: How to submit a form using javascript
Date Fri, 19 Jan 2007 16:00:25 GMT
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 O’Reilly yesterday and
am trying to figure this out, but I don’t 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:eivind@kadme.com] 
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 button’s 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:tim.romanowski@lmco.com] 
Sent: 18. januar 2007 22:54
To: MyFaces Discussion
Subject: How to submit a form using javascript

 

I’m trying to integrate some components form Jack Slocum’s 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); I’m
not sure why, but I’m 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 I’m interested in doing the reverse—using 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

 

 


Mime
View raw message