jQWidgets Forums

Tagged: event, jqxListBox, jqxTabs, ListBox, select, tab, Tabs

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 11 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Fire event twice Posts

January 12, 2014 at 8:34 pm Fire event twice #47762

Participant

Dear Sir,

I have jqxListbox inside jqxTabs. When I select on the listbox item, it fire select event twice.
I test with jqxListbox that is not inside the tab, it work fine.

please help,

Thanks you

January 12, 2014 at 8:38 pm Fire event twice #47763

mail2taurus

Participant

Additional information,

I use console.log() to write the parameter when the events fired.
One came from the script but another came from “VMxx”.

Thanks you,
W

January 13, 2014 at 6:43 am Fire event twice #47774

Dimitar

Participant

Hello,

We tested for the reported issue with the following example, but the listbox select event is called only once:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs.
            $('#jqxtabs').jqxTabs({ width: 550, height: 150 });
            $('#jqxtabs').bind('selected', function (event) {
                var item = event.args.item;
                var title = $('#jqxtabs').jqxTabs('getTitleAt', item);
                alert(title);
            });

            var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
		        ];
            $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
            $('#jqxlistbox').bind('select', function (event) {
                var args = event.args;
                alert(args.index);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxtabs'>
        <ul style='margin-left: 20px;'>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
        </ul>
        <div>
            <div id='jqxlistbox'>
            </div>
        </div>
        <div>
            Content 2
        </div>
        <div>
            Content 3
        </div>
        <div>
            Content 4
        </div>
        <div>
            Content 5
        </div>
    </div>
</body>
</html>

Please make sure you are using the latest version of jQWidgets (3.1.0).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 3, 2014 at 8:31 am Fire event twice #52481

mail2taurus

Participant

Dear Sir,

Thank you for your response. Actually I have a jqxSplitter by the code are follows:

index.cshtml:
@{
    ViewBag.Title = "Index";
}

@section scripts {
    <script src="~/Scripts/jqwidgets/jqxcore.js"></script>
    <script src="~/Scripts/jqwidgets/jqxsplitter.js"></script>
    <script src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
    <script src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
    <script src="~/Scripts/jqwidgets/jqxpanel.js"></script>

    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.selection.js"></script>
}

<span>Role Menu</span>
<div id='jqxWidget'>
    <div id="mainSplitter">
        <div class="splitter-panel">
            <div id='tabswidget'>
                <ul style='margin-left: 20px;'>
                    <li style="margin-left: 30px;">กลุ่ม
                    <li>บุคคล</li>
                
                <div>
                    @Html.Partial("_GroupColumn")
                </div>
                <div>
                    Content 2
                </div>
            </div>
        </div>
        <div class="splitter-panel">
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var theme = "classic";
        $('#mainSplitter').jqxSplitter({ width: '100%', height: 500, theme: theme, panels: [{ size: '25%' }, { size: '75%' }] });
        //$('#panelRight').jqxSplitter({ width: '100%', height: 500, theme: theme, panels: [{ size: '35%' }, { size: '65%' }] });
        $("#tabswidget").jqxTabs({ theme: theme, height: '100%', width: '100%' });
    });
</script>

GroupColumn.cshtml: (partial view)
<div id='jqxListBox' class="jqx-hideborder">
    
</div>

<script type="text/javascript">
    var ListBoxSelectFlag = -1;         //
    $(document).ready(function () {

        var theme = "classic";
        var url = "/GroupRole/GetGroups";
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'GROUP_ID' },
                { name: 'GROUP_NAME' }
            ],
            //id: 'id',
            url: url
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        // Create a jqxListBox
        $("#jqxListBox").jqxListBox({
            source: dataAdapter, displayMember: "GROUP_NAME", valueMember: "GROUP_ID",
            width: '100%', height: 450, theme: "classic"
        });

        $("#jqxListBox").bind('select', function (event) {
            console.log(event);
            if (event.args) {
                var item = event.args.item;
                // flag used for blocking the second event, the bug that fires event twice
                if (item.index == ListBoxSelectFlag)
                    return;
                else
                    ListBoxSelectFlag = item.value;
                if (item) {
                    $.post("/GroupRole/GetRolesByGroupId", { "GROUP_ID": item.index })
                        .done(function (data) {
                            $("#jqxListBox_Role").jqxListBox('uncheckAll');
                            var items = $("#jqxListBox_Role").jqxListBox('getItems');
                            for (i = 0; i < data.length; i++) {
                                for (j = 0; j < items.length; j++)
                                    if (data[i].ROLE_ID == items[j].value) {
                                        $("#jqxListBox_Role").jqxListBox('checkIndex', j);
                                    }
                            }
                     }); 
                }
            }
        });
    });
</script>

April 3, 2014 at 1:39 pm Fire event twice #52509

Dimitar

Participant

Hi mail2taurus,

This may be a case of event bubbling if you have any other controls on your page (jQWidgets or others) that have the select event.

Also, we recommend that all scripts with jQWidgets are nested in the head section and not in the body.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.