locked
how to add an event to an appbar command in html5 & js project

    General discussion

  • i have created a bottom appbar in my html & js project , then i added this <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'play', id:'print', label:'play', onclick:null, section:'global', type:'button'}"></button>  , now when i click on play icon , it should go to a javascript function & do the specified task , i've tried with onclick="function()"in the place of onclick:null but failed , please tell me how to achieve this.
    Friday, July 12, 2013 1:31 PM

All replies

  • Hi,

    In your JS file (the one corresponding to the Page Control you are using or the default.js if the AppBar is global):

    document.getElementById("print").addEventListener("click",function(event){
    //your code here
    },false);

    This should be called on the "ready:" event handler of the Page Control or after the WinJS.UI.processAll() has been called in your default.js file.

    Friday, July 12, 2013 8:09 PM
  • is there any other alternative to do this ??
    Saturday, July 13, 2013 2:26 AM
  • ealsur i have done as follows

     app.onloaded = function () {

            WinJS.Resources.processAll();
            document.getElementById("print").addEventListener("click",function (print) {
                window.print()
            }, false);

        };

    i am getting errors , how to solve this?

    Saturday, July 13, 2013 2:38 AM
  • processAll is a Promise, so you should do something like this (this is on the default.js file):

    //somewhere in the pre-generated file
    app.addEventListener("activated", function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
    args.setPromise(WinJS.UI.processAll().then(function () {
    document.getElementById("print").addEventListener("click",function(event){
    //your code here, remember that "print" is the "id" of the command button
    },false);
    }));
    }
    
    });
    If you are using it on other file other than the default.js, use the "onready" not the "onloaded" event handler and make sure the command button exists in that page.

    Monday, July 15, 2013 11:54 AM
  • thanx a lot ealsur , now i got it & its working :)
    Monday, July 15, 2013 12:39 PM