Error trying to create a dialog popup using jQuery

I am a jQuery newbie and I am trying to open a popup dialog box to the user in case of

error : function(data)

What I have in the jQuery code so far is:

<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() 
    {        
        alert ( "test: " + $(this).attr("data-problem_id") );
        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('open');
                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    {
                        alert ("not");
                    }

                    //alert(JSON.stringify(data));
                    //for (开发者_如何学运维var i = 0, l = json.length; i < l; ++i) 
                    //{
                    //  alert (json[i]);
                    //}
                }
            });


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

I get a JavaScript error that Object has no method dialog. That seems Greek to me :)

The error is happening here if you press the "vote up" link: http://www.problemio.com

How can I fix this? Will it be possible for me to make that dialog appear? It will be to ask people to log into the site or sign up.

Thanks!!

Not sure var $dialog = $('<div></div>') is strickly legit!

I think you need to do this;

var $dialog = $('.MyDiv')

and then

<div class="MyDiv"></div>

You need to include the jQuery UI JavaScript and CSS files on your page. You also need to attach the dialog elements to the page's DOM:

var $dialog = $('<div></div>')
       .html('This dialog will show every time!')
       .appendTo('body')
       .dialog({
           autoOpen: false,
           title: 'Basic Dialog'
       });

Side note: I strongly encourage you to update to a newer version of jQuery. Your site is using 1.3 (released in January of 2009); the latest version is 1.6.4 (September 2011).