Calling JQuery dialog from onclick

Question

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>

should consider upgrading jQuery to more current version, yours is quite old. Can simply change the src of script tag from "1.3.2" to "1.7" and jQuery UI to "1.8". Some code you encounter may include newer methods — charlietfl
– charlietfl, Commented Jun 25, 2012 at 7:11

Govind Malviya · Accepted Answer · 2012-06-25 06:59:07Z

4

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>

answered Jun 25, 2012 at 6:59

Govind Malviya

13.8k17 gold badges70 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling JQuery dialog from onclick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related