Problem with buttons in modal window - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Problem with buttons in modal window Posts

July 1, 2013 at 4:23 pm Problem with buttons in modal window #24269

Participant

Hi,

I have looked at your example at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/jquery-window-events.htm?web and am trying to do something similar.

I am having a problem with the ok and cancel buttons not closing the window (although the escape key does). I have created a fiddle at http://jsfiddle.net/Chris99/kaxSu/

The main difference I can see between your example and mine is that I want to dynamically create the window DIVs and add them to the DOM document. I have seen this used in other posts in the forum, but the windows created did not have buttons.

Thanks,

Chris

July 2, 2013 at 5:29 am Problem with buttons in modal window #24306

Peter Stoev

Keymaster

Hi,

The issue in your sample is that: defaultDialogOptions’s $(‘#ok’) and $(‘#cancel’) jQuery selections are invalid at the point you call them. You should make such jQuery selections after you append the HTML Elements that you try to select.

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Window, Window Widget, Window" />
    <meta name="description" content="With jqxWindow, you can create create multiple windows and display them at the same time on your page." />
    <title id='Description'>With jqxWindow, you can create create multiple windows and display them at the same time on your page.</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.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.dm = $.dm || {};
            $.extend($.dm, {
                confirmDialog: function () {
                    $("#dialog").remove();
                    var dialogHtml = $("<div id='dialog'><div id='dialogTitle'>Title</div><div id='dialogContent'><div id='dialogMessage'>Hello world</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>");
                    dialogHtml.appendTo(document.body);
                    var defaultDialogOptions = {
                        autoOpen: false,
                        showCloseButton: false,
                        resizable: false,
                        isModal: true,
                        okButton: $('#ok'),
                        cancelButton: $('#cancel')
                    };
                    $("#dialog").jqxWindow(defaultDialogOptions);
                    $("#dialog").jqxWindow({
                        'initContent': function () {
                            $('#ok').jqxButton({ width: '65px' });
                            $('#cancel').jqxButton({ width: '65px' });
                            $('#ok').focus();
                            $('#dialog').on('close', function (event) {
                                return true;
                            });
                        }
                    });
                    $("#dialog").jqxWindow('open');
                }
            });
            $("#button").click(function () {
                $.dm.confirmDialog();
            });
        });
    </script>
</head>
<body class='default'>
<div id="jqxWidget">
    <button id="button">
        Open popup window</button>
   
</div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 5, 2013 at 2:09 pm Problem with buttons in modal window #24602

Chris99

Participant

Thanks for getting back to me so soon Peter,

I should have spotted that one myself 😉

Author

Posts

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

You must be logged in to reply to this topic.