ajax.js

$(document).on("submit", ".resource-form", function(e) {
    $.ajax({
      url: $(".resource-form").attr("action"),
      type: "POST",
      crossDomain: true,
      dataType: "html",
      data: $(".resource-form").serialize(),
      success: function(data) {
        $(".rails-app").html(data)
      },
      error: function(data) {
        $(".form-notifications").html("<p style='color: red;'>That password is incorrect. Please try again.</p>");
        console.log("This obviously doesn't work.")
      }
    });
    return false
  });

form.html.erb

<div class='rails-app'>
  <div class='login-portal'>
    <h2 style='color: blue;'>Login</h2>
    <%= form_tag "https://resourcecenter.herokuapp.com/login_path/check_password", remote: true, class: "resource-form" do |f| %>
      <%= text_field_tag :password, "", placeholder: "Enter Password", style: "background-color: #e6e6e6;" %>

      <%= submit_tag "Login", class: "check-pass-btn" %>
    <% end %>
    <div class='form-notifications'></div>
  </div>
</div>

view.html.erb

<div class='category-list'>
  <h1 style='text-align: center; color: blue;'>Categories</h1>
  <ul style='list-style: none!important, padding: 0px; margin-top: 40px!important;'>
    <% categories.each do |category| %>
      <li style='margin-bottom: 10px;'>
        <p style='display: inline; margin: 0px;'><%= category.name %> - <%= category.supplements.count %> Files</p>
        <p class='file-links' style='display: inline; margin: 0px;'> <%= link_to "View Files", "https://mywebsite.herokuapp.com/#{category.name}/files", style: "color: blue;", data: {title: category.name, remote: true}, class: "view-files-link" %></p>
      </li>
    <% end %>
  </ul>
</div>