I have written a simple CMS and output some text as html via
<%= raw #page.body %>
Since the CMS is for my own usage, I want to be able to also enter rails code in the body text. When entering it there, I get something like this as output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. <%= #foo
%>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
but I want the rails code <%= #foo %> to render and not be plain text.
Related
I would like to use Bootstrap's media object, however, it doesn't seem to work.
If I copy-paste their example code (or any other examples, e.g. from w3school's tutorial) the media body content is never positioned alongside the image, but it always goes under it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
media body content under the image
The interesting thing is that even if I try a similar code from any code playgrounds (where they work properly) I have the same issue...
Does anyone have similar experiences with Bootstrap's media object??
What am I doing wrong...?
Thanks.
(PS: Bootstrap is loaded = CSS linked, JS script tag included.)
Your are using Bootstrap v5.2.1(included CSS + JS), but your are try use the .media element that only available on Bootstrap v4.
In Bootstrap v5.2, You can use .row and .col to implement it.
<div class="row">
<div class="col-3"><img class="mr-3" src="..." alt="Generic placeholder image"></div>
<div class="col-9">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
I have a text.
For example:
"<p> Lorem ipsum dolor sit amet </p> <video>VIDEO_CODE</video> <p> consectetur adipiscing elit </p>".
Now I need to replace the "video" tag with another one (eg iframe).
Then my result should be:
"<p> Lorem ipsum dolor sit amet </p> <iframe type="text/html" src="https://www.youtube.com/embed/VIDEO_CODE frameborder="0"></iframe> <p> consectetur adipiscing elit </p>"
I am a newbie to Ruby on rails. Someone, can you help me? Can also suggest or give me references link. Thank you very much!
If you are using Rails then you should be able to use the Nokogiri gem.
html_string = "<p> Lorem ipsum dolor sit amet </p> <video>VIDEO_CODE</video> <p> consectetur adipiscing elit </p>"
fragment = Nokogiri::HTML.fragment(html_string)
fragment.css('video').each do |video|
video_code = video.content # add `.strip` for possible whitespace
iframe = fragment.document.create_element('iframe',
type: 'text/html',
src: "https://www.youtube.com/embed/#{video_code}",
frameborder: 0,
)
video.swap(iframe) # or `.replace(iframe)`
end
puts fragment
# <p> Lorem ipsum dolor sit amet </p> <iframe type="text/html" src="https://www.youtube.com/embed/VIDEO_CODE" frameborder="0"></iframe> <p> consectetur adipiscing elit </p>
#=> nil
If you know there is always 1 video element use .at_css('video') instead, which is the same as .css('video').first. To turn the fragment back into a string you can call .to_html or .to_s on it.
You can find most operations you need to know to work with Nokogiri/HTML on the cheat sheet.
I have a production and development rails servers, I am using HAML, and when I view page source on the production server the generated html looks unformatted like this:
<div class='span4'>
<div class='info-bullet'>
<i class='icon-tags'></i>
<h5>Responsive Template</h5>
<p>Vestibulum placerat purus sed nunc tincidunt ultrices et. Vivamus pharetra aliquet nisi non pretium.</p>
</div>
</div>
However when I view the same page source on my local server the code is properly formatted and looks like this:
<div class='span4'>
<div class='info-bullet'>
<i class='icon-tags'></i>
<h5>Responsive Template</h5>
<p>Vestibulum placerat purus sed nunc tincidunt ultrices et. Vivamus pharetra aliquet nisi non pretium.</p>
</div>
</div>
Is there any setting to turn formatting on?
site url: http://soziev.com/theme_venera/index
This is normal behaviour take a look at the FAQ:
http://haml.info/docs/yardoc/file.FAQ.html#q-indentation-in-production
I want a popup window to enable when we click a link, where the popup should contain tabs. Is any UI or plugin available ready-made in jQuery? As for jQuery, I want to know if anything suits my requirement. Please let me know. Thanks in advance.
Use jQueryUI. It has everything you need.
As the website says:
jQuery UI is a curated set of user interface interactions, effects,
widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications or you
just need to add a date picker to a form control, jQuery UI is the
perfect choice.
It has Popups
It has Tabs
EXAMPLE
An example of tabs within a popup
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ulla interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et tur potenti. Aliquam vulputbitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#dialog" ).dialog({ width: 600 });
});
</script>
jQuery modal can be a good choice. You can put any HTML inside modal.
Does anyone know where I can find some example code for implementing ajax tabs with jquery ui in Ruby on Rails 3? I'm unable to find anything I can't seem to get it to work based on examples I have found for form and comment processing. Mind you, I am very new to ruby on rails.
Based on the jquery ui tabs with ajax example from the jquery site, I have the following code:
simple controller - maps_controller.rb
def index
end
def test1
#test = "test string"
end
associated view - index.html.erb
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
<div class="demo">
<div id="tabs">
<ul>
<li>Preloaded</li>
<li><%= link_to "Test1" , test1_path %></li>
</ul>
<div id="content_area">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</div><!-- End demo -->
test1.html.erb
<%= #test %>
The ajax functionality seems to work. When clicking the test1 tab, the entire page in loaded into the div with the appropriate data. Obviously this isn't the functionality desired - I just want the test1.html.erb to show, not it rendered with application.html.erb.
I also have found various rails specific examples that use the convention of having a .js.erb file. (http://blog.bernatfarrero.com/jquery-and-rails-3-mini-tutorial/)
Any input on this would be great.
Put your javascript code in application.js file, include it in your view and you are good to go.
https://github.com/joliss/jquery-ui-rails
This makes it really easy to implement jquery-ui in ruby on rails.