Haml novice cannot add an unordered list to page - html-lists

I want to add three fields that will be used as counters to the top of the screen on my app. The following code does actually work, HOWEVER, if you put the page in edit mode and then click the "Save" button, the three counter fields disappear and stay that way until you refresh the browser. I am a Haml newbie, and there isn't much documentation out there, and what little there is did not help me.
Here is the relevant Haml code to render the page in question:
- form_for [#application, #item_collection], :html => { 'data-remote' => 'json', :id => 'edit_item_collection', :class => 'show_progress inline_edit' } do |f|
= render 'edit_fields', :f => f
.submit.editing_only
%button.default_action{ :type => 'submit',:id => 'Save'} Save`
And here is the Haml code for the actual page:
.field.large
= f.label :name, nil, 'data-help-id' => 'page_name'
= f.text_field :name, disabled_if_unauthorized(#item_collection, :maxlength => 255, :title => "Edit Page")
= f.error_message_on(:name, :css_class => 'error_message')
.field
= f.label :path, nil, 'data-help-id' => 'page_path'
= f.text_field :path, disabled_if_unauthorized(#item_collection, { :maxlength => 255, :class => 'extra_margin', :title => "Edit Page" })
= f.error_message_on(:path, :css_class => 'error_message')
.field.info
= f.label 'Info'
%ul.elements_count
%li.elements_in_use{ :id => 'elements_in_use' }
%li.unused_elements{ :id => 'unused_elements'}
%li.undefined_elements{ :id => 'undefined_elements'}
When I click "Save," the elements_count unordered list disappears (but reappears if I refresh the browser). I know that the problem is that I need to put "= f." in front of these elements, but I don't see how to do that for lists.
Here is my JavaScript for populating the li elements:
function getElementCount() {
var usage_element_total = $('.usage').size();
var unused_element_total = $('.unused').size();
var undefined_element_total = $('.undefined').size();
$('#elements_in_use').html(usage_element_total + " Elements in use,");
if (unused_element_total < 1) {
$('#unused_elements').html(" 0 unused Elements,");
} else {
$('#unused_elements').html((unused_element_total-1) + " unused Elements,");
}
$('#undefined_elements').html(undefined_element_total + " undefined Elements");
}
Any help would be vastly appreciated. Thanks!

You need to trigger the Javascript that populates the element counts whenever the form is updated. Presumably you’re calling getElementCount when the page loads, you could trigger it when the form is rendered:
$("form").bind("ajax:complete", getElementCount);
But I’m guessing a bit as to how things are wired together and maybe that won’t work for your situation.

Related

Rails ActiveAdmin Batch Action on View/Show Page Grid

Rails ActiveAdmin offers native selectable_column element for batch action, and I found a plugin gem 'active_admin_scoped_collection_actions'
Both are excellent options for the INDEX page, but can I bring that functionality to the Show/View page, or a nested table_for on a tab?
Here's how I'm surfacing a child table as a grid:
forfeitures = ref_bond.forfeitures
renderer_forves = ActiveAdminExtensions::Renderer.new(resource: forfeitures, row: ->(field) { column field })
render_field_forves = ->(field) {
}
tab "Forfeitures" do
button :class => "btn_new_panel" do
link_to("New Forfeiture", new_admin_forf_path(bond_no: ref_bond.BONDNO, typ_inst: ref_bond.TYP_INST))
end
table_for forfeitures, class: "index_table" do
Forves.columns.each &render_field_forves
column :actions do |r|
text_node link_to "View", [:admin, r]
text_node " "
text_node link_to "Edit", [:edit, :admin, r]
end
end
end
So how can I get those Batch Actions here?

Nesting content from template in HAML tag from partial

Problem
I have a partial, which contains HTML structure for repeating elements of FAQ entry.
partials/_faqitem.haml:
.question
%a.faq-toggle{"data-toggle" => "collapse", :href => "\##{item}"}
= data.faq[item].q
%div{:class => "collapse", :id => "#{item}"}
Text directly in partial
I am using it in my faq.html.md.erb.haml template:
= partial(:"partials/faqitem", :locals => { :item => "so" })
This properly renders HTML and inserts data from data/faq.yaml:
so:
q: What is Stack Overflow?
info: Some other info
The problem arises when I try to add more text back in my template, under = partial call. I can't nail proper indentation that would allow me to render text in template inside div tag, in the same way as "Text directly in partial" is rendered.
Example of nesting in the template:
= partial(:"partials/faqitem", :locals => { :item => "so" })
Text in the template
= partial(:"partials/faqitem", :locals => { :item => "so" })
Text in the template
Depending on the level of nesting, I get either one of these errors:
syntax error, unexpected keyword_end, expecting end-of-input y in partial\n", 0, false);end;_hamlout.buffer << _hamlout.f ^
or
The line was indented 2 levels deeper than the previous line.
Is there any way to add text directly in the template in a way that will be rendered in the same way as if it would be nested inside tag from the partial?
Specific example
To better illustrate desired result, here is an example.
faq.html.md.erb.haml template:
= partial(:"partials/faqitem", :locals => { :item => "so" })
This is some text in the template.
:markdown
Now a *little* markdown to complicate things and then I will insert some information from data file, because I don't want to repeat myself.
= data.faq.so.info
This, used with partials/_faqitem.haml:
.question
%a.faq-toggle{"data-toggle" => "collapse", :href => "\##{item}"}
= spanmarkdown(data.faq[item].q)
%div{:class => "collapse", :id => "#{item}"
Should produce the same result as if the content from template was placed directly inside partial:
.question
%a.faq-toggle{"data-toggle" => "collapse", :href => "\##{item}"}
= spanmarkdown(data.faq[item].q)
%div{:class => "collapse", :id => "#{item}"}
This is some text in the template.
:markdown
Now a *little* markdown to complicate things and then I will insert some information from data file, because I don't want to repeat myself.
= data.faq.so.info
I am not sure about this syntax, I always use render to render my partial and indentation works just fine. Why not just do this:
= render "partials/faqitem", item: "so"
%div
Text in the template

passing data to modal

After checking Google for a long time, I can't find a solution:
A link like this:
<%= link_to instruction.name, "#myModal", :data => {:toggle => "modal",\
:id => instruction.id}, :class=> "openModal"%>
should open a modal window and show the complete Instruction data.
What is the best solution using coffeescript?
I can manage to show the id within a span tag.
But how to get the id in a Function.find(:id)?
Thanks for your help.
o.k. nobody anwered... found myself:
the view:
<%= link_to instruction.name, "#myModal", :data => {:toggle => "modal", :href => instruction_path(instruction)}, :class=> "openModal"%>
Coffee:
$(document).on "click", ".openModal", ->
$(".modal-body").load($(this).data('href'))
Works with Twitter bootstrap

Ruby rails - text field change event and ajax

Ok.. I am running into this types of issues more often. Most of my html is ajax rendered and I use fields and values from rendered page to make new ajax requests. But none of the events seem to fire. Need to understand this why is that.
This is a simple form with text field which I want to make ajax call on a change event, to skip the form/button. And it is not working. What do I change here?
<div><%= form_tag users_search_path, :remote => true, :id => 'search_form' do %>
<%= text_field_tag :keyword, nil, :maxlength => 11, :size => 20 %># Tried this putting outside of this form, didn't work.
<%= submit_tag " Search ", :id => "search_button", :onclick => "javascript:user_search()"%>
<% end %></div>
<%= text_field_tag :keyword, nil, :maxlength => 11, :size => 20 %> Tried this putting outside of this form, didn't work.
$(function(){
$("#keyword").change(function() {
alert('ok');
$.post('/users/search', function(data) {
$("#search").html(data);
});
});
}
Because the last jquery code is a function, it's not executed until you call it. Remove the first and last line, then it will be run when the page is loaded so it will attach the function defined inside to your text box.

rails3 ajax: What is the best way of persisting local variables via ajax?

This is how my view looks (please ignore the opening and closing tags):
#obj1.leaves.each do |l|
<div id = "form">
if <some_condition>
render :partial => 'shared/view1', :locals => { :l => l }
else
render :partial => 'shared/view2', :locals => { :l => l }
end
</div>
end
And the final action on view1 causes view2 to display and vice versa thru ajax. But when view1 or view2 are rendered the local variable 'l' is not recognized anymore and throws an error causing the forms not to display (except on manual page refresh). What do I do to make the forms work and persisting my 'l'?
Thanks for your help in advance.
EDIT: My create.js.erb file for view1 (view2 i actually the destroy method so vice versa):
$("#form").replaceWith("<%= escape_javascript(render('shared/view2')).html_safe %>")
And my actual view:
<%= form_for([l, l.likes.build], :remote => true) do |f| %>
<div class="actions"><%= f.submit "Like" %></div>
<% end %>
(Not an answer.)
#obj1.leaves.each do |l|
partial = <some_condition> ? 'shared/view1' : 'shared/view2'
render :partial => partial, :locals => { :l => l }
end
Locals are just that; local. It's not clear to me what Ajax you're talking about--replaceWith just replaces content, it doesn't make a request. If it's all in the same request, you could make l an instance variable (#l) and see if that clears things up.

Resources