Блог

Главная - Вопросы по программированию - Не удается вывести диалоговое окно jQuery во всплывающее окно

Не удается вывести диалоговое окно jQuery во всплывающее окно

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь заставить диалоговое окно jQuery всплывать после нажатия ссылки «upvote» здесь: http://www.problemio.com

(Я работал с этим примером, а затем изменил его, поскольку у меня это не сработало: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog / )

Вот код jQuery, который у меня есть до сих пор, который не работает 🙂

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

    $('.vote_up').click(function() 
    {        
        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='  problem_id   'amp;vote= ';

        $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data)
                {           
                    // ? :)
                    alert (data);   
                },
                error : function(data) 
                {
                    //alert("ajax error, json: "   data.responseText);
                    errorMessage = data.responseText;

                    if ( errorMessage == "not_logged_in" )
                    {
                        alert ("errr");

                        // Try to create the popup that asks user to log in.
                        //$(this).dialog();
                        //$(".dialog").dialog();
                        $dialog.dialog('open');
                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    {
                        alert ("not");
                    }

                    //alert(JSON.stringify(data));
                }
            });


        //Return false to prevent page navigation
        return false;
    });

    $('.vote_down').click(function() 
    {
        alert("down");

        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='  problem_id   'amp;vote=-';        

        //Return false to prevent page navigation
        return false;
    });    
});
</script>

Над этим кодом у меня есть другая функция jQuery, которая также имеет проверку documentOnready . Будет ли это иметь значение? Должен ли я сделать код диалогового окна глобальным? Если да, то как мне это сделать?

В любом случае, как я могу открыть диалоговое окно для меня с настройкой, которая у меня есть сейчас?

Спасибо!!

Изменил мой импорт jQuery на этот:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.16/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" />

Комментарии:

1. Ваш код выглядит нормально. alert("errr"); Отображается ли предупреждение?

2. Сначала просто проверьте и убедитесь, что ваше диалоговое окно появляется, выполнив следующие действия сразу после инициализации диалога, $dialog.dialog('open'); . После этого вы можете продолжить диагностику, если проблема связана с ответом ajax.

3. @BNL да, это предупреждение действительно появляется. Ошибка, которую я получаю, касается объекта dialog. И другие люди предложили некоторые импортные файлы, которые я добавил к своему вопросу, которые также выдают ошибки 🙂

4. @Interstellar_Coder нет, этого не произошло, потому что у меня были ошибки в объявлении. Я изменил свой первоначальный вопрос, чтобы показать мой импорт, который выдает ошибки.

Ответ №1:

Вам необходимо включить скрипт пользовательского интерфейса jQuery на свою страницу. Это то, что включает в себя плагин dialog.

В настоящее время вы ссылаетесь только на jQuery 1.6.4 в своем HTML.

Комментарии:

1. @PirateKitten что вы подразумеваете под включением скрипта пользовательского интерфейса jquery? У меня есть этот код в заголовке:

2. Это всего лишь скрипт jQuery. jQueryUI — это дополнительный скрипт, который добавляет функциональность пользовательского интерфейса, и вам также необходимо включить это. Эта страница должна рассказать вам все, что вам нужно знать об этом.

3. @PirateKitten не могли бы вы показать мне фрагмент, который необходимо добавить? Я немного смущен. Я думал, что больше ничего не нужно добавлять, кроме общего импорта jQuery.

4. @PirateKittn Я вижу там под виджетами-> диалог — это то, что мне нужно?

5. Вы читали ту страницу, на которую я только что ссылался? Там даже есть раздел с пометкой «Основной обзор: использование jQuery UI на веб-странице». Вам нужно добавить ссылку на скрипт, одного jQuery недостаточно.

Ответ №2:

Измените это (вверху в вашем $(document).ready() ):

    var $dialog = $('.dialog')
           .dialog({
               autoOpen: false,
               title: 'Basic Dialog'
           });

Для 

    var $dialog = $('.dialog');
   $dialog.dialog({
               autoOpen: false,
               title: 'Basic Dialog'
           });

И это нормально иметь несколько $(document).ready() , все они должны запускаться после загрузки dom

Комментарии:

1. только что внес это изменение и все равно получаю ту же ошибку. Какой импорт я должен иметь? В ответе другого человека упоминается некоторый дополнительный импорт библиотеки, который необходимо выполнить.

2. Да, мое предположение было неверным. Он должен работать без исправления, которое я предложил (вот пример — jsfiddle.net/FloydPink/zqStS ). Вы могли бы попробовать добавить это в заголовок страницы, как предложил @PirateKitten — <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" />

3. он жалуется на эту ссылку: GET ajax.googleapis.com/ajax/libs/jquery/1.8.16/jquery.min.js 404 (Не найден)