locked
How to set dynamic content in flyout menu ? ( with data from webservice ) RRS feed

  • Question

  • Hi everyone,

    I have a question, i need to create dynamic content for flyout menu, the data was get from a web service.

    So i have this in my html (rsPage.html) page for the menu : 

    <div class="f_mark win-type-ellipsis">
                        <button>
                                <span>Marques</span> <span class="chevron win-type-x-large">&#xe099</span>
                        </button>
                    </div>

                    <div id="markFlyout" data-win-control="WinJS.UI.Menu">
                        <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'pouetMenuItem',label:'Pouet'}">
                        </button>
                    </div>

    I have two js page, one for get the data from the webservice and a second to set the data to the page :

    rsPage.js, i call the "getData" to get the data from the web service :

    sFilters.getData(param, function () {


            });

    In geData i have this 

    function getData(param, callback) {

            WinJS.xhr({
                url: requestStr
            }).done(function complete(result) {
                var data = JSON.parse(result.responseText);

               
                callback();
            })

        }

    Where do i hade the code to set my flyout and witch code ?

    Thank's



    Thursday, May 3, 2012 1:31 PM

Answers

  • Hi Dorian,

    The flyout is based on HTML so you would simply update the HTML using DOM methods:  myElement.innerText = textUpdateHere;

    and then show the flyout.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 3, 2012 2:05 PM
    Moderator
  • Hi,

    I just learned how to do it. Check if the following works for you.

    var name = "menu entry";
    var mc = new WinJS.UI.MenuCommand(null, { id: 'mc' + name, label: 'menuEntry' });
    var mainMenu = WinJS.Utilities.query("#markFlyout")[0].winControl;
    mainMenu.commands = [mc];


    Ricardo Sabino --- http://www.ricardosabino.com

    Thursday, May 3, 2012 4:55 PM
  • It's ok, i found, i use this :

    var mc = new WinJS.UI.MenuCommand(null, { id: data['@offers'], label: data.name });var mainMenu = document.getElementById('markFlyout').winControl;mainMenu._addCommand(mc);

    Friday, May 4, 2012 10:27 AM

All replies

  • Hi Dorian,

    The flyout is based on HTML so you would simply update the HTML using DOM methods:  myElement.innerText = textUpdateHere;

    and then show the flyout.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 3, 2012 2:05 PM
    Moderator
  • You think i have juste tu had something like this :

    myElement.innerText = '<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'pouetMenuItem',label:'Pouet'}">
                        </button>';

    to hade button on my menu ?

    Thursday, May 3, 2012 2:24 PM
  • Hi,

    I just learned how to do it. Check if the following works for you.

    var name = "menu entry";
    var mc = new WinJS.UI.MenuCommand(null, { id: 'mc' + name, label: 'menuEntry' });
    var mainMenu = WinJS.Utilities.query("#markFlyout")[0].winControl;
    mainMenu.commands = [mc];


    Ricardo Sabino --- http://www.ricardosabino.com

    Thursday, May 3, 2012 4:55 PM
  • That work but i need to add command, with this code i juste replace a command that allready exist but it's a good way, thank.
    Friday, May 4, 2012 9:04 AM
  • It's ok, i found, i use this :

    var mc = new WinJS.UI.MenuCommand(null, { id: data['@offers'], label: data.name });var mainMenu = document.getElementById('markFlyout').winControl;mainMenu._addCommand(mc);

    Friday, May 4, 2012 10:27 AM