Блог

Я думаю, что я отсортировал импорт jQuery следующим образом:

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

тогда у меня есть весь код jQuery, подобный этому:

 <script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();

        var dataString = 'problem_name='  name   'amp;problem_blurb='   problem_blurb;

        if(name=='' || problem_blurb == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_problem.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();

                    // Here can update the right side of the screen with the newly entered information
                    //alert (json);

                    new_string = "<h2>Most Recently Added Problems</h2>";

                    // Have to figure out how to make this work with the DOM.
                    for (var i = 0, l = json.length; i < l;   i) 
                    {  
                        title = json[i]['problem_title'];
                        member_id = json[i]['creator_member_id'];
                        description = json[i]['problem_description'];
                        problem_date = json[i]['problem_date'];
                        upvotes = json[i]['upvotes'];
                        downvotes = json[i]['downvotes'];   
                        problem_id = json[i]['problem_id']; 

                        new_string = new_string   "<p>Problem name: <a href='http://www.problemio.com/problems/problem.php?problem_id="   problem_id   "'>"   title   "</a></p>";

                        new_string = new_string   "<p>Problem description: "   description   "</p>";
                        new_string = new_string   "<p>Entered date "   problem_date   "</p>";

                        new_string = new_string   "<a href='/problems/edit_problem.php?problem_id="   problem_id   "'>Edit</a>";

                        new_string = new_string   "<hr />";                                             

                    }   

                     $("#recent_problems").replaceWith( new_string ) ;                                  
                }
            });
        }

        return false;
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() 
{
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .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.

                        //$(".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>
  

И когда на этой странице: http://www.problemio.com Я нажимаю ссылку «проголосовать», но диалоговое окно jQuery не появляется. И ошибки нет. Но строка, в которой есть $dialog.dialog(‘open’); должна открыть мое диалоговое окно, верно?

Или проблема в том, что у меня есть два места, которые проверяют, готов ли документ? Я вставил весь свой код jQuery на случай, если я допускаю некоторые ошибки новичка.

Спасибо!

Вы не включаете jQuery UI CSS, как я вижу в вашей ссылке, диалоговое окно появляется, но оно не отформатировано.

Включите строку в раздел head (лучше использовать перед включением файла JS):

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
  

Также, пожалуйста, закройте script теги правильно

Заменить:

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

С:

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

Вы создаете DIV в DOM, но никогда не добавляете его в существующую структуру. Попробуйте это:

 var $dialog = $('<div>');
$('body').append($dialog);