Question

I come from an ExtJS background and am slowly learning jQuery. I am trying to access the value of an option/property I added myVar to a Dialog from the open event of the dialog.

$("#add-family-dialog").dialog({
    autoOpen: true,
    height: 450,
    width: 600,
    resizable: false,
    modal: true,
    myVar: "hello world!",
    open: function(event, ui) { 
        // TODO: get the myVar value
        // this
        alert($(this).myVar);
        // or this
        alert($(this).attr("myVar"));
        // or this
        alert(this.myVar);
    }
});

How can I access myVar‘s value? Is this the correct way to do this or is there a better method of holding variables on an object?

Answer 1

You can access it through the 'option' method:

var myVar = $(this).dialog('option', 'myVar');

Demo: http://jsfiddle.net/ambiguous/ww5Gm/

I don’t know if this is specified or accidental behavior though so I wouldn’t depend on it. A more natural approach (IMO) would be to use data to attach your extra data:

$('.dialog').data('myVar', 'hello world!').dialog({
    // ...
    open: function(event, ui) {
        var myVar = $(this).data('myVar');
        // ...

Demo: http://jsfiddle.net/ambiguous/R9z8D/