SplitItemView events

[Gargi Das]

Hello All,

I want to send an AJAX post request when user clicks an SplitItemView, i tried with SplitItemView tap event but it seems they dont have a tap event.

So can some one guide me on how i can handle events in SplitItemView !!

Regards,
Gargi

[Gargi Das]

Anybody from the MProject team has any ways to solve this issue ??

[wakayama...@gmail.com]

Hey Gargi,

Sorry to have kept waiting you for so long.

Actually the SplitView makes some magic for you.

For example it renders a ListView which contains the SplitItemViews.

This is why you can't directly set some events to the SplitItemViews.

The solution for your problem is to override the listItemSelected function in the SplitView.

splitview: M.SplitView.design({
    listItemSelected:function(id) {
        
        var contentView = M.ViewManager.getViewById(id) && M.ViewManager.getViewById(id).splitViewItem ? M.ViewManager.getViewById(id).splitViewItem.view : null;
        if (!contentView) {
            return;
        }
        this.selectedItem = M.ViewManager.getViewById(id).splitViewItem;
        if (!this.isInitialized) {
            if (contentView.html) {
                $('#' + this.content.id).html(contentView.html);
            } else {
                $('#' + this.content.id).html(contentView.render());
                contentView.theme();
                contentView.registerEvents();
            }
            this.isInitialized = YES;
        } else {
            if (contentView.html) {
                $('#' + this.content.id + ' div:first').html(contentView.html);
            } else {
                $('#' + this.content.id + ' div:first').html(contentView.render());
                contentView.theme();
            }
            contentView.registerEvents();
            $('#' + this.content.id).scrollview('scrollTo', 0, 0);
        }
        /* check if there is a split toolbar view on the page and update its label to show the value of the selected item */
        var page = this.getParentPage();
        var that = this;
        if (page) {
            $('#' + page.id + ' .tmp-splitview-content-toolbar').each(function() {
                var toolbar = M.ViewManager.getViewById($(this).attr('id'));
                if (toolbar.parentView && toolbar.parentView.showSelectedItemInMainHeader) {
                    toolbar.value = M.ViewManager.getViewById(id).splitViewItem.value;
                    $('#' + toolbar.id + ' h1').html(toolbar.value);
                    /* now link the menu with the toolbar if not yet done */
                    if (!toolbar.parentView.splitview) {
                        toolbar.parentView.splitview = that;
                    }
                }
            });
            /* add special css class if there is no footer */
            if ($('#' + page.id + ' .ui-footer').length === 0) {
                page.addCssClass('tmp-splitview-no-footer');
            }
            /* add special css class if there is no header */
            if ($('#' + page.id + ' .tmp-splitview-content-toolbar').length === 0) {
                page.addCssClass('tmp-splitview-no-header');
            }
        }
        /*
ADD YOUR CUSTOM CALLBACK HERE
        */
    },
    childViews: 'item1 item2 item3 ',
    item1: M.SplitItemView.design({
        value: 'Item 1',
        view: M.ScrollView.design({
            childViews: 'label',
            label: M.LabelView.design({
                value: 'item 1'
            })
        })
    }),
    item2: M.SplitItemView.design({
        value: 'Item 2',
        view: M.ScrollView.design({
            childViews: 'label',
            label: M.LabelView.design({
                value: 'item 2'
            })
        })
    }),
    item3: M.SplitItemView.design({
        value: 'Item 3',
        view: M.ScrollView.design({
            childViews: 'label',
            label: M.LabelView.design({
                value: 'Item 3'
            })
        })
    })
})

The listItemSelected function is the callback which is triggered whenever an item of the SplitView (ListView) is selected.

It is located in the The-M-Project Source.

I marked the position where you can add your AJAX request with ("ADD YOUR CUSTOM CALLBACK HERE").

You can retrieve your selected SplitItemView with M.ViewManager.getViewById(id).

Hope this helps to get things to work.

Kentaro