无法弹出jQuery对话框

Question

I am trying to get the jQuery dialog box to popup up after pressing the "upvote" link here: http://www.problemio.com

(I was working from this example, and then modified it since it didn't work for me: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ )

Here is the jQuery code I have so far which doesn't work :)

<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 + '&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 + '&vote=-';        

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

Above this code I have another jQuery function that also has a documentOnready check. Would that matter? Should I make the dialog box code global? If so, how do I do that?

In any case, how can I get the dialog box to open for me with the setup I have now?

Thanks!!

Changed my jQuery imports to this:

<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" />

Answer 1

You need to include the jQuery UI script on your page. That's what includes the dialog plugin .

Currently you are only referencing jQuery 1.6.4 in your HTML.

Answer 2

Change this (at the top within your $(document).ready() ):

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

to

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

And it is okay to have multiple $(document).ready() , they all should run once the dom is loaded