jquery dialog title undefined using global variable

The title: 'Edit box' + ' ' + box line gets run when you instantiate your dialog: I assume you're doing that on $(document).ready. At that point, your box variable is undefined.

When you set box on the click event it's too late - the title has already been set.

See this post for further info.

EDIT

Here's a demo of one solution for this:

HTML

<button data-title="Apple">OPEN 1</button>
<button data-title="Banana">OPEN 2</button>

<div id="MyDialog">
    Example Dialog Content
</div>

JQUERY

var globalTitle = ''; // Your global variable

// Startup operations
$(function () {

    $('#MyDialog').hide();
    $('button').click(function () { 
                          openMyDialog($(this).data('title')) 
                      });
});

// Open the dialog using the global myTitle variable
function openMyDialog(customTitle)
{
    globalTitle = customTitle;
    $('#MyDialog').dialog({title : globalTitle});
}

Note the use of HTML5-style data- attributes, which rock, and are accessible in jQuery through the .data() function. Also note that I've used a global variable to show you that it's possible to use one. However there's no need for it - the best approach would be to pass customTitle straight into the dialog() call, i.e. $('#MyDialog').dialog({title : customTitle});