Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: How do you change the text of a button?

Expand Messages
  • Todd Kloots
    John - You ll know if you are using the Button dependency if you have include the YUI Button JavaScript and CSS files on your page. Take a look at your source
    Message 1 of 4 , Oct 10, 2008
    • 0 Attachment
      John -

      You'll know if you are using the Button dependency if you have include
      the YUI Button JavaScript and CSS files on your page. Take a look at
      your source code.

      - Todd

      John Panelli wrote:
      >
      > Hi Todd,
      >
      > Thank you for your reply. I am not sure if I'm using the optional
      > YUI button dependency or not. How do I know? In any case, I
      > attempted to set the innerHTML as you suggested, but the
      > getElemementById does not find the button. I did change the creation
      > code to include an id for the button so I could try this. It now
      > looks like this:
      >
      > <script language="Javascript">
      > YAHOO.namespace('yuiModalDialog');
      >
      > // Show the Deduction dialog
      > function showDlgDeduction() {
      > YAHOO.yuiModalDialog.Deduction.show();
      > }
      >
      > // Initialize the Deduction dialog
      > function initDlgDeduction() {
      > // Define various event handlers for Modal dialogs
      > var handleCancel= function() { this.cancel() };
      > var handleDeductionSaveBtn= function() {
      > try {
      >
      > saveDeduction();
      >
      > }
      > catch(e) {
      > alert(e);
      > throw new Error(e);
      > } };
      > var handleSuccess = function(o) {};
      > var handleFailure = function(o) {};
      >
      > // Instantiate Modal Deduction
      > YAHOO.yuiModalDialog.Deduction = new
      > YAHOO.widget.Dialog('Deduction', { width : '525px', fixedcenter :
      > true, visible : false, modal : true, dragOnly : true, close : true,
      > constraintoviewport : true,buttons : [ { id:'Cancel', text:'Cancel',
      > handler:handleCancel , container: document }, {
      > id:'DeductionSaveBtn', text:'Save', handler:handleDeductionSaveBtn ,
      > isDefault:true, container: document }] });
      >
      > // Wire up the success and failure handlers
      > YAHOO.yuiModalDialog.Deduction.callback = { success:
      > handleSuccess, failure: handleFailure };
      >
      > // Render the Dialog
      > YAHOO.yuiModalDialog.Deduction.render();
      >
      > // Validate the entries in the modal dialog
      > YAHOO.yuiModalDialog.Deduction.validate = function()
      > { return true; };
      > }
      >
      > // Initialize Deduction modal dialog when DOM is ready
      > YAHOO.util.Event.onDOMReady (initDlgDeduction);
      > </script>
      >
      > Note that the button is created without any HTML backed object as:
      >
      > { id:'DeductionSaveBtn', text:'Save',
      > handler:handleDeductionSaveBtn , isDefault:true, container: document }
      >
      > When I call document.getElementById('DeductionSaveBtn') so I can set
      > the innerHTML, I get null back. Must I have an HTML backed button in
      > order to set the innerHTML? Or, is there a different way for me to
      > get the button so I can set the innerHTML?
      >
      > Thanks in advance for your advice!
      > -John
      >
      > --- In ydn-javascript@yahoogroups.com
      > <mailto:ydn-javascript%40yahoogroups.com>, Todd Kloots <kloots@...> wrote:
      > >
      > > Hi John -
      > >
      > > Are you including the optional YUI Button dependency? If so, then
      > just
      > > set the Button's "label" attribute via the "set" method:
      > >
      > > oButton.set("label","some new label");
      > >
      > > If you aren't using Button, your Dialog's buttons will be created
      > using
      > > the HTML <button> element, so you can change their label via the
      > > innerHTML property:
      > >
      > > oButton.innerHTML = "some new lable";
      > >
      > > - Todd
      > >
      > > John Panelli wrote:
      > > >
      > > > Hi,
      > > >
      > > > I'm creating a modal dialog with a 'Save' button as follows:
      > > >
      > > > <script language="Javascript">
      > > > YAHOO.namespace('yuiModalDialog');
      > > >
      > > > // Show the Deduction dialog
      > > > function showDlgDeduction() {
      > > > YAHOO.yuiModalDialog.Deduction.show();
      > > > }
      > > >
      > > > // Initialize the Deduction dialog
      > > > function initDlgDeduction() {
      > > > // Define various event handlers for Modal dialogs
      > > > var handleCancel= function() { this.cancel() };
      > > > var handleSave= function() {
      > > > try {
      > > > saveDeduction();
      > > > }
      > > > catch(e) {
      > > > alert(e);
      > > > throw new Error(e);
      > > > } };
      > > > var handleSuccess = function(o) {};
      > > > var handleFailure = function(o) {};
      > > >
      > > > // Instantiate Modal Deduction
      > > > YAHOO.yuiModalDialog.Deduction = new
      > > > YAHOO.widget.Dialog('Deduction', { width : '525px', fixedcenter :
      > > > true, visible : false, modal : true, dragOnly : true, close :
      > true,
      > > > constraintoviewport : true,buttons : [ { text:'Cancel',
      > > > handler:handleCancel }, { text:'Save', handler:handleSave ,
      > > > isDefault:true }] });
      > > >
      > > > // Wire up the success and failure handlers
      > > > YAHOO.yuiModalDialog.Deduction.callback = { success:
      > handleSuccess,
      > > > failure: handleFailure };
      > > >
      > > > // Render the Dialog
      > > > YAHOO.yuiModalDialog.Deduction.render();
      > > >
      > > > // Validate the entries in the modal dialog
      > > > YAHOO.yuiModalDialog.Deduction.validate = function() { return
      > true; };
      > > > }
      > > >
      > > > // Initialize Deduction modal dialog when DOM is ready
      > > > YAHOO.util.Event.onDOMReady (initDlgDeduction);
      > > > </script>
      > > >
      > > > If I want to change the text of the 'Save' button via JavaScript
      > at
      > > > runtime, what JavaScript call do I make?
      > > >
      > > >
      > >
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.