Chaging the image in Action Bar with onscreenready

[nosaku]

I am trying to change the action bar image using onscreenready. It is not working. But I am able to change it in ondomready event, but it does not look good. The image looks like it is changing after the screen is loaded. Is there any workaround for this? Here is my code which is not working. Any help is really appreciated.

onscreenready : function(element, id, params) {
  if (id != 'home') {
    var favImage = element.getElementById('favImage');
    if (favImage != null) {
      favImage.innerHTML = "Add Fav"; // working
      favImage.setImage('images/actionBar/ic_edit_favorite.png'); // not working
    }
  }
}

[tneil]

@nosaku is correct to use element.getElementById() in the onscreenready event since it hasn't been put into the DOM yet when that event fires.

The issue is that you are calling setImage() on the element. The onscreenready event fires before the HTML for the screen has been processed, thus will not have the functions assigned to the controls.

If you are looking to change the image of an actionbar you will want to do something like the following

var myAction = element.getElementById('favAction');
myAction.setAttribute('data-bb-img', 'images/actionBar/ic_edit_favorite.png');

[nosaku]

@tneil Thanks a lot for the help. This worked perfectly.