javascript - Calling JQuery dialog from onclick - Stack Overflow|江阴雨辰互联

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=".7.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src=".3.2/jquery.min.js"></script>
    <script type="text/javascript" src=".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>

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

Can it be done?

<!doctype html>
<html>
<head>
    <title>My Dialog demo</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis./ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis./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 Improve this question asked Jun 25, 2012 at 6:55 Lars Kjeldsen 251 silver badge3 bronze badges

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 Commented Jun 25, 2012 at 7:11
Thanks for the tip - will do ! – Lars Kjeldsen Commented Jun 25, 2012 at 9:57

Add a ment |

1 Answer 1

Sorted by: Reset to default 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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744610624a4583744.html

javascript - Calling JQuery dialog from onclick - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Calling JQuery dialog from onclick - Stack Overflow

1 Answer 1

相关推荐