Question

I’m having a tough time figuring out a tricky issue. Here is what I am trying to achieve:

I would like to have a text_field where the user enters the email address of the person they would like to add and Rails validates whether that email address is registered. If that email is registered (and the account exists) it would render from A and send a “join project” email, if the email does not match with one in the db (user does not exist) it would render another form, form B, and send an “invite to SITE” email.

I have the functions working separately right now. One for inviting existing users, and one for inviting new users. Here is what I have.

view:

= button_to_function 'Add Existing User', 'insert_add_existing_member_form()', :class => "submit"
= button_to_function 'Add New User', 'insert_invitation_membership_form()', :class => "floatright submit"      


#add_existing_member_form.template.hide
  .label_top
    = label_tag 'Enter email address or name'
    = text_field_tag 'new_member_email', "", :class => "existing_member_autocomplete"

#membership_form.template.hide
  %p Pending acceptance.
  = f.fields_for(:memberships, Membership.new(), :child_index => 'new_membership') do |ff|
    = render 'membership', :ff => ff

Application.js:

var insert_add_existing_member_form = function(){
  $('#membership_form_footer').before("<h2>Add Existing User</h2>")
  var template = $("#add_existing_member_form").clone()
  $("#membership_form_footer").before( template.html() )
  $('.existing_member_autocomplete').autocomplete({ 
        source: users_for_autocomplete,
    select: function(event, ui){
      insert_membership_form(ui.item)
    }
  })
}

var insert_membership_form = function(item){
   $('#membership_form_footer').before("<h2>"+item.label+"</h2>")
   var template = $('#membership_form').clone()
   $(template).find('#project_memberships_attributes_new_membership_user_id').val(item.id)
   $('#membership_form_footer').before( template.html().replace(/new_membership/g, new Date().getTime()) )
}

var insert_invitation_membership_form = function(){
  $('#membership_form_footer').before("<h2>Add New User</h2>")
  var template = $("#invitation_membership_form").clone()
  $("#membership_form_footer").before( template.html().replace(/new_membership/g, new Date().getTime()) )
}

controller:

@users_for_autocomplete = User.not_member_of(@project.id).to_json(:only => :id, :methods => :label)

Is there a way to run an if / else statement in the insert_membership_form() function so that if the user input does not match any of the records, instead of rendering insert_membership_form with the ui entry, it would insert invitation membership?

Alternatively, is there an easier way to check for the existence of an :email without having to use jQuery? I mean, is there a way to write this code in rails so that a user simply inputs an email, it validates whether it exists, if true it renders Existing Member for, if false it renders New Member form? Your help would be greatly appreciated!

Thank you for your help and time!!

Answer 1

Your first problem is that the select callback won’t be called unless they choose an item from the auto-complete list:

select
Triggered when an item is selected from the menu…

The user can enter something without select being called in various ways, for example:

• They type in something that isn’t in the auto-complete list.
• They enter something that is in the auto-complete list but they type the whole thing. Similarly, the could paste a value in that just happens to be in the list.

So, you can’t rely on select doing anything useful. If you wrap your input in a <form>, you can bind something to the form’s submit event and then people can hit Enter to activate things and your submit handler can compare the input’s value with your users_for_autocomplete array to see if they chose a known value; you could also route the select event to the same function. Something like this:

<form>
    <input>
</form>

and:

$('input').autocomplete({
    source: users_for_autocomplete,
    select: function(event, ui) {
        choose_value(ui.item.value);
    }
});
$('form').submit(function() {
    $('input').blur();
    choose_value($('input').val());
    return false;
});
function choose_value(v) {
    for(var i = 0; i < users_for_autocomplete.length; ++i)
        if(users_for_autocomplete[i] == v)
            break;
    if(i == users_for_autocomplete.length) {
        // They entered a new one, go to insert_invitation_membership_form().
        insert_invitation_membership_form(v);
    }
    else {
        // They chose an existing one, go to insert_membership_form().
        insert_membership_form(v);
    }
}

Demo of the overall technique: http://jsfiddle.net/ambiguous/QCHvW/