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 -->
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>
Question: In a Bootstrap Tabs panel, how can we display an MVC View page in the corresponding tab-content area?
Details: Following example (taken from here) works fine in my ASP.NET MVC Core project. But, using anchor tag helper I want to call an action method when user clicks on a tab; when I do that I get the following error. For example, I get this error when in tab Menu 1 I use asp-controller and asp-action attributes as follows. I know the error is related to href attribute that is related to the corresponding tab contents. Is there a workaround so we can still call an action method when a tab is clicked?:
Error:
Cannot override the 'href' attribute for <a>.
Error is on this line: <li><a data-toggle="tab" href="#menu1" asp-controller="myController asp-action="myAction">Menu 1</a></li>
Following works if anchor tag helper is not used:
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
What you need to do is to call #Html.RenderAction() inside the required tab content. Leave the href as they are, there purpose is only to show the corresponding tab based on tab id.
See the following Question:
Create controller for partial view in ASP.NET MVC
I followed the instructions written here - https://github.com/twbs/bootstrap-sass
But bootstrap seems to be not working.
I installed the gems needed, updated files written in the github documentation, and then in my application_layout,
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
it breaks the layout and the grids comes one under another.
I think the reason your bootstrap grid is not working in your browser is that your screen resolution might be too small. Since its small it requires the col-sm-4 class and you also forget a to close out the container. I've posted a fiddle https://jsfiddle.net/rvega20/pogfb4w9/
Also as mentioned before in order to use bootstrap-sass, one has to use the main syntax (as of Sass 3) which is known as "SCSS". So straight from the bootstrap documentation -->
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Then, remove all the //= require and //= require_tree statements from the file. Instead, use #import to import Sass files.
Do not use //= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
Require Bootstrap Javascripts in app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
bootstrap-sprockets and bootstrap should not both be included in application.js.
bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-sm-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4 col-sm-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4 col-sm-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
I'll try to guess what your problem is, but you haven't provided the necessary context code so it's impossible for anyone to answer you with any certainty.
I'm guessing you don't have that nested inside a row div.
Check your application.css file - it must be removed, and instead of it you must have application.css.scss file with contents:
#import "bootstrap-sprockets";
#import "bootstrap";
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.