Can't set value of input field inside jquery UI dialog

Question

I'm trying to change the value of input field with jquery. The input field is inside UI dialog box. It's part of my zend form

<input name="formulaCategory" id="formulaCategory" value="" size="40" type="text">

I have a link calls for a function that shows the dialog and I want it to change the value of this input as well.

function editFormulaCategoryDialog() {

    $("#edit-formula-category-dialog").dialog({show: "slide"});
    $("#formulaCategory").val('test');
}

Why it doesn't work?

If I put the input code somewhere else on the page outside dialog box and click the same link the dialog box shows up and the value of input field outside dialog is changed as expected.

Answer 1

Try this:

function editFormulaCategoryDialog() {

    $("#edit-formula-category-dialog").dialog({
        show: "slide",
        create: function() {
            $("#formulaCategory").val('test');
        }
    });
}

Try with a callback after dialog box create. You can also use open event callback.