store the current tabs after postback - javascript

I am creating an application where i want to store the current value of tabs during postback. I want to store the current value of tab using hidden variable.
what i doing wrong?
This is my jquery code:
$(document).ready(function () {
$('ul.tabs').each(function () {
tab active.
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
});
This my html Code:
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>

I guess you are trying to append the tabs href to url, in that case use the following code rather than handling the click event on each tab.
$('.tabs').tabs({
activate: function(event, ui) {
window.location.href = window.location.href.toString().split('#')[0] + ui.newTab.find('a').attr('href');
}
});

If you postback from a control in one of the tabs, your server-side code will know what tab you came from, yes? If you want the postback to return to the same tab, set your hidden field's .Value to the appropriate index with the handler code, and have this in your jQuery ready function:
$("#tabs").tabs({ active: <%= hfLastTab.Value %> });

Related

Showing content based on a URL Anchors

I have links that lead to another page with different contents.
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This the code on the /services page:
<div class="menu-content item-1">Content item 1</div>
<div class="menu-content item-2">Content item 2</div>
<div class="menu-content item-3">Content item 3</div>
I found the bellow JS, but it works only when clicking on the anchor link on the same page.
var $content = $('.menu-content');
function showContent(type) {
$content.hide().filter('.' + type).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
I need is to display only the content related to the anchor link when load the /services page.
Once you change the page on websites ( not single page apps ) , javascript ' forgets ' what you have done before.
So for your logic to work it can't be inside a click event which happened on another page. It should be inside a document.ready or window.onload function.
You can use location.hash to get the # anchor from your url.
In the below example i changed the location.hash value to show you that the solution works. You can skip that first line and just use the next ones.
$(document).ready(function() {
location.hash = "item1"; // skip this
const myHash = location.hash.substr(1)
$('.menu-content').hide().filter(`.${myHash}`).show();
// or use : $('.menu-content').not(`.${myHash}`).hide()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-content item1">Item 1</div>
<div class="menu-content item2">Item 2</div>

How to show specific div's from li-objects?

I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html
it should work too-
$("#1").css("display","block");
$("#1").click("show");
should be:
$("#1").show();
Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle
as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

How do you find a div with a variable class?

HTML:
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>
JQUERY:
$('a').on('click', function(e) {
$('#somediv').html($('."this.id"').text());
e.preventDefault();
});
Basically what I want to do is, when I click one of the links in the list, it replaces the contents of "somediv" with the contents of a div that has the class that matches the id of the link.
In other words, when I click link id "a1", I want it to display class "a1" in "somediv". I just don't know the syntax for how to call that in the second line of the jquery.
Do this
$("#a1").click(function() {
var divClass = $(this).attr("id");
$("#somediv").empty().append($("."+divClass).html());
});
http://jsfiddle.net/vD4hA/
Only issue was with your concatination.
You don't need to use $(this).attr('id') since this inside the context is the DOM element and id or any attribute can be retrieved directly as object properties.
$('a').on('click', function(e) {
$('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.'
//but it is safe to use as you are not selecting based on id(unique) but a class which
//can be in multiple places.
});
$('a').click(function (e) {
$('#somediv').html($('.' + $(this).attr('id'))).text();
e.preventDefault();
});
jsFiddle example
I suggest you modify slightly your code to accept the new HTML5 specifications. More specifically, use the aria-owns which is exactly what you're doing here. See demo.
HTML
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div style="display:none;">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
JS
$("a[aria-owns]").on("click", function(e) {
$("#somediv").empty()
.append($("#" + $(this).attr("aria-owns")).clone());
return e.preventDefault(), false;
});

Jquery tabs control - how to select tab

I have following html to show tabs control of jquery:
<div id="tabs" class="news1">
<ul>
<li>Track</li>
<li>History</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
</div>
On page load, following script is written:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
On page load, tab-1 is selected by default. How can I Programmatically select tab-2 using JavaScript or jQuery?
You can specify the active option, which must be set to the zero-based index of the tab you want to activate:
$("#tabs").tabs({
active: 1
});
$("selector").tabs("option", {
"selected": 1,
"disabled": [0]
});​

Problem with simple jQuery Tabs

I have a very simple jquery tabs functions that looks like this :
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
and the HTML for it is :
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab2" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab3" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab4" class="tab_content">
<h2>Content</h2>
</div>
</div>
</div>
What im trying to do here is add another tab navigation, so bacically repat the ul tag with content in it but different class so I can have something like this :
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<ul class="markers">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
..and whenever I click on any of the list it will affect in other group.
Any help much appreciaated.
Thank you for your help in advance.
Dom
you sholud use a class name or id or an element to use fadein() like this
$("#id").fadeIn("slow");
but in your code you are trying to use href attribute .
here.................
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
i think you can't use like that
http://api.jquery.com/fadeIn/
try to put a class for <a> tag a grab that tag using the class identifier
as
var activeTab = $(this).find("a.classname").attr("href");
it will only affect the tags whose class is matched with the one you specified

Categories

Resources