I'm trying to print JSON data in a view in a 'pretty' human readable format. I have a controller:
def show
h = JSON.parse(RestClient.get("http://link_to_get_json"))
#json = JSON.pretty_generate(h)
end
and a simple view:
= #json
But all I see, when I load the page, is the same JSON I've got, not formatted. What do I do wrong?
JSON.pretty_generate inserts whitespace into the returned string.
If your'e dumping the string into an HTML document, all whitespace (such as newlines) is ignored, and rendered as a single space. In order to preserve whitespace, you need add a white-space: pre CSS style, or wrap the content in a <pre> tag.
I think you were using <p>. wrap it up in <pre>.
Related
I am rendering an ASCII map that looks like the following:.
I want the asterisk in the map, which represents a character, to be red. Right now this characters asterisk is being assigned to its location as follows:
def mark_character_coordinates
WORLD.terrain[#character.y_coordinate][#character.x_coordinate][0][0] = "*"
end
I want my characters location on the map (the asterisk) to render as red. My idea is to try to wrap the asterisk in a span and give it an id. Then go into my CSS and make ID color red. My problem is I am not sure how to insert ERB into the model and have it render as such in the view. After reading similar problems on stackoverflow, this is the closest I got:
def mark_character_coordinates
WORLD.terrain[#character.y_coordinate][#character.x_coordinate][0][0]
= ERB.new("<span>*</span>")
end
What should I do? How do I insert ERB into a variable in the model and have it render accordingly in the view?
The best and easiest way to do this is to use JQuery. First, put the ASCII map inside a div with id="ascii-map" in your template. Then switch to the front-end. Once the DOM is fully loaded, you can parse the ASCII map, look for the asterisk, and then wrap it in a span element that has red color defined for its font.
In your CSS:
.red-font {
color: red;
}
Then, some JQuery:
$(document).ready(function() {
var text = $('#ascii-map').html();
var textWithRed = text.replace("*", "<span class='red-font'>*</span>");
$('#ascii-map').html(textWithRed);
});
I test this and confirmed that it works.
Well... you're breaking MVC pretty badly, so that's one thing. Other than that though, do you need ERB for this? You're not embedding ruby at all. Why not just have it as a string?
i.e
def mark_character_coordinates
WORLD.terrain[#character.y_coordinate][#character.x_coordinate][0][0] = "<span>*</span>"
end
I have a heredoc string
html =<<EOF
<span>
Hello hello 123
</span>
<a>Link1</a>
<a>Link2Link2</a>
EOF
If I say puts html, it will give html as it is, meaning with new lines which is fine. If I call p html I'll get the html without line breaks.
However, what I really need to do is to convert this html into picture and it should have line breaks. Here is how I do that:
kit = IMGKit.new html, quality: 30
# using Magick::Image ......
# some code which is not important....
img.write("my_gif.gif")
It's almost fine except the fact that the result html, as I've already said, doesn't have line breaks, it has only one line:
<span>Hello hello 123</span><a>Link1</a><a>Link2Link2</a>
Of course, if I add <br /> tags, it all will be worked out. But I'm not able to do that for some reason, I want not to use <br /> and still have line breaks.
This is not the problem of IMGKit or Rmagic as I'm pretty sure.
So how do I achieve that?
I agree it is not a problem with IMGKit - it is doing what it is supposed to do - render the HTML. There is also nothing wrong with the heredoc, and nothing magical you can do with Ruby's representation of the HTML such that literal whitespace (spaces, tabs, newlines) in HTML source become visible when rendered.
The most common rendering of source whitespace by HTML viewers is that any length of pure whitespace (whether spaces, tabs, newlines or any combination) is rendered as a single space -> <- in the view. Additionally, whitespace between one element end and another starting is often completely ignored (although the rendering of the elements themselves may cause layout/spacing effects in the view).
You could, however, do something like this:
kit = IMGKit.new html.gsub(/\n/,"<br/>"), quality: 30
and have line breaks rendered without adding <br/> to your heredoc.
I have a chunk of code provided by Wistia to embed videos into a page. This source is embedable raw html and they include some ampersands in it directly. Of course my w3c validator yells at me all day long and with these in it I'm getting hundreds of errors like:
& did not start a character reference. (& probably should have been escaped as &.)
My view is in HAML so I'm assuming that I needed to escape the sequence, which I happily did with:
:escape
<object width="...
Upon doing this the video no longer loads as it has escaped the entire string with <object width=" ... etc.
How would one properly escape such sequences programmatically vs manually altering the inserted string each time a new update is made in Rails 3.1 with HAML?
You'll probably want to put your HTML into its own partial, then render it into a string and do a String#gsub on it.
Put your Wistia HTML into a partial called something like app/views/shared/_wistia.html
Then create a helper that looks like:
def embed_video(partial)
html = render_to_string(:partial => "shared/#{partial}")
html.gsub '&', '&'
end
And in your HAML, just put = embed_video 'wistia' wherever you want the video to be inserted.
I developing a blog and some really annoying stuff is happening with newline characters (\n). Everything works fine except if I make a post that contains pre tags my newline characters screw up the indentation.
So if I have code that looks like this
<pre>
<code>
some code some code
more code more code
</code>
</pre>
For some reason the newline characters that are saved in the db field with the post are causing whatever is inside the pre tag to be indented by a tab or two.
I have no idea why it's doing it, but if I do something like
string.gsub!(/\n/, "<br />")
The indentation is removed, so I know it has to do with the \n. But then my problem is that there are way too many line breaks and the format is then way off.
So then I tried to capture everything inside the pre tags with a method that looks like this
def remove_newlines(string)
regexp = /<pre>\s?(.*?)\s?<\/pre>/
code = regexp.match(string)
code[1].gsub!(/\n/, "<br />")
end
But I can't get that to work properly.
Anyone know how I can rid of this weird indentation problem, or any pointers on this?
Thanks!
It sounds like your template engine is auto-indenting the contents of the <pre> tags. Browsers render the whitespace inside <pre> tags as it is (and so they should, according to specs). This means that the whitespace at the beginning of each line inside the <pre> added by the template engine in order to make the HTML source more readable is rendered in the actual page as well, unlike whitespace most other places in HTML source.
The solution therefore depends on your templating language.
If you are using HAML:
HAML FAQ: How do I stop Haml from indenting the contents of my pre and textarea tags?
Hope this helps.
I have with RedCloth saved plain text in a form and converted it to HTML. For example, writing this in my form, and saving it, would make it display the exact same way I wrote it :
This sentence
gets inserted into it
proper html syntax
to preserve line breakage.
With this code :
def parse_code
self.text = RedCloth.new(text).to_html
end
And then I can redisplay it with this :
= raw post.text
But when I want to edit it, it it returns to me as :
<p>This sentence</p>
<p>gets inserted into it</p>
<p>proper html syntax</p>
<p>to preserve line breakage</p>
How can I make it, so that when I edit it, it looks the same way it did before I went and saved it ?
Thanks!
I would leave the textile code stored in textile and do the conversion to HTML only in the view:
= raw RedCloth.new(#post.text).to_html
Converting between textile and HTML does not feel to be a good practice. Your parse_code method seem that it caused your text to be converted to HTML.. and than stored to the Db.
However if you want to convert HTML to textile, maybe clothred is for you or read this blog.
Edit: Shoot! I misunderstood the question!
You'd assign that text area's value back to textile using ClothRed:
ClothRed.new(html).to_textile
Sorry!
If I understood you right, you are storing the HTML output in the database. Instead of doing that, store the raw Textile contents and then convert them to HTML when showing it to the user.