How to use thickbox (or modal window) to update a select input box

Question

I have a form with a dynamic select box (pulled from a database). I want to give users the ability to add to that select box without leaving the form. I would prefer a thickbox (or modal window) to pop up when the user clicks a link next to the select box. The thickbox popup would have a form where the user can enter the new value to be displayed in the select box. When the user clicks submit, the thickbox (or modal) popup closes, and refreshes just the select box that they were adding to...thus preserving all other data on the form. As a bonus, I would also like for the select box to select the value that was just added.

I have found some close examples, but nothing quite the same. The closest thing I have seen to this is the AddToList plugin for jquery here: http://pelicansareevil.com/jquery/addtolist - but it does not use a thickbox style popup.

I have come close to getting a thickbox version of this working, but I cannot seem to refresh the select box automatically when the thickbox is closed.

Answer 1

The below code would be inserted into the function that is called when the thickbox is closed. You may also want to add some code to clear the text boxes after they close the thickbox too.

If you had two inputs like this...

<input name="newValue" type="text" />
<input name="newName" type="text" />

Then you could do this...

var newValue = $('input[name="newValue"]').val();
var newName = $('input[name="newName"]').val();

// Removes the selected attribute from your current options
$('#mySelect option:selected').removeAttr("selected");

// Adds a new option with the selected attribute
$('#mySelect').append('<option selected="selected" value="' + newValue + '">' + newName + '</option>');

Answer 2

I think the main problem was that you couldn't catch the event when the ThickBox was closed. As far as I know ThickBox doesn't natively support a callback, where you can pass a function that gets called when the modal window is closed. However you can try this addition to thickbox cb_thickbox (replace this with your current ThickBox script). It adds a callback function for ThickBox plugin.

Just define this function in your script

var TB_callback = function(){alert("Now I can update my combobox!")};