admin管理员组

文章数量:1390931

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.

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./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>
  • javascript
  • jquery
Share Improve this question asked Jun 25, 2012 at 6:55 Lars KjeldsenLars Kjeldsen 251 silver badge3 bronze badges 2
  • 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

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>

本文标签： javascriptCalling JQuery dialog from onclickStack Overflow

版权声明：本文标题：javascript - Calling JQuery dialog from onclick - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744610622a2615632.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。