JQuery UI question, how do you add variables into the dialog box

Question

$('.openDialog').click(function(event){
     var width=$(this).attr('width');
     var height=$(this).attr('height');
     alert(width + ' ' + height);
     event.preventDefault();
     $("#dialog").dialog({autoOpen: false, modal: true});
     $('#dialog').dialog('option', 'width', width);
     $('#dialog').dialog('open');
     $('#dialog p').load('http://pagetoload.com/page.html .content');
});

As you can see above i'm trying to open a dialog box with a passed in parameter of width and height, however when I try and pass in the value of width on this line:

$('#dialog').dialog('option', 'width', width);

it doesn't work, any ideas why or how to get around that?

Thanks

Answer 1

I figured it out, you have to put [] around it for some reason.

$('#dialog').dialog('option', 'width', [width]); $('#dialog').dialog('option', 'height', [height]);

instead of

$('#dialog').dialog('option', 'width', width); $('#dialog').dialog('option', 'height', height);

Very interesting

Answer 2

var width=$(this).attr('width'); //width = 300px

would yields you a variable width of say 300px instead of 300 as what the .dialog options need.

Try doing a parseInt:

width = parseInt($(this).attr('width')); //width = 300

Then only pass it to the .dialog option.