Auto refresh the drop-down

aris · October 10, 2012, 8:59am

I have an option in dropdown like “Add new option” written using
grouped_collection_select.

And when user clicks on the “Add new option”. A pop up dialog appears to
add a new value. And when I click create it hits the database and adds
the
value to the db.

But It never updates the dropdown list. Suggest me a way to auto refresh
only the current dropdown with the new vales in db when a new value is
added.

Ram

ram · October 10, 2012, 9:02am

You cannot do it without reloading the page. Otherwise you have to do it
through AJAX. Create a separate partial for that dropdown and whenever
you
have to change that dropdown just render it in your js.erb file.

ram · October 10, 2012, 9:44am

On Wed, Oct 10, 2012 at 5:01 PM, KUL KING [email protected] wrote:

And when user clicks on the “Add new option”. A pop up dialog appears to
add a new value. And when I click create it hits the database and adds the
value to the db.

But It never updates the dropdown list. Suggest me a way to auto refresh
only the current dropdown with the new vales in db when a new value is
added.

It is possible to do this via ajax as KUL KING has said but you don’t
need
to render the whole html. just return a json data with the id of
the new option. Then just append an option tag on the dropdown.

[email protected].
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit https://groups.google.com/groups/opt_out.

–

ram · October 10, 2012, 9:59am

Jim Ruther N. is right. I didn’t read the problem carefully. If you
just
want to add an option to the dropdown and nothing else then you don’t
need
any separate partial. Just do what Jim Ruther N. said.

ram · October 10, 2012, 8:13pm

Jim ruther Nill wrote in post #1079179:

On Wed, Oct 10, 2012 at 5:01 PM, KUL KING [email protected] wrote:

And when user clicks on the “Add new option”. A pop up dialog appears to
add a new value. And when I click create it hits the database and adds the
value to the db.

But It never updates the dropdown list. Suggest me a way to auto refresh
only the current dropdown with the new vales in db when a new value is
added.

It is possible to do this via ajax as KUL KING has said but you don’t
need
to render the whole html. just return a json data with the id of
the new option. Then just append an option tag on the dropdown.

[email protected].
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit https://groups.google.com/groups/opt_out.

–

Jim,

I am also doing similar thing.Just return a json data with the id of
the new option. Can you explain
with some coded examples.

My coffee script code looks like this:

After directing to a dialog:

add_new_item = →
val1 = document.getElementById(“item_name”).value
val2 = document.getElementById(“item_id”).value
$.ajax
type: “POST”
url: “/items.json”
data:
item:
name: val1
item_id: val2

dataType: "json"
success: (msg) ->
  alert "Item saved" + msg.name
  "I guess here I have to add changes to make dropdown refresh"

error: (msg) ->
    alert "Item already exists"

ram · October 10, 2012, 8:26pm

On Oct 10, 2012, at 2:13 PM, chandru c. wrote:

[email protected].
Jim,
val2 = document.getElementById(“item_id”).value
alert “Item saved” + msg.name
“I guess here I have to add changes to make dropdown refresh”

I’m not sure how this would translate into CS, but in vanilla JS, you
would do this to add a new option at the end of an existing select:

var s = document.getElementById(‘your-select’);
s.options[s.options.length] = new Option(label, value);
s.options.selectedIndex = s.options.length - 1;

Whatever you do, resist the urge to use a jQuery update to write another

into the tag -- select tags resolutely do not work that way, and you'll just go round and round until you work that out.

Walter

ram · October 10, 2012, 3:06pm

On Oct 9, 2012, at 1:42 PM, Ram wrote:

I have an option in dropdown like “Add new option” written using
grouped_collection_select.

And when user clicks on the “Add new option”. A pop up dialog appears to add a
new value. And when I click create it hits the database and adds the value to the
db.

But It never updates the dropdown list. Suggest me a way to auto refresh only
the current dropdown with the new vales in db when a new value is added.

What I like to do in this case is to use JavaScript to replace the
select with a text field. Anything entered into the text field (which
picks up the same name as the select it replaces) gets added to the
collection, and once the form is submitted, the select gains that new
value, sorted into alphabetical (or whatever) order. I have a function
that does all this automatically to any select with the classname
‘combo’ added to it. The Add new option is appended to the bottom of the
select, choosing it makes the select disappear, replaced with a text
field. Blurring out of the text field without entering anything replaces
it with the original select.

Walter

ram · October 10, 2012, 11:48pm

On Oct 10, 2012, at 4:07 PM, Ramesh C. wrote:

I’m not sure how this would translate into CS, but in vanilla JS, you
Walter

Hi Walter…

It has to just update values from db. Refresh it using ajax.

You can replace the entire picker with Ajax, but you cannot add elements
to an existing select on the page using Ajax. That was the only point I
was trying to make.

Walter

ram · October 10, 2012, 10:07pm

Walter D. wrote in post #1079286:

On Oct 10, 2012, at 2:13 PM, chandru c. wrote:

[email protected].
Jim,
val2 = document.getElementById(“item_id”).value
alert “Item saved” + msg.name
“I guess here I have to add changes to make dropdown refresh”

I’m not sure how this would translate into CS, but in vanilla JS, you
would do this to add a new option at the end of an existing select:

var s = document.getElementById(‘your-select’);
s.options[s.options.length] = new Option(label, value);
s.options.selectedIndex = s.options.length - 1;

Whatever you do, resist the urge to use a jQuery update to write another
into the tag -- select tags resolutely do not work that way, and you'll just go round and round until you work that out.
Walter

Hi Walter…

It has to just update values from db. Refresh it using ajax. Any help in
that??

ram · October 11, 2012, 2:01am

On Thu, Oct 11, 2012 at 7:47 AM, Walter Lee D.
[email protected]wrote:

alert "Item saved" + msg.name
into the tag -- select tags resolutely do not work
to an existing select on the page using Ajax. That was the only point I was
trying to make.

I didn’t really study js so there may be things that I don’t know about.
What’s wrong with appending options to a select tag?
I did some experimenting using jsfiddle and jquery. It turned out ok
when
I append options to a select tag.

To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit https://groups.google.com/groups/opt_out.

–

ram · October 11, 2012, 4:23am

On Oct 10, 2012, at 7:59 PM, Jim Ruther N. wrote:

[email protected].
s.options.selectedIndex = s.options.length - 1;
It has to just update values from db. Refresh it using ajax.

You can replace the entire picker with Ajax, but you cannot add elements to an
existing select on the page using Ajax. That was the only point I was trying to
make.

I didn’t really study js so there may be things that I don’t know about. What’s
wrong with appending options to a select tag?
I did some experimenting using jsfiddle and jquery. It turned out ok when I
append options to a select tag.

Edit fiddle - JSFiddle - Code Playground

That clearly works in Safari 6, I wouldn’t bet on it working in IE < 10.

Walter