How to convert HTML with Ruby helper method ERB into Slim syntax - ruby-on-rails

Trying to convert some HTML code in a template to Slim syntax. The original code uses a Ruby helper method (in Rails) to dynamically determine the class of the li element.
Here is the original code in HTML:
<li class="<%= is_active_controller('dashboards') %>">
The online converter gives:
| <li class="
= is_active_controller('dashboards')
| ">
This not only is ugly and clunky--it doesn't work.
I've tried various options without success. Such as:
li class=is_active_controller('dashboards')
...as well as several other variations without success.

li class=(is_active_controller('dashboards'))

Related

SLIM h3 inside p

If I want to put header tag h1..h5 into p it render HTML in wrong way:
slim
p
h3 Header here
span Just text
expected
<p>
<h3>Header here</h3>
<span>Just text</span>
</p>
in real it render
<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>
looks like nothing special but in this case I can't bind CSS style because structure renders in broken way.
Is it a bug? Or I can solve this in some way?
You can not define tags like h3 and span inside the p tag.
See HTML5 specification for more information.
Slim itself doesn’t care about the tags, and renders your code as you expect:
$ slimrb
p
h3 Header here
span Just text
produces:
<p><h3>Header here</h3><span>Just text</span></p>
which matches what your expected code, except for whitespace.
This isn’t valid HTML though, so when the browser parses it it will correct it to something valid. For example the Chrome inspector will show:
<p></p>
<h3>Header here</h3>
<span>Just text</span>
<p></p>
Where the browser has closed the p element before the next h3 element.
If you want this to work in the browser, make sure you are generating valid HTML. Perhaps use a div instead of a p?

How do you insert erb absolute paths in each html.erb file in Rails?

I want to make the rendered html known about what erb files were rendered like below for debugging use in development in Rails.
<html>
<!-- /RAILS_ROOT/app/views/layouts/application.html.erb -->
<body>
<!-- /RAILS_ROOT/app/views/entries/index.html.erb -->
<h2>hello</h2>
</body>
</html>
For now, I am enforced to insert one line comment onto each erb file as below, but the work is not DRY and very painful.
<!-- <%= __FILE__ if Rails.env.development? %> -->
My Questions are:
Does any gem support this issue?
If 1 is no or not good enough, can you insert the comment by monkey-patching the Rails code?
`That’s how you go from page to page.
In plain HTML, you create a link like this:
Improve Your Ruby Skills
But in Rails that would look like this:(html.erg)
<%= link_to "Improve Your Ruby Skills", "/ruby-book" %>

How to get the img src using Nokogiri and at_css

I'm trying to get the src value of a block of HTML. I am specifically trying to achieve this using the at_css and not using XPath.
So far all I'm getting is either nil or a blank string.
This is the HTML:
<div class="" id="imageProductContainer">
<a id="idLinkProductMainImage" href='URL'>
<img id="productMainImage" src="SRC.jpg" alt="alt" title="A Title" align="left" class="product_image_productpage_main selectorgadget_selected">
</a>
</div>
The code I have is:
item = page.doc.at_css("#productMainImage img").text.strip unless page.doc.at_css("#productMainImage img").nil?
puts item #prints blank
item = item["src"]
puts item #prints blank
Where page.doc is the Nokogiri HTML element.
If you need the src attribute, you can do it like this:
pace.doc.at_css('#idLinkProductMainImage img').attr('src')
Also, I believe the problem is the way you are getting the img tag. You are trying to get all img tags inside #productMainImage, but this id is the image itself, so it will find nothing.
If you use the link id #idLinkProductMainImage, then you have a img tag to search inside it.

Custom HTML Error Wrappers for Form Elements

I would like to find a way to customize the default error html
<div class="field_with_errors"></div>
To take my own classes:
<div class="clearfix error">
<label for="errorInput">Input with error</label>
<div class="input">
<input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text">
<span class="help-inline">Small snippet of help text</span>
</div>
</div>
I have found this railscast from 2007 which uses Rails 2, I believe. http://railscasts.com/episodes/39-customize-field-error. It seems like Rails 3 might have a more friendly way to customize this html?
Also, it doesn't show a way to just add an error class directly to the input like I want.
The method explained in the link you posted is still used today with the vanilla form builders in Rails.
So, if you wanted to wrap your input like you mention, create a method overriding the ActionView::Base.field_error_proc in your environment.rb file for example, like so:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
if instance.error_message.kind_of?(Array)
%(<div class="form-field error">#{html_tag}<small class="error">
#{instance.error_message.join(',')}</small></div).html_safe
else
%(<div class="form-field error">#{html_tag}<small class="error">
#{instance.error_message}</small></div).html_safe
end
end
In the above code, I'm wrapping my input (the #{html_tag}) in a <div class="form-field error>..</div> that's the default used by ZURB Foundation. I'm also using a <small class="error">...</small tag (which is also the foundation default) to display the messages below the input.
However, I recommend using a form builder gem like simple_form. It cleans up your view code quit a bit and allows for the level of customization you require.
Check out the railscast on it here.
Good luck!

How should I update the pagination links in an AJAX call?

So I've implemented AJAX pagination. The problem is that since the <%= paginate #videos %> code is not inside the partial that I render, the pagination links are not updated. What jQuery code should I use to update the pagination links?
Btw I tried $(".pagination").replaceWith('escape_javascript(<%= paginate #videos %>)');;
but i get this error: Uncaught SyntaxError: Unexpected token ILLEGAL
$(".pagination").replaceWith("escape_javascript(<%= paginate #videos %>)");; throws this error: Uncaught SyntaxError: Unexpected identifier
Here is the JS code the browser sees:
$(".pagination").replaceWith(" <nav class="pagination">
<span class="prev">
« Prev
</span>
<span class="page first">
1
</span>
<span class="page current">2</span>
<span class="page last">
3
</span>
<span class="next">
Next »
</span>
</nav>
");
Ideally, the new pagination links should be included in the HTML response of the ajax call. If that is not possible - presumably because the links reside elsewhere in the document, then I would suggest creating a context/link/URI/action/whatever (disclaimer: I'm not a ROR guy) which returns a JSON string, structured something like:
[{"data": "The HTML output"}, {"pageLinks": "pagination HTML"}]
and replace your ajax call with one which expects JSON as the return dataType. Then it should be easy, e.g.:
$.ajax({
url: 'theURL',
dataType: 'json',
success: function(json) {
$('.pagination').html(json.pageLinks);
$('#someDiv').html(json.data);
}
});
The problem looks to be the quotes in your use of replaceWith. You need to escape the characters of that string before trying to use it.
You have double quotes starting and ending your string argument in the replaceWith function but the string you are feeding it also has double quotes throughout that don't look to be escaped. Every time a double quote is encountered it is terminating the string and trying to parse the rest as javascript statements and not a string.
I know this is an old question, but I faced a simmilar problem using will_paginate gem, and I tryed a lot of complicated stuffs to update the pagination. However, I did it with a simple solution, that maybe can help someone else.
In summary, create a partial where you put the call to will_paginate helper inside a div, and after your ajax request, just render this partial again. For instance:
The _pagination.html.erb:
<div id="paginate">
<%= will_paginate #results %>
<div>
The your_template.js.erb (where #results should be available):
$('#paginate').html('j(render "pagination.html.erb")');
That should be enough.

Resources