jQuery对话框没有打开,而且似乎没有错误

jQuery dialog not opening, and there seems to be no error

本文关键字:有错误 对话框 jQuery      更新时间:2023-09-26

我想我得到了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代码,以防我犯一些新手错误。

谢谢!

你没有包括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>

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

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