Home/ Questions/Q 8138197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:24:57+00:00

The HTML below will show a page with 2 buttons. One will open a

  • 0

The HTML below will show a page with 2 buttons. One will open a JQuery dialog the normal way – and is working fine.

The other button is an attempt to open the dialog form a non-jquery function – but it is not working. I am awear that the second button is not how it should be done – but for reasons that I will skip explaining here I would like to know if this is possible at all?

I am new to jquery – so I am sure there are basic things abount namespace etc. that I do not understand fully at the moment. Having tried numerous ways to get it to work without success – I now ask for advise on how this can be done. The more general questions is concerning how “normal” javascript can reference and manipulate JQuery functions.

Can it be done?

<!doctype html>
<html>
<head>
    <title>My Dialog demo</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var $dialog = $('<div></div>')
            .html('My Dialog Demo...')
            .dialog({
                autoOpen: false,
                title: 'My Dialog'
            });

            $('#Button1').click(function () {
                $dialog.dialog('open');
                return false; ////cancel eventbubbeling
            });
        });

        function showDialog() {
            $dialog.dialog('open');
            return false //cancel eventbubbeling
        }

    </script>

</head>
<body>
 <!-- JQuery autowired event-->
<button id="Button1">Open dialog (JQuery event wireup)</button>
<!-- Manual -->
<button id="Button2" onclick="showDialog();">Open (manual onClick event)</button>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make $dialog globle like this 

    <script type="text/javascript">
        var $dialog; 
        $(document).ready(function () {
            $dialog = $('<div></div>')
            .html('My Dialog Demo...')
            .dialog({
                autoOpen: false,
                title: 'My Dialog'
            });

            $('#Button1').click(function () {
                $dialog.dialog('open');
                return false; ////cancel eventbubbeling
            });
        });

        function showDialog() {
            $dialog.dialog('open');
            return false //cancel eventbubbeling
        }

    </script>
    • 0