Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
fului
Posts: 4
Registered: ‎12-23-2012
My Device: 9800, PB, z10

BBUI disable/enable titlebar buttons on actions

Hi,

 

I have been trying to figure out how to reproduce the feature found in the contacts app in the BB10 simulator, which, when adding a new contact, has the save button disabled, until some text is added to one of the fields.

 

I also want to be able to disable the save button when the user presses it, and enable it again if I was not able to save the data entered, due to validation errors, so that it can not be presses again while the the script is being processed.

 

I am using the standard titlebar buttons as described bbui title-bars github page.

 

I can see that there is an action for on click, but I wanted to know if there is any way to disable/enable this button when the fields are empty and while processing the user input?

 

If this is not possible, is it then possible to add a loading indicator overlay to the whole page?

Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: BBUI disable/enable titlebar buttons on actions

Have you tried running the .enable() and .disabled() functions on them? I am not 100% sure it works but I think they are setup like standard buttons. You shoul dbe able to do something using this:

 

document.getElementById('plainBtn').enable();
document.getElementById('plainBtn').disable();

https://github.com/blackberry/bbUI.js/wiki/Buttons

 

I would make sure you are using the most recent bbUI code to try this as well.

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
New Contributor
fului
Posts: 4
Registered: ‎12-23-2012
My Device: 9800, PB, z10

Re: BBUI disable/enable titlebar buttons on actions

Hi Rory,

 

thank you for your reply and sorry for my late one, Christmas came in the way.

 

I did try that, but that did not work for me. They look like buttons, but in reality they are divs, so they are easier to style, but I do not know which div to disable.

 

I have however found a semi solution that looks to works ok, though there is still an issue in the simulator.

 

bb.init({
  ondomready: function(element, id) {
    if(id === 'edit') {
      $('.bb-bb10-title-bar-hires').children('div').eq(2).children('div').addClass('bb-bb10-titlebar-button-disabled-dark');
      document.getElementById('edittitlebar').onactionclick = function(){};

      $('#title').live('keyup', function(e) {
      if($('#title').val()==''){
        $('.bb-bb10-title-bar-hires').children('div').eq(2).children('div').addClass('bb-bb10-titlebar-button-disabled-dark');
        document.getElementById('titlebar').onactionclick = function(){};
      } else {				                                  
        $('.bb-bb10-title-bar-hires').children('div').eq(2).children('div').removeClass('bb-bb10-titlebar-button-disabled-dark');
        document.getElementById('titlebar').onactionclick = saveFunction;
      }
    }
  }
});

 

 I use jQuery, so there is a mix of that in this example.

 

The issue I have in the simulator is that, even though the button functionality is disabled and has the right class, once you click on it, it changes the class to an active class, though the functionality of the button does stays disabled until you write something in the title field.

 

But at least this is a starting point and the functionality of what I want works, but I still need to look at styling a bit.

 

Cheers,

olaf