Changing button text on click

Changing button text on click

NettSiteNettSite Posts: 36Questions: 11Answers: 2

Hi,

How could I change the text of a button on an event? I have a button called "Select All", and when it is clicked the obvious thing happens, but I would like to change the same button to be called "Deselect All" at the same time.

tableTools: {
        aButtons: [
          {
            sExtends: "select_all", 
            sButtonText: 'Select All',
            fnClick: function () {
              
              if (typeof(all_selected) == 'undefined' || all_selected == false) {
                all_selected = true;
              } else {
                all_selected = false;
              }
              $('.toggle').attr("checked", all_selected);
              
              // Change button text?
              
            }
          },
      ]
}

Regards,

William.

Replies

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Hi,

    There is no option for this in TableTools at the moment I'm afraid. You could do it using jQuery and a selector suitable for the button in question, but there is no API for the button text in TableTools.

    The replacement I'm working on (due for release this month) will have such an API.

    Allan

  • NettSiteNettSite Posts: 36Questions: 11Answers: 2

    Hi Alan,

    Thanks - looking forward to that. Meanwhile, I have tried the following:

    {
                sExtends: "select_all",
                sButtonText: 'Select All',
                sButtonClass: 'toggle-text',
                fnClick: function () {
    
                  if (typeof (all_selected) == 'undefined' || all_selected == false) {
                    all_selected = true;
                    button_text = 'Deselect All';
                  } else {
                    all_selected = false;
                    button_text = 'Select All';
                  }
                  
                  // Toggle Checkboxes
                  $('.toggle').attr("checked", all_selected);
                  
                  // Toggle button text
                  alert(button_text); // Just checking!
                  $('.toggle-text').innerHTML = '<span>' + button_text + '</span>';
                  
                }
              },
    

    The "toggle-text" class is added to the button (not really a button, an anchor), but the text doesn't change. What am I not seeing?

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    No idea :-). That looks fine to me. Perhaps you can link to the page.

    Also worth pointing out that the button node is passed into fnClick as the first parameter (documentation). You don't need to use classes to get a reference to the button in question.

    Allan

  • NettSiteNettSite Posts: 36Questions: 11Answers: 2

    You da best!

    This works perfectly:

                  if (typeof (all_selected) == 'undefined' || all_selected == false) {
                    all_selected = true;
                    nButton.innerHTML = '<span>Deselect All</span>';
                  } else {
                    all_selected = false;
                    nButton.innerHTML = '<span>Select All</span>';
                  }
    

    Thanks!

This discussion has been closed.