Question

我认为我的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 + '&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 + '&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 + '&vote=-';        

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

当在此页面上时：http://www.problemio.com我按下“upvote”链接，我没有弹出jQuery对话框。而且没有错误。但是有$ dialog.dialog（'open'）的行;应该打开我的对话框吧？

或者我有两个地方检查文件是否准备好是一个问题？我粘贴了我的整个jQuery代码，以防我出现一些新手错误。

谢谢！

Answer 1

您没有包含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>

Answer 2

您在DOM中创建了一个DIV，但您从未将其添加到现有结构中。试试这个：

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

jQuery对话框没有打开，似乎没有错误

2 个答案: