I have an issue to loop through profile field and values. Bootstrap collapse not working.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<% #profile.each do |field, value| %>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="collapse_#{field.id}" aria-expanded="false" aria-controls="collapseOne">
<%= field%>
</a>
</h4>
</div>
<div id="collapse_#{field.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<%= value %>
</div>
</div>
</div>
<% end %>
</div>
Please check this:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<% #profile.each do |field, value| %>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="collapse_<%=field.id%>" aria-expanded="false" aria-controls="collapseOne">
<%= field%>
</a>
</h4>
</div>
<div id="collapse_<%=field.id%>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<%= value %>
</div>
</div>
</div>
<% end %>
</div>
You can use <%= field.id%> insted of #{field.id}.
Related
I'm working on project on Ruby on Rails 6 and trying to make modal carousel with bootstrap 4. It works fine with the first element of massive, but don't with other elements. Arrows right and left don't work
<div class="container">
<div class="row">
<% #division.galleries.each do |gallery| %>
<div class="col">
<%= link_to image_tag(gallery.image_url(:thumb).to_s), [gallery.division, gallery],
data: {toggle: 'modal', target: "#myModal-#{dom_id(gallery)}"}, id: "image-#{dom_id(gallery)}" %>
<p>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal-<%= dom_id(gallery) %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag #division.galleries.find(gallery.id).image_url.to_s, class: "gallery1" %>
</div>
<% #division.galleries.drop(1).each do |gallery| %>
<div class="carousel-item">
<%= image_tag gallery.image_url.to_s, class: "gallery1" %>
</div>
<% end %>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
import 'bootstrap'
import './stylesheets/application'
I have a working project with a form but in some cases a during a form submit, the request body params are not being passed onto params in the controller
This is what i am seeing when i put a binding.pry inside the application controller as a before_action
[1] pry(#<App::Agent::V2::VerificationsController>)> request.url
=> "http://localhost:4567/app/agent/v2/verifications/sg_bug_bash/submit"
[2] pry(#<App::Agent::V2::VerificationsController>)> request.body.read
=> "utf8=%E2%9C%93&authenticity_token=2myJbSTptXGEGn8a14T3zj7cgMSc%2F8zsLI27%2BirR6ZplQotMkTDfGWgKes3k9OSIfnL5wKyFvazn7tvNS9zuHQ%3D%3D&obs_application%5Boperation_name%5D=sg_bug_bash&obs_application%5Bapplication_id%5D=1&commit=Submit%2FDone&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Bid%5D=e4c987fb-a875-420e-81db-45a8482d36eb&resubmit_status%5BRotate%5D=0&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5B%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5Baccount_number%5D=+not+valid+&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_bank_statement%5D%5Brejection_reasons%5D%5Bbank_code%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Bid%5D=4d6fd458-2a46-4f8b-bf9e-0f7b26ea16f2&resubmit_status%5BRotate%5D=0&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5B%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5Bvehicle_plate_number%5D=&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5BvehicleBrand%5D=+not+valid+&obs_application%5Bpanels%5D%5Bdocuments%5D%5Bsg_lta_vehicle_log_card%5D%5Brejection_reasons%5D%5BvehicleType%5D="
[3] pry(#<App::Agent::V2::VerificationsController>)> params
=> {"controller"=>"app/agent/v2/verifications", "action"=>"submit", "id"=>"sg_bug_bash"}
It is a dynamically generated form, so the HTML looks like this:
<form id="verification-form" class="edit_obs_application" action="/app/agent/v2/verifications/sg_bug_bash/submit" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="j1rCDid+EAiODQijn+TNTml/MTwikobF2Tg63ssZ+EtAAH/ebLimZd8C5D1oXhLYHr9EohRvmnSfnmE7ikrSdw==">
<input value="sg_bug_bash" type="hidden" name="obs_application[operation_name]" id="obs_application_operation_name">
<input value="220" type="hidden" name="obs_application[application_id]" id="obs_application_application_id">
<div class="panel">
<div class="panel-heading">
<div class="label">Surat Tanda Nomor Kendaraan: STNK</div>
</div>
<div class="panel-body">
<div class="container">
<input value="4d6fd458-2a46-4f8b-bf9e-0f7b26ea16f2" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][id]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_id">
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> Vehicle type*: </div>
<div class="verification-value">166</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="vehicleType">
<input type="hidden" value="vehicleType" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicleType]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicleType">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> vehicle brand: </div>
<div class="verification-value">Alfa Romeo</div>
</div>
<div class="col-md-6 mandatory-action-false}">
<div class="row component-validation" id="vehicleBrand">
<input type="hidden" value="vehicleBrand" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicleBrand]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicleBrand">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> No Polisi: </div>
<div class="verification-value">sj111k</div>
</div>
<div class="col-md-6 mandatory-action-false}">
<div class="row component-validation" id="vehicle_plate_number">
<input type="hidden" value="vehicle_plate_number" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][vehicle_plate_number]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_vehicle_plate_number">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-true">
<div class="col-md-6">
<div class="label"> Vehicle Image*:</div>
<div class="image-container">
<div class="zoomable">
<img src="https://sample_url/image.png">
<input type="hidden" name="resubmit_status[Rotate]" id="resubmit_status_Rotate" value="0" class="image-rotation-input">
</div>
<div class="image-controller">
<div class="fa fa-undo"></div>
<div class="fa fa-repeat"></div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row component-validation" id="">
<input type="hidden" value="" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> unclear image </li>
<li> wrong image </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_lta_vehicle_log_card][rejection_reasons][]" id="obs_application_panels_documents_sg_lta_vehicle_log_card_rejection_reasons_">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<div class="label">Bank</div>
</div>
<div class="panel-body">
<div class="container">
<input value="e4c987fb-a875-420e-81db-45a8482d36eb" type="hidden" name="obs_application[panels][documents][sg_bank_statement][id]" id="obs_application_panels_documents_sg_bank_statement_id">
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> bank code*: </div>
<div class="verification-value">700003</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="bank_code">
<input type="hidden" value="bank_code" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][bank_code]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_bank_code">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-false">
<div class="col-md-6">
<div class="label"> account number*: </div>
<div class="verification-value">5367683475661</div>
</div>
<div class="col-md-6 mandatory-action-true}">
<div class="row component-validation" id="account_number">
<input type="hidden" value="account_number" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> Not clear </li>
<li> not valid </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][account_number]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_account_number">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-false border-blank-false">
<div class="col-md-6">
<div class="label"> account holder name: </div>
<div class="verification-value">Testing</div>
</div>
<div class="col-md-6 mandatory-action-false}">
</div>
</div>
<div class="row verification-buttons row-bordered mandatory-action-true border-blank-true">
<div class="col-md-6">
<div class="label"> Bank Image*:</div>
<div class="image-container">
<div class="zoomable">
<img src="http://sample_url/image.png">
<input type="hidden" name="resubmit_status[Rotate]" id="resubmit_status_Rotate" value="0" class="image-rotation-input">
</div>
<div class="image-controller">
<div class="fa fa-undo"></div>
<div class="fa fa-repeat"></div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row component-validation" id="">
<input type="hidden" value="" class="component-field">
<div class="row verification-buttons display-block">
<div class="col-md-8 invalid ">
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-invalid dropdown-toggle pull-right verification-btn" type="button" data-toggle="dropdown">
INVALID
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li> unclear image </li>
<li> wrong image </li>
<li> other </li>
</ul>
</div>
<div class="rejection-reason" style="display: none">
<input class="rejection-reason-text" type="hidden" name="obs_application[panels][documents][sg_bank_statement][rejection_reasons][]" id="obs_application_panels_documents_sg_bank_statement_rejection_reasons_">
<span class="rejection-reason-text"></span>
<div class="other-reason-text-block">
</div>
</div>
</div>
<div class="col-md-4 valid pull-right">
<button id="tableButton" type="button" class="btn btn-valid pull-right verification-btn "> VALID </button>
</div>
</div>
<div class="row reject-reason-other-block" style="display: none">
<div class="col-md-12">
<div class="modal-content">
<div class="modal-header">
Enter reason
</div>
<div class="modal-body">
<input type="text" class="other-reason-text" maxlength="100">
</div>
<div class="modal-footer">
<a class="btn btn-valid-visited other-reason-cancel">Cancel</a>
<a class="btn btn-valid-visited other-reason-submit">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="submit-btn-verification">
<input type="submit" name="commit" value="Submit/Done" class="submit_btn btn btn-valid disabled" disabled="disabled" style="cursor: not-allowed">
</div>
</form>
This is the form in erb:
<% if (!#application_completed.nil? && !#application_completed) %>
<%= form_for #application, url: retry_application_completion_app_agent_v2_verification_path, method: :post, html: { id: 'verification-form', class: 'col-md-6 text-center' } do |f| %>
<%= f.hidden_field :id, value: #application.id %>
<%= f.submit 'Retry', formaction: retry_application_completion_app_agent_v2_verification_path, class: 'btn btn-valid pull-right' %>
<% end %>
<% else %>
<% panels = #layout.panels %>
<%= form_for #application, url: submit_app_agent_v2_verification_path, method: :post, html: { id: 'verification-form' } do |f| %>
<%= f.hidden_field :operation_name, value: #layout.name %>
<%= f.hidden_field :application_id, value: #application.id %>
<% if #application.resubmit? %>
<div class="resubmit-header">RESUBMITTED APPLICATION</div>
<% end %>
<%= f.fields_for :panels do |form| %>
<% panels.each do |panel| %>
<%= render partial: 'partials/agent/v2/verifications/panels/' + panel.type.underscore, locals: { panel: panel, form: form } %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
with this as _submit_panel erb partial:
<% sections = panel.sections %>
<div class="submit-btn-verification">
<%= form.submit sections.first.properties['label'], class: 'submit_btn btn btn-valid disabled', disabled: 'disabled', style: 'cursor: not-allowed' %>
</div>
Collapse is only working on the first button, and I know it's because only the first div id is being set for all buttons. How do I iterate and make new div id's for each element when using hash.each?
Here's my erb:
<% #contacts.each do |category, hash| %>
<div class="panel-group" id=accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><%= category %></h3>
</div>
<div class="panel-body">
<ul class="list-group">
<% hash.each do |contact| %>
<li class="list-group-item" style="border: none">
<button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion" data-target="#demo"><%= contact['name'] %></button>
<div id="demo" class="panel-collapse collapse">
<div class="panel-body"><%= contact['email'] %></br><%= contact['ext'] %>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
</div>
<% end %>
Here's the corresponding code from my .rb:
get '/contact' do
contact = Contacts.new
#contacts = contact.getContacts
#contacts.each { |s| puts "get /contact found contact #{s.last.first['name']}" }
erb :contact
try
<% hash.each_with_index do |contact, index| %>
<li class="list-group-item" style="border: none">
<button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%= index %>"><%= contact['name'] %></button>
<div id="collapse<%= index %>" class="panel-collapse collapse">
<div class="panel-body"><%= contact['email'] %></br><%= contact['ext'] %>
</div>
</div>
</li>
<% end %>
I'm developing my first application with Angular 2 and I have installed Augury plugin for Google Chrome, in order to help me debug the code.
Here's the components tree and graph:
This is the HTML template of my custom component (DocumentsList):
<div class="container-fluid" style="margin-top: 10px">
<div class="table-row header">
<div class="column index">#</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">Title</div>
<div class="column comment">Comment</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">Module</div>
<div class="column reporter">Reporter</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status">Status</div>
<div class="column owner">Owner</div>
</div>
<div class="column severity">Severity</div>
</div>
</div>
<div class="wrapper icons">
<div title="Watch" class="column watch">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
<div title="Add comment" class="column add-comment">
<span class="glyphicon glyphicon-comment"></span>
</div>
</div>
<div class="wrapper dates">
<div class="column date">Created</div>
<div class="column date">Updated</div>
<div class="column date">Due</div>
</div>
</div>
<div *ngFor="let document of docs" class="table-row">
<div class="column index">{{document.id}}</div>
<div class="wrapper attributes">
<div class="wrapper title-comment-module-reporter">
<div class="wrapper title-comment">
<div class="column title">{{document.title}}</div>
<div class="column comment">{{document.comment}}</div>
</div>
<div class="wrapper module-reporter">
<div class="column module">{{document.module}}</div>
<div class="column reporter">{{document.reporter}}</div>
</div>
</div>
<div class="wrapper status-owner-severity">
<div class="wrapper status-owner">
<div class="column status"><span class="label" [ngClass]="{'Open': 'label-primary', 'In Progress': 'label-success'}[document.status]">{{document.status}}</span></div>
<div class="column owner">{{document.owner}}</div>
</div>
<div class="column severity high">{document.severity}}</div>
</div>
</div>
<div class="wrapper icons">
<div class="column watch"><span class="glyphicon glyphicon-eye-open" [class.active]="document.watched"></span></div>
<div class="column add-comment"><span class="glyphicon glyphicon-comment" [class.active]="document.commented"></span></div>
</div>
<div class="wrapper dates">
<div class="column date">{{document.created}}</div>
<div class="column date">{{document.updated}}</div>
<div class="column date">{{document.due}}</div>
</div>
</div>
</div>
Since the span in the graph is child of a div in which there is a *ngFor directive, shouldn't it be displayed in the graph as the parent of the span?
I think the graph should've looked like this (images created with Paint)
Short answer, yes. It makes sense.
I've been struggling with string interpolation inside an HTML accordion. It's more a logic issue that I can't seem to figure out (fairly new to rails). The problem I have is that while the layout is fine, when I click to collapse any of the 3 collapsible panels they all collapse. (Because I only have 1 #collapse).
Outermost ERB
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3">
<h2>Categorias</h2>
<div class="panel-group" id="accordion">
<%= render partial: "categories/catalog", collection: #categories, as: :c %>
</div>
</div>
_catalog Partial
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<%= c.name %>
<span class="badge">4</span>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<% c.subcategories.each do |sc| %>
<div class="panel-body">
<a href="#">
<%= sc.name %>
</a>
</div>
<% end %>
</div>
</div>
Controller
def catalogo
#categories = Category.where("parent_id IS NULL")
unless params[:cat_id].blank?
#products = Product.where(category_id: params[:cat_id]).paginate(:page => params[:page], :per_page => 50)
else
#products = Product.all.paginate(:page => params[:page], :per_page => 50)
end
#categorieswparent = Category.where("parent_id IS NOT NULL")
end
Your IDs need to be unique. Instead of hard-coding id="collapse1", use the ID of the record:
id="collapse<%= sc.id %>"
Perform the same interpolation for the href of the <a> tag responsible for collapsing and expanding the accordion.
Use category id id="#collapse<%= c.id %>" to interpolate with element id in _catalog Partial.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= c.id %>">
<%= c.name %>
<span class="badge">4</span>
</a>
</h4>
</div>
<div id="collapse<%= c.id %>" class="panel-collapse collapse in">
<% c.subcategories.each do |sc| %>
<div class="panel-body">
<a href="#">
<%= sc.name %>
</a>
</div>
<% end %>
</div>
</div>