CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Godzilla74
Godzilla74

Reputation: 2502

Update options based on select

In my Rails app I have a select drop down where the user can select a 'group' that they would then assign IP addresses to moving them from left to right.

How can I pre-populate the right hand select box (hosts_assigned) with the IP addresses that have already been assigned to a specific group that's selected? I can't do it through my Rails controller since selecting the group doesn't reload the page, so I'm assuming it would be a jQuery thing.

I've already setup the Rails MVC, so I can just use group.network_hosts to get all network hosts assigned to a given group.

enter image description here

The view is pretty simple right now, with some jQuery to allow moving IPs from left to right, and vice-versa:

<%= form_tag '/edit_host_group', id: 'edit_host_group_form', class: "form-horizontal form-label-left" do %>
  <%= label_tag "Group", nil, required: true, class: "control-label col-md-2 col-sm-2 col-xs-12" %>

  <%= select_tag "groups", options_from_collection_for_select(@host_groups, "id", "name"), include_blank: false, class: "form-control" %>
  <%= label_tag "Available Hosts", nil, class: "control-label col-md-2 col-sm-2 col-xs-12" %>

  <select id="hosts_available" class="form-control" size="30" multiple="multiple">
    <% @network_hosts.each do |n| %>
      <% next if n.network_host_group_id %>
      <option value="<%= n.id %>"><%= n.ip_address %></option>
    <% end %>
  </select>

  <button type="button" id="btnRight" class="btn btn-success"><i class="fa fa-2x fa-forward"></i></button>
  <br/>
  <button type="button" id="btnLeft" class="btn btn-danger"><i class="fa fa-2x fa-backward"></i></button>

  <select id="hosts_assigned" class="form-control" size="30" multiple="multiple"></select>

  <%= text_field_tag :hosts %>
  <%= submit_tag "Add Group", class: "btn btn-success" %>
<% end %>


<script>
  function getHosts() {
    var current_hosts=[];
    $("#hosts_assigned option").each(function() {
      current_hosts.push($(this).val());
    });
    return current_hosts.length>0?current_hosts.join(","):"";
  }
  $("#btnLeft").click(function() {
    $("#hosts_assigned option:selected").each(function() {
      $("#hosts_available").append(this);
    })
    $("#hosts").val(getHosts());
  });

  $("#btnRight").click(function() {
    $("#hosts_available option:selected").each(function() {
      $("#hosts_assigned").append(this);
    });
    $("#hosts").val(getHosts());
  });
</script>

Upvotes: 0

Views: 40

Answers (1)

lgowin
lgowin

Reputation: 81

  1. You have to add a handler to onChange event of the group select tag.
  2. In that event handler, get a current group id and execute ajax to get a list of IPs assigned to that group. Ajax might return whole select tag or just raw data (json list of IPs).
  3. In the jQuery page load event, you have to manually trigger the onChange event, so IPs are loaded for the first group.
  4. You have to also save current hosts_assigned when user make a change. Again using ajax. Event handlers you have already defined.

Upvotes: 1

Related Questions