Can't get the jQuery dialog to popup

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");

        pro开发者_JAVA百科blem_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" />

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.

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