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).