Почему не работает мой диалог Javascript? - PullRequest
Новая
       4

Почему не работает мой диалог Javascript?

1 голос
/ 27 июля 2011

Я очень долго пытался заставить это диалоговое окно работать. Я сканировал Google и посмотрел на многочисленные вопросы здесь. Я просто не могу заставить его работать так или иначе. Я пытаюсь получить аналогичный результат этому: http://example.nemikor.com/basic-usage-of-the-jquery-ui-dialog/

Я попытался использовать код из этого источника, но я не смог заставить его работать.

Это jQuery: 

<script type="text/javascript">
  $(document).ready(function(){

     // Initialize my dialog
     $("#dialog").dialog({
       autoOpen: false,
       modal: true,
       buttons: {
       "OK":function() { // do something },
       "Cancel": function() { $(this).dialog("close"); }
    }
});

 // Bind to the click event for my button and execute my function
       $("#x-button").click(function(){
       Foo.DoSomething();
       });
   });

       var Foo = {
       DoSomething: function(){
       $("#dialog").dialog("open");
     }
   }

А это HTML: 

<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>

Я попробовал все, чтобы заставить его работать, но этого не происходит. Сам jQuery взят из ответа на аналогичный вопрос здесь, я пытался использовать его после того, как я только что разочаровался в жизни. Если бы вы могли мне помочь, я был бы очень признателен, и, пожалуйста, обратите внимание, что я новичок в Javascript / jQuery, поэтому, пожалуйста, не рвите меня слишком сильно.

Спасибо.

Ответы [ 3 ]

1 голос
/ 27 июля 2011

В этой строке есть ошибка, поскольку ваш комментарий в конце строки скрывает фигурную скобку от интерпретатора. 

"OK":function() { // do something },

Вам необходимо удалить его или заменить на /* do something */.

Это работает для меня: 

<html>
    <head>
        <link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // Initialize my dialog
                $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "OK":function() { },
                        "Cancel": function() { $(this).dialog("close"); }
                    }
                });

                // Bind to the click event for my button and execute my function
                $("#x-button").click(function(){
                    Foo.DoSomething();
                });
            });

            var Foo = {
                DoSomething: function(){
                    $("#dialog").dialog("open");
                }
            }
        </script>
    </head>
    <body>
        <div id="column1">
            <h2>Features</h2>
            <p>Click an image below to view more information on our products.</p>
            <img src="../Images/lockIcon.png" alt="Security" />
            <input id="x-button" type="button" />
            <p id="dialog" display="none">This is content!</p>
        </div>
    </body>
</html>
1 голос
/ 27 июля 2011

Закрывающая скобка закомментирована здесь: 

"OK":function() { // do something },

Вам нужно быть осторожным с закрывающими скобками и фигурными скобками.Были еще проблемы с ними, я их исправил, работает следующее: 

<html>
<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(){

     // Initialize my dialog
     $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "OK":function() {},
            "Cancel": function() { $(this).dialog("close"); }
        }
    }
    );

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });


    var Foo = {
        DoSomething: function(){
            $("#dialog").dialog("open");
        }
    }
});
</script>
</head>
<body>


<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>
</body>
</html>
0 голосов
/ 27 июля 2011

Вот решение http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Выдержка из этой страницы:

Простое решение этой проблемы - создать диалоговое окно с autoOpen, установленным в false, и затем вызвать.диалоговое окно («открыть») в обработчике событий. 

$('#opener').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...