Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Dynamic list dialog



  • Is there any way to create dynamic dialog with list, no buttons and callback when list-item has being click to return key and values ?

    I’ve personally tried to create a function to create a dynamic list dialog (with jquery and no angular).
    When the user click on the list item, the selectItem() function will be triggered.
    But I wanted to have a reusable showList function so that I can assign different callback function under different situation. Is there any way to assign a callback for item clicked and also remove the dialog ?

    
    function showList(options) {
        title = getProperty(options, 'title');
        value = getProperty(options, 'value');
        var list = $('<ons-list onclick="selectItem()"></ons-list>');
        $.each(options.list, function (key, value) {
            var item = $('<ons-list-item modifier="tappable"></ons-list-item>').attr('data-value', key).text(value);
            list.append(item);
        });
        html = list[0].outerHTML.toString();
        ons.notification.confirm({
            id: 'listDialog',
            messageHTML: html,
            buttonLabels: [],
            title: title
        });
    }
    
    function selectItem() {
        var $target = $(event.target);
        var $sel = $target.closest('.list__item');
        value = $sel.attr('data-value');
        text = $sel.children('.list__item__center').text();
        alert(value);
        $('#listDialog').remove();
    }