I have 3 link i menu. And I post their ID when link is clicked:
Fiddle: Fiddle
html:
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active" id="top_picks">Top Picks<sup>beta</sup></li>
<li>Popular<sup>beta</sup></li>
<li>Friends analysis</li>
</ul>
<p class="custom-alert">Article changes everyday! come back for more fun......</p>
</div>
</div>
<div class="articleContent">This content changes when link is clicked</div>
JS:
$(function () {
$(".menu-bar li a").click(function () {
var category = $(this).attr('id');
$(".active").removeClass("active");
$(this).parent().addClass("active");
//$('label').css('color', selText);
// When user clicks o "top picks" then it does not post category to ivite_db.php
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"link_menu": category},
success: function(data) {
$(".articleContent").html(data);
}
});
});
});
code works fine when popular and analysis link is clicked. But when top_picks link is clicked, it does ot post the category?
what is wrong with it?
You should have the ID in the a element, not the li, try this:
<li class="active"><a href="#" id="top_picks">
Fiddle
Related
I have a ajax data-attribute based tab code. Tabs content loads with ajax from PHP code by data-attribute. How I can set fade in/out effect on tabs content? I tried to do, but I'm not succeed.
PHP Code: https://ideone.com/ZMmk6f
$(document).ready(function() {
$("#tab-entry").load('index.php', {
tab: 1
});
$("#tab-entry").promise().done(function() {
$("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
$(".tab-button").click(function() {
var tab = $(this).attr("data-tab");
var dl = $("#tab-entry").attr("data-load");
if (tab !== dl) {
$(this).parent("li").parent("ul").find(".active").removeClass("active");
$(this).parent("li").addClass("active");
$("#tab-entry").each(function() {
$(this).attr("data-load", tab).hide('normal').load('index.php', {
tab: tab
}).next("#loading").delay(500).show();
});
$("#tab-entry").promise().done(function() {
$("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab-header0">
<ul id="tab-header">
<li class="active">
<a class="tab-button" data-tab="1">1st Tab</a>
</li>
<li>
<a class="tab-button" data-tab="2">2nd Tab</a>
</li>
<li>
<a class="tab-button" data-tab="3">3rd Tab</a>
</li>
<li>
<a class="tab-button" data-tab="4">4th Tab</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab-entry" style="display:none" data-load="1"></div>
<div id="loading">Load ... </div>
</div>
I think this is what you are trying to do. I have notated and given a JSFiddle for reference. Substitute your page names and such in the ajax:
$(document).ready(function() {
function doAjax(content)
{
$.ajax({
// Send to
'url': 'index.php',
'data':{
'html': content
},
'method':'post',
'success':function(response) {
// On done, fade out the current content
$('#loading').fadeOut('slow',function() {
// On done, fade in new content
$(this).html(response).fadeIn('slow');
});
}
});
}
// Load first content
doAjax($('.active').find('a').data('tab'));
// Onclick of the tab
$(this).on('click','.tab-button',function(){
// Remove the instance of active
$('.active').removeClass('active');
// Traverse and add active
$(this).parents('li').addClass('active');
// Load the ajax for this tab
doAjax($(this).data('tab'));
});
});
JSFiddle Example.
I am trying to set active tab for bootstrap 3 tabs after fetching the view from an ajax call but Its not working.
The view is something like this:
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption">
<i class="icon-globe font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">TODAY</span>
</div>
<ul id="tab" class="nav nav-tabs">
<li class="active">
Collections
</li>
<li>
Activities
</li>
</ul>
</div>
<div class="portlet-body">
<!--BEGIN TABS-->
<div class="tab-content">
<div class="tab-pane active" id="tab_1_1">
And here is the script:
<script type="text/javascript">
function load_page()
{
$.ajax(
{
url: 'notification_table/',
type: 'GET',
dataType: 'html',
}).done(
function(data)
{
$('#home_view').html(data);
}
);
$('.nav-tabs a[href="#tab_1_2"]').tab('show');
}
window.onload = function ()
{
load_page();
setInterval(function () {
load_page(); }, 5000);
}
</script>
As you can see that I tried doing $('.nav-tabs a[href="#tab_1_2"]').tab('show'); and I also tried $('#tab a[href="#tab_1_2"]').tab('show'); but both are not working.
What am I doing wrong here?
Try to use class="active" only in li not in anchor tag, almost everything right.
<li class="active">
Collections
</li>
I think that you may look for "jQuery doesn't work after the content is loaded via AJAX".
jQuery doesn't work after content is loaded via AJAX
I fixed my code before but I forget what I did.
I know this is a duplicate question. But I don't find a good solution to my problem.
I created a JSP page with some tabs. I want to reload the contents of a tab when the user clicks on the tab.
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li><a href="#fromDB" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="#fromFile" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="#email" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
What should be my script?
$('#tab-id-selector').click(function() {
$.ajax({
type:'POST',
url: 'targetUrl',
data: {
'foo': 'bar' //request parameters,In your case may be the tab ID to recognize on the server side that which tab pressed
},
success: function(response) {
//handle the data here ,means set the data where you want
}
});
});
http://api.jquery.com/jQuery.ajax/
Why do you need to reload the content when clicking on the tabs?
Isn't it enough to load the content at request?
$("tab selector").click(function(){
//do ajax-request to fetch data
$.ajax({
url: "/url/to/your/data",
type: "GET",
contentType: "application/json; charset=UTF8",
success: (function (data) {
//load your tab with your new data
}),
error: (function (data) {
})
});
});
Use jQuery to fetch data (using AJAX). I guess you already using jQuery UI.
I assume you want to load content from HTML file?
HTML
<div id="tabs">
<ul>
<li>Data Collector</li>
<li>Data Load</li>
<li>Data Load</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
JavaScript - init like this
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {
var myData = {
previousTabSelection: 5 // read previous tab data ...
};
$.get('/url/to/your/content.html', myData).done(function(contentHtml){
ui.newPanel.html(contentHtml);
});
// or without params
if(myData.previousTabSelection === 5 ){
ui.newPanel.load('/url/to/your/content.html');
}
}
});
I'm new to the twitter bootstrap. Using there navigation menus . I'm trying to set active class to selected menu.
my menu is -
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active">Home</li>
<li>Project</li>
<li>Customer</li>
<li>Staff</li>
<li id="broker">Broker</li>
<li>Sale</li>
</ul>
</div>
I tried following thing after googling on this that i have to set active class on each page from menu like as--
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
but problem for above is that i set home menu selected by default. Then it always get selected. Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?
After executing application my menu looks -
after clicking on other menu item i get following result-
And i added following scripts on Index view and Broker view ---
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
<script>
$(document).ready(function () {
$('#broker').addClass('active');
});
</script>
respectively.
You can use this JavaScript\jQuery code:
// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
It'll set the <a>'s parent <li> and the <li>'s parent <ul> as active.
A simple solution that works!
Original source:
Bootstrap add active class to li
it is a workaround. try
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active">Home</li>
<li>Project</li>
<li>Customer</li>
<li>Staff</li>
<li id="demo">Broker</li>
<li id='sale'>Sale</li>
</ul>
</div>
and on each page js add
$(document).ready(function () {
$(".nav li").removeClass("active");//this will remove the active class from
//previously active menu item
$('#home').addClass('active');
//for demo
//$('#demo').addClass('active');
//for sale
//$('#sale').addClass('active');
});
I had the same problem... solved it by adding the code shown below to the Into "$(document).ready" part of my "functions.js" file which is included in every page footer. It's pretty simple. It gets the full current URL of the displayed page and compares it to the full anchor href URL. If they are the same, set anchor (li) parent as active. And do this only if anchor href value is not "#", then the bootstrap will solve it.
$(document).ready(function () {
$(function(){
var current_page_URL = location.href;
$( "a" ).each(function() {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
}); }); });
For single-page sites where the menu items simply jump down to other sections of the page, this simple solution works for me:
$('.nav li').on('click', function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
You could add a diffrent class onto the BODY tag on each page e.g. on the homepage you could have this:
<body class="nav-1-on">
Then this css:
.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
// set your styles here
}
The NAV element:
<ul>
<li class="nav-1">Home</li>
<li class="nav-2">Services</li>
<li class="nav-3">About</li>
<li class="nav-4">Contact</li>
</ul>
#
Alternatively you could place a class on the BODY on each page and then grab that via jQuery and add the .active class to the correct nav item based on that tag.
<div class="nav-collapse">
<ul class="nav">
<li class="home">Home</li>
<li class="Project">Project</li>
<li class="Customer">Customer</li>
<li class="Staff">Staff</li>
<li class="Broker">Broker</li>
<li class="Sale">Sale</li>
</ul>
</div>
then for each page you add this:
//home
$(document).ready(function () {
$('.home').addClass('active');
});
//Project page
$(document).ready(function () {
$('.Project').addClass('active');
});
//Customer page
$(document).ready(function () {
$('.Customer').addClass('active');
});
//staff page
$(document).ready(function () {
$('.Staff').addClass('active');
});
<div class="nav-collapse">
<ul class="nav">
<li class="home">Home</li>
<li class="Project">Project</li>
<li class="Customer">Customer</li>
<li class="Staff">Staff</li>
<li class="Broker">Broker</li>
<li class="Sale">Sale</li>
</ul>
</div>
$('ul.nav>li.home>a').click(); // first. same to all the other options changing the li class name
For single page sites, the following is what I used. It not only sets the active element based on what's been clicked but it also checks for a hash value within the URL location on initial page load.
$(document).ready(function () {
var removeActive = function() {
$( "nav a" ).parents( "li, ul" ).removeClass("active");
};
$( ".nav li" ).click(function() {
removeActive();
$(this).addClass( "active" );
});
removeActive();
$( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );
});
For those using Codeigniter, add this below your sidebar menu,
<script>
$(document).ready(function () {
$(".nav li").removeClass("active");
var currentUrl = "<?php echo current_url(); ?>";
$('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
});
</script>
(function (window) {
bs3Utils = {}
bs3Utils.nav = {
activeTab: function (tabId) {
/// <summary>
/// 设置需要展现的tab
/// </summary>
/// <param name="tabId"></param>
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
}
}
window.bs3Utils = bs3Utils;
})(window);
example:
var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
bs3Utils.nav.activeTab(_actvieTab);
<ul class="nav nav-tabs">
<li class="active">
箱-单灯节点
</li>
<li>
箱-灯组节点
</li>
</ul>
$( ".nav li" ).click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
check this out.
I am using Flask Bootstrap.
My solution is a little bit simpler because my template already receives the option or choice as a parameter from Flask.
var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";
First line, js code gets the element. So, you should identify each of the elements with a id. I'll show an example below.
Second line, you add the class active.
You can see html ids below.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
<h2>Speed</h2>
</a>
</li>
<li>
<a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
<h2>Life</h2>
</a>
</li>
</ul>
</div>
I just added a custom class to the ul section named target-active
<ul class="nav navbar-nav target-active">
<li>HOME</li>
<li>FIND A TRUCK</li>
<li>OUR SERVICES</li>
<li>ABOUT US</li>
</ul>
If each li tags click get a new page from different place or same place, no need to add jquery removeClass function.
Add simple one line jquery code to each page to get your desired result
1st link page
$(function(){
$(".target-active").find("[href='/']").parent().addClass("active");
});
2nd link page
$(function(){
$(".target-active").find("[href=find-truck]").parent().addClass("active");
});
3rd link page
$(function(){
$(".target-active").find("[href=our-service]").parent().addClass("active");
});
4th link page
$(function(){
$(".target-active").find("[href=about-us]").parent().addClass("active");
});
I've created 3 links all with hrefs that link to pages in the root of my site, Ive then created a click event that when fired uses ajax to load the hrefs appropriate page. My problem is that in doing this my url remains the same. How can I append the href value to the url?
Sample of my code:
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
$(document).ready(function() {
$('#nav li a').click(function(e) {
var href = $(this).attr('href');
$.ajax({
url : href,
method : 'get',
success : function(data) {
$('#content').html(data);
console.log('complete');
}
});
e.preventDefault();
});
All advise welcome :)
Thanks
$(function() {
$('#nav li a').click(function(e) {
e.preventDefault();
$('#content').load(this.href);
});
});
i'm assuming you mean you want to append it onto your current page URL
in which case, you should be able to do this:
$.ajax({
url : window.location.href + "/" + href,
method : 'get',
success : function(data) {
$('#content').html(data);
console.log('complete');
}
});
EDIT:
once you get the ajax page, you can access the elements from within it. for example, if you have a div on your page that you are getting, you can select it in your success function. try this:
success : function(data) {
var $selectedElement = $(data).find("#SELECTYOURELEMENT");
$('#content').html($selectedElement);
// or you can append the element to your content if you would prefer that
console.log('complete');
}
The jquery address plugin is very easy to use:
http://www.asual.com/jquery/address/
and the history plugin is also useful for things like what you want as well as handling use of back button and such in an ajax site.
http://tkyk.github.com/jquery-history-plugin/
I've created 3 links all with hrefs that link to pages in the root of my site, Ive then created a click event that when fired uses ajax to load the hrefs appropriate page.but page doesn't load.
my html sample code
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" id="nav">
<li class="active">
<a href="tab1.html" data-toggle="tab" >Apply Leaves</a>
</li>
<li>
<a href="tab2.html" data-toggle="tab" >My Leaves</a>
</li>
<li>
<a href="tab3.html" data-toggle="tab" >Leave Record</a>
</li>
</ul>
<div class="tab-content" id="ajax-content">
</div>
and my jquery code
$(document).ready(function() {
$("#nav li a").click(function() {
$("#ajax-content").empty().append("<div id='loading'><img src='../static/js/ajax-loader.gif' alt='Loading' /></div>");
$("#nav li a").removeClass('active');
$(this).addClass('active');
$.ajax({ url: this.href, success: function(html) {
("#ajax-content").empty().append(html);
alert(this.href);
}
});
return false;
});
});