How to add ajax call to list hierarchy second level?

Gesture enabled responsive lists
1

Hi,
I’m trying to figure out using the jquery version how to make an ajax call to populate level2 of each of the items on my level 1 of my list. If I simply populate when the page loads it simply takes too long to get everything. If it made an ajax call to populate the selected level, then would be a lot less time for load.

Any idea??

$('#notifications').mobiscroll().listview({
    enhance: true,
    theme: 'ios',
    itemGroups: {
        level1: {
            swipe: false
        },
        level2: {
            stages: [{
                percent: -25,
                icon: 'link',
                color: 'green',
                text: 'View',
                confirm: true,
                action: function (event, inst) {
                    var id = event.target.getAttribute('data-id');
                    var type = event.target.getAttribute('type-id');
                    var slug = event.target.getAttribute('url-id');
                    window.location.href = '/dealboxx/mobile/sales/' + slug + '/' + id + '/' + type + '';
                }
            }, {
                percent: 25,
                color: 'red',
                icon: 'remove',
                text: 'Dismiss',
                confirm: true,
                action: function (event, inst) {
                    var id = event.target.getAttribute('appt-id');
                    var type = event.target.getAttribute('type-id');
                    $.ajax({
                        url: "/dealboxx/mobile/sales/" + type + "/" + id + "/dismiss",
                        type: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            inst.remove(event.target);
                        }
                    });

                    return false;
                }
            }]
        }
    }
});
2

Hi @Todd_Thompson :wave:

Here’s an example on how to load the sub-levels dynamically when an item is clicked (it does not use actual ajax requests, just simulate it with setTimeout):

Markup:

<ul id="demo-hierarchy" class="mbsc-cloak">
    <li data-type="level1" data-id="1">Item 1
        <ul></ul>
    </li>
    <li data-type="level1" data-id="2">Item 2
        <ul></ul>
    </li>
</ul>

JS:

// Sample data
var data = {
    1: [
        { id: '1.1', markup: 'Item 1.1' },
        { id: '1.2', markup: 'Item 1.2' },
        { id: '1.3', markup: 'Item 1.3' },
    ],
    2: [
        { id: '2.1', markup: 'Item 2.1' },
        { id: '2.2', markup: 'Item 2.2' },
        { id: '2.3', markup: 'Item 2.3' },
    ]
};
var loaded = {};

$('#demo-hierarchy').mobiscroll().listview({
    itemGroups: {
        level1: {
            swipe: false
        },
        level2: {
            stages: [{
                percent: -25,
                icon: 'link',
                color: 'green',
                text: 'View',
                confirm: true,
                action: function (event, inst) { }
            }, {
                percent: 25,
                color: 'red',
                icon: 'remove',
                text: 'Dismiss',
                confirm: true,
                action: function (event, inst) { }
            }]
        }
    },
    onItemTap: function (event, inst) {
        var id = event.target.getAttribute('data-id');

        // event.index is -1 for back button
        // also check if children of this item was already loaded
        if (event.index !== -1 && !loaded[id]) {
            // Simulate ajax loading
            setTimeout(function () {
                loaded[id] = true;
                var children = data[id];
                if (children) {
                    children.forEach(function (child) {
                        inst.add(child.id, $('<li data-type="level2">' + child.markup + '</li>'), null, null, id);
                    });
                }
            }, 300);
        }
    }
});