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

How do you change the text of a button?

Expand Messages
  • John Panelli
    Hi, I m creating a modal dialog with a Save button as follows: YAHOO.namespace( yuiModalDialog ); // Show the Deduction dialog
    Message 1 of 4 , Oct 1, 2008
    • 0 Attachment
      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?
    • Todd Kloots
      Hi John - Are you including the optional YUI Button dependency? If so, then just set the Button s label attribute via the set method:
      Message 2 of 4 , Oct 1, 2008
      • 0 Attachment
        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?
        >
        >
      • John Panelli
        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
        Message 3 of 4 , Oct 3, 2008
        • 0 Attachment
          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, 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?
          > >
          > >
          >
        • 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 4 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.