Window increase open-events with every new open - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: html dialog, html window, javascript window

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 3 months ago.

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

Author

Window increase open-events with every new open Posts

June 14, 2013 at 12:31 pm Window increase open-events with every new open #23156

hannii

Member

Hello,

I’m using the window component to show a modal dialog which content is context-dependent and is saved individually on the window-closing. So I need to bind the window-events (open, close) to my button action. But now I have the problem that open/close-events are summed up with new time I open/close the window. Example: On the first time, open is called one. On the second time, open is called twice, etc. That’s not very useful and also don’t work for me. So is there a fix to this issue? Or is it possible to get the context-object within the event-methode?

Here is a sample to demonstrate my problem:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Window, Window Widget, Window" />
    <meta name="description" content="This demo demonstrates how to trigger some of the jqxWindow events like open, closed and moved." />
    <title id='Description'>This demo demonstrates how to trigger some of the jqxWindow events like open, closed and moved.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        function capitaliseFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }
        function displayEvent(event) {
            var eventData = 'Event: ' + capitaliseFirstLetter(event.type);
            if (event.type === 'moved') {
                eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
            }
            if (event.type === 'close') {
                eventData += ', Dialog result: ';
                if (event.args.dialogResult.OK) {
                    eventData += 'OK';
                } else if (event.args.dialogResult.Cancel) {
                    eventData += 'Cancel';
                } else {
                    eventData += 'None';
                }
            }
            $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
        }
        function addEventListeners() {
            //Closed event
            $('#eventWindow').on('close', function (event) {
                displayEvent(event);
            });
            //Dragstarted event
            $('#eventWindow').on('moved', function (event) {
                displayEvent(event);
            });
            //Open event
            $('#eventWindow').on('open', function (event) {
				//alert("open");
                displayEvent(event);
            });
            
        }
        function createElements(theme) {
            $('#eventWindow').jqxWindow({autoOpen: false, maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
                theme: theme, resizable: false, isModal: true, modalOpacity: 0.3,
                okButton: $('#ok'), cancelButton: $('#cancel'),
                initContent: function () {
                    $('#ok').jqxButton({ theme: theme, width: '65px' });
                    $('#cancel').jqxButton({ theme: theme, width: '65px' });
                    $('#ok').focus();
                }
            });
            $('#events').jqxPanel({ theme: theme, height: '250px', width: '450px' });
            $('#showWindowButton').jqxButton({ theme: theme, width: '100px'});
        }
        $(document).ready(function () {
            var theme = $.data(document.body, 'theme', theme);
            if (theme == undefined) theme = '';
            
            createElements(theme);
			$('#showWindowButton').mousedown(function () {
				addEventListeners();
				$("#eventWindow").css('display', 'block');
                $('#eventWindow').jqxWindow('open');
            });
            
        });
    </script>
</head>
<body class='default'>
    <div id="jqxWidget">
        <input type="button" value="Show" id="showWindowButton" />
        <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;"
            id="mainDemoContainer">
            <div>Events Log:</div>
            <div id="events" style="width: 300px; height: 200px; border-width: 0px;">
            </div>
            <div id="eventWindow" style="display:none;">
                <div>
                    <img width="14" height="14" src="../../images/help.png" alt="" />
                    Modal Window</div>
                <div>
                    <div>
                        Please click "OK", "Cancel" or the close button to close the modal window. The dialog
                        result will be displayed in the events log.
                    </div>
                    <div>
                    <div style="float: right; margin-top: 15px;">
                        <input type="button" id="ok" value="OK" style="margin-right: 10px" />
                        <input type="button" id="cancel" value="Cancel" />
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

June 14, 2013 at 12:42 pm Window increase open-events with every new open #23159

Peter Stoev

Keymaster

Hi,

Well, it will because you call the “addEventListeners()” on each mouse down. The “addEventListeners()” function as I see from the code adds new event handlers.

Best Wishes,
Peter Stoev

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

June 14, 2013 at 12:55 pm Window increase open-events with every new open #23160

hannii

Member

And how can I override the existing event-handler or pass the context-object to the events? I expected that the event-handler will be overwritten automatically every time I create a new one …

Thanks
hannii

June 14, 2013 at 1:01 pm Window increase open-events with every new open #23161

Peter Stoev

Keymaster

Hi,

When you bind to an event using the jQuery’s bind or on methods, the event handler or event handlers associated to the event will be called whenever the event is raised. You should bind to events just once.

So your code should be:

  createElements(theme);
				addEventListeners();
			$('#showWindowButton').mousedown(function () {
				$("#eventWindow").css('display', 'block');
                $('#eventWindow').jqxWindow('open');
            });

In the above code, the addEventListeners is called just once.

Best Wishes,
Peter Stoev

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

June 14, 2013 at 1:21 pm Window increase open-events with every new open #23162

hannii

Member

My problem is that in the event I need context specific information – example: detail information can be updated or should be created. So I need to pass my object to the event since the saving action should take place if the user clicks the “okay” button.

Question: So if I can only setup the events once, how can I pass my object data to the eventhandler? Or override the events every time?

Thanks

June 14, 2013 at 2:33 pm Window increase open-events with every new open #23169

Peter Stoev

Keymaster

Hi,

I do not see an object passed to your event handler in the provided code. If you want to bind multiple times to events, then you should unbind multiple times, too.

Best Wishes,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.