jQuery UI dialog box using .load, how to close dialog box upon selection from a drop down list.

Question

Hello, I am new to jQuery UI but could not find an answer. I have a webpage that has some textboxes on it. When a user clicks on one of the text boxes a jQuery UI dialog box opens using the .load to load a HTML page. The HTML page contains is a short script just basically containing something like the code below. I am succesfully returning the value to the parent textbox via 'parent.mfac_falue' function but the modal window does not autoclose upon the selection of the item, which is what I want to happen.

How can I get the modal window to autoclose immediately after someone selects an item from the dropdown box? Let me know if you need more info, thank you.

Matthew

<select name="resp" id="input" onclick="parent.mfac_value(this.form.resp.value);">
 <option value="Choice">
 <option value="APC">APC</OPTION>
 <option value="APPLE">APPLE</OPTION>
 <option value="XEROX">XEROX</OPTION>
</select>

Answer 1

You can attach an event handler to it, I would use .change() here, like this:

$("#input").change(function() {
  $(this).closest(".ui-dialog-content").dialog("close");
});

This goes up to the dialog container, finding it via .closest() and the .ui-dialog-content selector (the class the dialog widget gave it) then calls the close method on dialog.

Answer 2

onchange="parent.mfac_value(this.form.resp.value);$('#ID_OF_DIALOG').dialog('close');"

Answer 3

Thank you all for your help.

Actually, where would I put the .closest code. Would it be in the HTML file that is calleld or the parent file. I am having trouble getting the solution to work. Thx.