Why parents tabsshow-event triggered by childtab? - javascript

I have a tab (called firsttab) with in his content another tab (called childtab). We bind the tabshow-event to the firsttab.
If we click to one of the tabs in "firsttab" all work fine (Tab 1 - Tab 5).
If we click to one of the "childtab" tabs (Tab 1.1 - Tab 1.3) the tabshow-event who are bind to the "firsttab" is triggerd.
Testcase: http://jsfiddle.net/bM8Wh/
HTML:
<div id="firsttab">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
<div id="firsttab_1">
<div id="childtab">
<ul>
<li>Tab 1.1</li>
<li>Tab 1.2</li>
<li>Tab 1.3</li>
</ul>
<div id="childtab_1">Tab 1.1</div>
<div id="childtab_2">Tab 1.2</div>
<div id="childtab_3">Tab 1.3</div>
</div>
</div>
<div id="firsttab_2">Tab 2</div>
<div id="firsttab_3">Tab 3</div>
<div id="firsttab_4">Tab 4</div>
<div id="firsttab_5">Tab 5</div>
</div>
JavaScript:
$("#firsttab, #childtab").tabs();
$("#firsttab").bind('tabsshow', function(event, ui) { funcX(ui.index); });
function funcX(idx){
alert('triggerd - index: ' + idx);
}
I don't understand why the tabsshow-event is triggered by the childtab because I bind this event to the firsttab.
The answer of my jQuery-ticked was:
"Events bubble; check the target."
but I don't understand what it means.
I handle the problem by change my tabsshow-event-handler to:
$("#tabs").bind('tabsshow',
function(event, ui) {
if ((/#(.*?)$/im).exec(ui.tab.hash)[1] == this.id)
funcX(ui.index);
});
but I will understand where are the problem.

By default, event's bubble, meaning that an event in a child element goes up to all parent elements unless you stop it. So for example a click anywhere on the page is a click event on that element, it's parent, and so on up until document. This behavior also happens with any custom jQuery events like tabsshow, but if you don't want it you can stop the event from bubbling using event.stopPropagation(), like this:
$("#childtab").bind('tabsshow', function(event, ui) {
event.stopPropagation();
});
This stops the event from firing on #firsttab because it just doesn't bubble up there anymore. You can try your sample with this fix here.

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>

store the current tabs after postback

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 %> });

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;
});

Invoking YUI's delegate method using jQuery

I have YUI2's delegate defined as
<div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>
<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>
</ul>
</div>
<script>
var foo = function() {
alert("clicked");
};
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
Event.delegate("container", "click", foo, "li");
// jQuery code
$("#li-5").click();
</script>
When I click on the li, alert shown, that is expected. But why the jQuery click() method does not work? Or what is the correct way to simulate the click() delegate?
I have prepare a Live URL for testing: http://jsfiddle.net/ngRvw/
Updates:
I need the alert automatically execute like this one: http://jsfiddle.net/ngRvw/3/ But I need to preserve the original YUI's delegate

Categories

Resources