MarkUs Work – Week 2, Day 2

21Sep09

Okay, I am starting slightly later tonight (10 pm). I am pretty sure that I won’t see any results from the work that I’ll do tonight, but I should at least try to comprehend this situation better.

Reminder: I am looking at ticket #357: “When adding a member to a group as an instructor, enter doesn’t do anything”

My goal for tonight is to investigate the proper way to do AJAX in Rails and how this should have been done in the first place, ignoring how the bad parts of the code are currently set up.

From my e-mail to my group last night:

An elegant solution to this is slightly more drawn out than I think was originally expected. The ticket’s comments suggest that we should just be able to add <form> and </form> tags. However, after some investigation, the problem is quite a bit more rooted than that. The form in question (as well as the rename group form) does not use the Ruby form_tag and the buttons are done with straight HTML <button onClick=”…”>value</button> tags instead of the Ruby submit_tag. Those bits would be fairly easy to fix though.

The problem lays more in the JavaScript global variable $grouping_id (I’m looking in views/groups/manage.html.erb here) which is set in the JS functions add_member and rename_group (called in the onClick of a button in the manage/_group.html.erb file) and relied on in the JS functions submit_add_member and submit_rename_group, both of which are called by the onClick of a button. The reason why the “enter” button isn’t working is because we’re using a “button” HTML tag instead of a submit button. But to fix that and do it properly, we need to be able to make the form_tag and I can’t figure out how to get grouping_id other than making a hidden field and setting it in the JS function add_member/rename_group and then we can pass that onto the form. I would also like to fix the rename_group dialog as well since it has the same problem.

From Mike in response to my e-mail:

Not to state the obvious, but I think the main problem here is that we have 1 modal dialog instance for all of these groups.  This is why $grouping_id is being used.  I think we can do better than this.

[Possible approach #2]

On clicking “add member”, send an AJAX call back to the server that contains the grouping id of the grouping we just clicked.  The server constructs the HTML of the modal dialog, and sends it back to the client, which displays the form, with the grouping_id embedded neatly inside.  Something along those lines.

Approach 2 requires a little more work, but I think you’ll learn a lot from it – especially about partials, RJS, how Rails does AJAX, and how handcoding JS for a Rails app can be an uphill battle.

Here’s how I would approach it:

  1. I believe you’re going to need a new Groups controller method for this.  Call it something like “add_member_dialog” or some such. This is what the AJAX will call to.
  2. Go into the partials that display the groups, and make the Add Member link fire off an AJAX call to add_member_dialog with the clicked grouping_id as a parameter..  Look up “link_to_remote” (http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/link_to_remote) – this is what you’ll probably want to use.
  3. Now you’ll need add_member_dialog to take the grouping_id parameter, assign it to something like @grouping_id, and generate the partial to give back to the client.  This will involve using RJS and a new partial.  Create a new partial, call it something like “_add_member_dialog.html.erb”, and move the contents of the  “add_member_dialog” DIV from manage.html.erb into it.  Turn the partial into a remote form (http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html#M001648) which plays by the same rules as submit_add_member. Keep the add_member_dialog div there though – we’ll need it later.
  4. Next, you’ll want to create an RJS file to run after the add_member_dialog method is called.  Just create a new file called “add_member_dialog.rjs”, Rails will call this automatically after the add_member_dialog method returns.
  5. Here’s the kicker:  Inside the add_member_dialog.rjs file, you’ll want to page.replace the contents of the add_member_dialog DIV with the partial contents (after having passed the partial the @grouping_id).  Check out app/views/annotation_categories/update_annotation.rjs to see how we’ve done this before.
  6. Next, get the RJS to call the function which brings up the modal dialog.  I think just doing page.call “modalAddMember.open();” will do the trick.

My goal for tonight is to investigate the proper way to do AJAX in Rails and how this should have been done in the first place, ignoring how the bad parts of the code are currently set up.

How this page is set up

  • Page: http://localhost:3000/main/groups/manage/#
  • So we’re looking at the groups controller and the manage view.
  • For each grouping, we see its name, members usernames, graders, and if we hover over it, then we’ll see links to “Rename Group”, “Validate”, “Delete”, and “Add Member”.
  • We are particularly concerned with the “Add Member” link. Theoretically, when we click on this, a new modal dialog specific to that grouping should pop up with an input field to add a student’s username to the group. (Which is what it does now as far as the user is concerned.

I’ve been looking through the code a bit, particularly at the annotation_categories stuff. I think that’s enough for tonight and I will look at it again tomorrow when my brain feels more refreshed and ready to think about stuff.

Advertisements


No Responses Yet to “MarkUs Work – Week 2, Day 2”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: