Auto refresh the drop-down

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.

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.

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.

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.

Jim Ruther Nill 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 Nill said.

Jim ruther Nill wrote in post #1079179:

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.

rubyonrails-talk+unsubscribe@googlegroups.com.

To post to this group, send email to rubyonrails-talk@googlegroups.com.
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Jim,

  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:

root.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

Jim ruther Nill wrote in post #1079179:

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.

rubyonrails-talk+unsubscribe@googlegroups.com.

To post to this group, send email to rubyonrails-talk@googlegroups.com.
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Jim,

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:

root.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"

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 <option> into the <select> tag -- select tags resolutely do not work that way, and you'll just go round and round until you work that out.

Walter

Walter Davis wrote in post #1079286:

Walter Davis wrote in post #1079286:

rubyonrails-talk+unsubscribe@googlegroups.com.

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
<option> into the <select> 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.

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

Walter Davis wrote in post #1079286:

rubyonrails-talk+unsubscribe@googlegroups.com.

Jim,

val2 = document.getElementById(“item_id”).value

alert "Item saved" + [msg.name](http://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.

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.

http://jsfiddle.net/w2UKY/

> Walter Davis wrote in post #1079286:
>>
>>>>>>
>>>>> rubyonrails-talk+unsubscribe@googlegroups.com.
>>> 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
>> <option> into the <select> 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.

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.

http://jsfiddle.net/w2UKY/

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

Walter