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.
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 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.
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.
I am new to jquery and created 10 tabs using :
$(document).ready(function() {
$('#tabs').tabs();
});
Then I used <li>a href="#tabs-1"> MYTAB </a> </li> htlm code for my tabs.
I managed to create static tabs and now I can go back and forth to see the content of my tabs.
The problem I am facing is each tab contains a seperate link to a different website where users need to enter their passwords/usernames. Some of my users werent able to do that from their phones etc.
I then changed my design to ajax and it works fine but page refreshes each time (users do not want that).
<li>a href="url"> MYTAB </a> </li>
What is the best solution to get around from this?
Thanks
My script:
<!DOCTYPE html>
<html>
<head>
<META name="WebPartPageExpansion" content="full">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li>site1</li>
<li>site2</li>
<li>site3</li>
<li>site4</li>
</ul>
<div id="tabs-1">
<iframe src="url1" width="100%" height="500">
<p>Your browser does not support iframes.</p> </iframe>
</div>
<div id="tabs-2">
<iframe src="url2" width="100%" height="500">
<p>Your browser does not support iframes.</p></iframe>
</div>
<div id="tabs-3">
<iframe src="url3" width="100%" height="500">
<p>Your browser does not support iframes.</p></iframe>
</div>
<div id="tabs-4">
<iframe src="url4">
<p>Your browser does not support iframes.</p></iframe>
</div>
</div>
</body>
</html>
Why not just use the inbuilt Ajax tabs?
<meta charset="utf-8">
<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>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3 (slow)</li>
<li>Tab 4 (broken)</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 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 -->
<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->