Bootstrap modal inside a ruby on rails form

I have a profile edit page and would like to have two modals within the edit form. One modal will open a newsletter preference section of the form (as seen below) The other modal will open a password field to enter and save the changes. Both modals are inside the <% end %> tags of the form.

They didn't open, changed some code, now undefined local variable or method 'f' inside _passwordModal.html.erb

Edit page html:

<div class="wellington center">
<%= form_for :users, url: user_path(@user), method: :patch do |f| %>

<div class="row">
  <div class="col-md-6 left">
    <div class="form-group">
      <%= f.text_field :username, :required => false, disabled: true, placeholder: "#{@user.username}", class: 'form-control', id: 'editUsername' %>
      <%= f.text_field :first_last_name, placeholder: "#{@user.first_last_name}", class: 'form-control' %>
      <%= f.email_field :email, placeholder: "#{@user.email}", class: 'form-control' %> <!-- id: "inputEmail" -->
    </div>
    <div class="news-pref">
      <a href="#mailPref" role="button" class="btn btn-xs btn-warning" data-toggle="modal">Email Preferences</a>
    </div>
  </div>

  <div class="col-md-6 left">
    <label id="outlineLabel" for="birthday">Birth Date</label>
    <form class="form-inline" id="birthday">
      <div class="form-group">
        <input type="text" class="form-control" id="inputMonth" placeholder="Month">
      </div>
    </form>
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control" id="inputDay" placeholder="Day">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputYear" placeholder="Year">
      </div>
    </form>

    <label id="outlineLabel" for="country">Location</label>
    <form class="form-inline" id="country">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Country">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="State / Prov. / Region">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="City">
      </div>
    </form>
  </div>

</div>
  <a href="#passModal" role="button" class="btn btn-success save" data-toggle="modal">Save Changes</a>
  <% render 'newsPref' %>
  <% render 'passwordModal' %>
  <% end %>
</div>

_newsPref.html.erb view:

<div class="modal hide fade" id="mailPref" tabindex="-1" role="dialog" aria-labelledby="mailPrefLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="mailPrefLabel">Email Preferences</h4>
      </div>
      <div class="modal-body">

        <p><em>How would you like to receive our newsletter?</em></p>
        <div class="checkbox">
          <%= f.label :newsletter, class: "checkbox inline" do %>
            <%= f.check_box :newsletter %>
            <span>By checking this box, you agree to get emails from us, via our newsletter as well as our priority announcements.</span>
          <% end %>
        </div>
        <p>We typically send out a weekly newsletter to provide information on what we uploaded, wrote about, and tips that were all published during the week.</p>
        <div class="checkbox">
          <%= f.label :less_mail, class: "checkbox inline" do %>
            <%= f.check_box :less_mail %>
            <span>1 Newsletter per month: if you feel overwhelmed by weekly updates, don't worry!. By checking this box we'll cut back on the ammount we send to you, but still give you the opportunity to see what happend during the previous month.</span>
          <% end %>
        </div>
        <p><span class="text-muted">Priority anouncements may include sweepstakes, contests or other information that is "time-critial". These announcements are not always included in the newsletter and may be sent in addition to your newsletter preference.</span></p>
        <div class="checkbox">
          <%= f.label :newsletter, class: "checkbox inline" do %>
            <%= f.check_box :newsletter %>
            <span>To opt-out of recieving any future newsletters, go ahead and check this box. We hope to see you come back soon!</span>
          <% end %>
          <p><em>psst... By opting out you might miss out on some sweet discounts, contests and givaways!</em></p>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success" data-dismiss="modal" data-toggle="modal" data-target="#passModal">Save Changes</button>
      </div>
    </div>
  </div>
</div>

_passwordModal.html.erb view:

<div class="modal hide fade" id="passModal" tabindex="-1" role="dialog" aria-labelledby="passModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="passModalLabel">Confirm Password</h4>
      </div>
      <div class="modal-body">

        <p><em>Please enter your password to confirm changes.</em></p>
        <div class="form-group">
          <%= f.password_field :password, :placeholder => "Password", class: "form-control center" %>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <% f.submit "Save changes", class: "btn btn-success" %>
      </div>

    </div>
  </div>
</div>

.JS for swapping modals:

$("#edit-switch").click(function() {
$("#mailPref").modal('hide');
$("#passModal").modal('show');
});