Skip to content

Instantly share code, notes, and snippets.

@staycreativedesign

staycreativedesign/_submenus_menu.haml

Created November 4, 2018 21:55
Show Gist options
  • Save staycreativedesign/c23cc96728b9cd9cf81b4623403f2234 to your computer and use it in GitHub Desktop.
Save staycreativedesign/c23cc96728b9cd9cf81b4623403f2234 to your computer and use it in GitHub Desktop.
Download ZIP
Goal: Whenever a user changes the category I want the submenu to change to the correct submenu options. Problem: Everytime I change a category in the network tab in chrome it shows below...
Raw
_submenus_menu.haml
= select_tag "post[submenu_id]", options_from_collection_for_select(@category.submenus, "id", "title")
Raw
index.js.erb
$('#post_submenu_id').replaceWith("<%= escape_javascript(render("submenus_menu")) %>");
Raw
network_tab_in_chrome.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
<title>My website</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="Vdbp5NdP+xuE/c5IeH/3bAnn0pVT6Z8JIRVZp8J5ksOzd7x4PO7Zs5+tGFlwuh3srmQjVy4sOdf0crfQ7HOFMw==" />
<link rel="stylesheet" media="all" href="/assets/admin_application.self-801aa0df003896aabc467f927ffb7684522419300b1429625bc60a47bb620510.css?body=1" />
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/redactor.min.self-763c98b4d8d8415e9d23a462ea818771f3e23b89b231719f41ae2b8640454e51.js?body=1"></script>
<script src="/assets/plugins/video.min.self-61d1a7263751667800213bdc06cf4d2b2330b4f545258cc34ff2e567e4fa3259.js?body=1"></script>
<script src="/assets/plugins/alignment.min.self-c8617f0abbba8fc2a1e1ce3f2cfffefa3c3d47f9ab6a063673f5e04d0984f0af.js?body=1"></script>
<script src="/assets/plugins/counter.min.self-f53efedd2d0f5b154583bb5dc3a6a7d7a39cf91464a6104d908c7ce2b02bd625.js?body=1"></script>
<script src="/assets/bootstrap.min.self-075878ec6a19d24f3b46052eb9e0e5bb5c2a098ac50d05d8e3a21309d129273a.js?body=1"></script>
<script src="/assets/admin_application.self-9a948507fdee7a653be1d0bf6f1f0f473e58cc56b1fc4ffe2a95d6474014a869.js?body=1"></script>
<link href='https://transloadit.edgly.net/releases/uppy/v0.27.3/dist/uppy.min.css' rel='stylesheet'>
</head>
<body>
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='#'>Administration</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li>
<a href="/admin/main">Main Page</a>
</li>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>
Categories
<span class='caret'></span>
</a>
<ul class='dropdown-menu'>
<li>
<a href="/admin/categories/new">Add Category</a>
</li>
<li>
<a href="/admin/categories">View Categories</a>
</li>
</ul>
</li>
<li>
<a href="/logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
$('#post_submenu_id').replaceWith("<select name=\"post[submenu_id]\" id=\"post_submenu_id\"><\/select>\n");
</body>
</html>
Raw
post_form.js
$('#post_category_id').change(function(e){
$.getScript('/admin/categories/' + this.value + '/submenus')
})
Raw
submenus_controller.rb
def index
@submenus = @category.submenus
respond_to do |format|
format.js { }
format.html { }
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment