Rails dropdown and onclick

[Mark Locklear]

Hey folks!

I have a page http://localhost:3000/sessions where the index action returns...

 def index
    @sessions = Session.find_all_by_org_id(params[:org_id])
    ...

So to display a specific org's sessions I can do ...

http://localhost:3000/sessions?org_id=1

What I would like is a dropdown list of my orgs, and when the user clicks on a specific org, the page will refresh, and display those orgs. For this to happen I know I need to pass something that looks like...

Processing by SessionsController#index as HTML
  Parameters: {"org_id"=>"1"}

...when the user chooses a specific org from the drop down. Can I use html options in the collection_select when I do this?

--

J. Mark Locklear
-Philippians 4:13 gives you the muscle, but YOU have to flex it!

-He who works with his hands is a laborer.

-She who works with her hands and her head is a craftswomen.

-Those who work with their hands, their head, and their hearts are artists.

[Levi Kennedy]

Hey Mark,

I would use select_tag instead:

http://apidock.com/rails/ActionView/Helpers/FormTagHelper/select_tag

Using that along with options_from_collection_for_select will be your best bet. There is a pretty good example in the docs at the link above.

After that, all you need to do is bind to the "onchange" event of the select tag to a function that reloads the page with the correct query string.

Hope this helps.

Levi

--
You received this message because you are subscribed to the Google Groups "Asheville Ruby Users Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to asheville-rb...@googlegroups.com.
To post to this group, send email to ashevi...@googlegroups.com.
Visit this group at http://groups.google.com/group/asheville-rb.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Mark Locklear]

hmm...seems like...

<%= select_tag "people", options_from_collection_for_select(Org.all, "id", "name"), :onchange => "this.form.submit();"%>

Should work? The drop down is being populated, but nothing is happening when I check something from the list.

[Andy Vanasse]

Yes.  Try the jquery change method (e.g., $('#org-select').change(function(){...}) ) to watch for the user selecting an organization.  The $().val() method should be enough to get the id of the selected organization.

One other suggestion.  If you're sending all these requests back to the SessionsController then you're essentially building a filtered index.  You might take a step in the direction of breaking out the filtering so that it can handle different kinds of filtering in the long run.  For example:

def index

  load_sessions

  filter_sessions_by_org unless params[:ord_id].blank?

  ...

end

private

  def load_sessions

    @sessions = Session.scoped

  end

  def filter_sessions_by_org

    @sessions = @sessions.scoped :conditions => { :org_id => params[:org_id] }

  end

I've taken this tack in the past both to make the intent of the code more obvious and to make the code more flexible.

--

[Mark Locklear]

In app/views/sessions/index.html.erb I have app/views/sessions/index.html.erb, and in app.js I have,,,

$(document).ready(function(){
$("#org-select").on("change", function(){
  this.form.submit();
});
});

No worky. That 'submit' does not feel right.

[Andy Vanasse]

Do you want to load via ajax (my suggestion was pointing in that direction) or would you prefer a full page load?

Full page load:

window.location = '/sessions?org_id='+ $(this).val()

Ajax:

$('#table-of-sessions').load('/sessions?org_id='+ $(this).val() + '.js');

In the latter, tacking on .js to the url should allow you to craft a format.js{} block in the SessionsController#index that returns only the sessions (no layout, no other markup).

[Mark Locklear]

Let me get a full page load working, then I will take a stab at AJAX.

So in the view I have ...

  <div id="org-select">
    <%= select_tag "people", options_from_collection_for_select(Org.all, "id", "name") %>
  </div>

...and in js I have...

$(document).ready(function(){
$("#org-select").on("change", function(){

  window.location = '/sessions?org_id='+ $(this).val()

});
});

So now I am getting a new page load when I choose from the drop down, but org id is not getting passed from the view.

[Andy Vanasse]

The selector you used is watching for the '#org-select' div to change. Technically this never happens.  What does happen is that the select inside the div changes and since there is nothing to handle that change event it bubbles up to the containing div.  That is fine in that it allows the 'change' event to be captured but when you ask $(this) for a val() there is nothing to return -- div's don't have values.

With that in mind you could change things two ways:

1. You could change the selector when you watch for a change.
   $('#people').on('change', ...
   
   This change would give the proper context for $(this).val() to pick up the right value.
   
   
2. You could change the selector inside the function to pick up the value from the selector.
   Directly: $('#people').val()
   Indirectly: $(this).children('select').val();

Given your markup I would tend to pick the first option.  That better represents what you're trying to do -- update the page when the user changes the value from the 'people' select.

From the purists standpoint, I'd also move the Org lookup into the controller (separation of concerns -- that's the controller's job).  I also preferred your bent towards the collection_select.  No reason to skip a handy shortcut that the framework provides.

<div id="org-select">

  <%= collection_select :org, :id, @orgs, :id, :name %>

</div>

If you did that then the jquery selector should be $('org_id').on('change', ...)