I have a list of items in a left column, that when I click on one, will refresh the content of the right column. This works great.
Problem is, I have bootstrap tabs loading in the content on the right. When they come in after the DOM is loaded, I no longer have access to the 'show' event. My code works great when the tabs are loaded at the same time as the rest of the dom, but when loaded after, I am guessing the events aren't available since these were added after it was done loading.
I've been pouring over these forums and the rest of the net for an idea on how to fix this, and I'm sure one of you rockstars has come acrossed this and provided a solution.
For the sake of illustration, here is some sample code that I am trying to get working:
<ul id="tabMenu" style="background: #D1D2D4;" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#t-5">Content</a></li>
<li><a data-toggle="tab" href="#t-9">Project</a></li>
<li><a data-toggle="tab" href="#t-6">SEO</a></li>
<li><a data-toggle="tab" href="#t-7">Image</a></li>
<li><a data-toggle="tab" href="#t-10">Workflow</a></li>
</ul>
$('a[data-toggle="tab"]').on('show', function (e) {
console.log(e.target); // activated tab
});
When I run this when the tabs are loaded with the page, it works great. But, when I run it and these are loaded after (like the .load event I mentioned), the show event doesn't seem to fire.
Can someone tell me either:
a.) If I am doing something wrong, and what I can do to fix it
b.) Let me know if delegate (or some other method) would fix this, and provide an example syntax I could try?
I greatly appreciate any help the community can provide.
Try it:
$(function(){
$('a[data-toggle="tab"]').on('show', function (e) {
console.log(e.target); // activated tab
});
})
But if your doing with dynamic content. try it:
function bindtabs(){
$('a[data-toggle="tab"]').on('show', function (e) {
console.log(e.target); // activated tab
});
}
And after you create your tabs you call it:
//creating tabs code here
bindtabs();
Try using the deferred syntax of on instead:
$(document).on('show', 'a[data-toggle="tab"]' function (e) {
console.log(e.target); // activated tab
});
It should fire on elements that are added later.
Related
Ok, So I've ade a static version of a piece of functionality and it works fine. When a user hovers over a div the content scrolls into it over a picture.
Now I needed multiple of these, accessible via tabs. To save loading time the content in these tabs (copies of the static version) are brought in with a .get from another html file.
The structure of my separate html files is the same as the default tab which is working, I hover over the one stats there on page load and it works, once i change tab, the old content is faded out, and the new content is faded i correctly. All the class names are the same as is the structure, but when I hover over these elements that were brought in none of it runs.
Do I have to do something special for .hover to work on content that's dynamically brought in via .get after the page has loaded?
Yes, you have to instantiate the hover after callback of the get method.
You'll need to use event delegation. Read up on the "Direct and Delegated Events" section here.
Use something like this:
$("#tabs_content_container").on({
mouseenter: function (e) {
},
mouseleave: function (e) {
}
}, ".target-class");
where your HTML structure is something like:
<div id="tabs_container">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs_content_container">
</div>
</div>
and your code already is doing something like:
$("#tabs_container").on("click", function () {
$.get($(this).attr("href"), function (data) {
$("#tabs_content_container").html(data);
});
});
Reference:
http://api.jquery.com/on/#direct-and-delegated-events
I am using contextmenu.js (jQuery context menu plugin) for opening the context menu on right clicking of div. But somehow only default menu is opening. I am not able to locate the exact problem.
On debugging, it is showing that on its right click it is attaching the context menu to div. But when I right click div, default menu opens.
I know I am providing very limited information but any suggestion and help will be appreciable.
I think you should do something like this, if that is your element that should get the menu
<div id="item-1">This should have a menu</div>
Then your javascript should look like this:
$(document).ready( function() {
$('#item-1').contextMenu({
menue: 'menueName'
},
function(action, el, pos) {
// do sth when the menu was clicked
alert('Action ' + action + ' was clicked on ' + $(el).attr('id'));
});
});
The menue itselfe should defined in a list like:
<ul id="#menueName" class="contextMenu">
<li class="action1">
<a href="#action1>Action 1</a>
</li>
<li class="action1">
<a href="#action2>Action 2</a>
</li>
</ul>
Also make sure you have jQuery 1.3 or above included in your page.
I had the same problem.
Replacing if(jQuery)( function() { at the beginning of jquery.contextMenu.js with (function($, undefined){ fixed the problem. I hope that helps.
This is driving me absolutely insane. I am building a very customized slider jQuery plugin for a project. One of my requirements is that users must be able to deep link into a specific slide. So naturally all of my slides have hash tags and the navigation links have corresponding hashtags. My problem is that the default functionality of the hash tag links are firing on top of my sliding animation triggered by javascript. That is, instead of sliding to slide 4 it jumps immediately to slide 4 and then animates to slide 8. This is despite using every trick I can think of to prevent the default functionality. Here is the snippet of code in question.
$(slider.nav).bind( 'click', function(event) {
event.preventDefault();
if( !$(this).hasClass('active') ) {
var target = slider.nav.index( $(this) );
slider.animate( target );
}
});
As you can see here I have used event.preventDefault(). I have also tried returning false. No luck whatsoever. Any ideas?
It's hard to say without seeing the HTML. But if it's the way I imagine it, you don't need to keep href="#" in a link if it's not going anywhere. You can use jQuery to just get the next slide, or get slide number 7 without relying on href="#" links.
Instead, you can do something like:
<ul id="slideshow">
<li id="slide_1">Slide 1</li>
<li id="slide_2">Slide 2</li>
<li id="slide_3">Slide 3</li>
</ul>
<a class="slide_nav" data-index="1">1</a>
<a class="slide_nav" data-index="2">2</a>
<a class="slide_nav" data-index="3">3</a>
<a class="slide_nav" data-index="4">4</a>
And in the JS, do something like:
$('.slide_nav').click(function() {
var slides = $('#slideshow li'); // get all slides
var target_id = $(this).data('id') - 1; // Get the current ID and then subtract 1 (index starts at 0)
slider.animate(slides[target_id]);
});
Anyway, that's more like a pseudo-example than anything else, and I'm not sure that would work as-is, but the code should hopefully point you in a direction that would avoid using href="#" and thus avoid the problem you're having now.
Good luck.
Oh jeeze. I'm really sorry. I've wasted everyone's time.
Apparently another developer who was working on the site had added some javascript elsewhere roughly to the effect of
if( window.location.hash ) {
window.location = window.location.hash;
}
No idea why they would add such a thing. Sorry!
so i am a begginer and i really need help
so i wrote this function down here;
the objective was to take as parameters an element name , a div tag selector and a php file address,
function navigation($nav,$container,$link)
{
$($nav).click(function(){
$($container).slideUp(500,function(e){
$(this).append("<span>");
$(this).load($link);
});
});
{
$($container).ajaxComplete(function(){
$(this).slideDown(500);
});
}
{
$($container).slideUp(500);
}
}
the usage is simple
navigation("#home",".content","home.php");
navigation("#about",".content","about.php");
navigation("#store",".content","right.php");
the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;
now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active
and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do
any one of pro's have any idea ???
I can help but it's going to be quite a rewrite.
Firstly, give all your navigation items a class. Inside the nav items (I don't know if they're div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:
<ul id="navigation">
<li class="nav">
<a src="home.php">HOME</a>
</li>
<li class="nav">
<a src="about.php">ABOUT</a>
</li>
<li class="nav">
<a src="right.php">RIGHT</a>
</li>
</ul>
Then use jQuery's onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.
$(function()
{
$('.nav').click(function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
$('.content').slideUp(500).load($(this).children('a').attr('src'),
null,
function(){$(this).slideDown(500);}
);
return false;
});
});
Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).
There's several approaches to making a link unclickable. One would be to let the click-event unbind itself:
$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});
Another would be to manipulate its CSS to hide the element (set display to none).
As for the second part of your question, i don't really get what you want to do. If you want to have a popout under the link, that activates on hover, you can see here how that could be achieved by using an <ul> and its :hover event
http://jsfiddle.net/D3AP2/
I have a (parent) window containing JQuery tabs:
<div id="tabs">
<ul class="tabHeader">
<li><a href="?ctrl=doSomething" title="#tabs-something">
Awesome function</a></li>
<li><a href="?ctrl=showSettings" title="#tabs-showSettings">
Settings</a></li>
</ul>
</div>
Within #tabs-showSettings, I require in certain cases a new window, which I open using the following code:
window.open('?control=showSetting&server='+server,
'serverSettings','width=400');
That works fine. But within this window, I require a function to submit the entered data (works correctly), refresh the div within the parent (fails) and close the child window (works). That's what I tried:
// #1: the following would refresh the div within the child ;(
parent.$('div#tabs-showSettings').load('?control=showSettings');
// #2: the following doesn't seem to have any effect
window.opener.$('div#tabs-showSettings').load('?control=showSettings');
Please tell me what I'm doing wrong. Many, many thanks!
Solution:
$("div#tabs-showSettings", window.opener.document).load(
"?control=showSettings", function(){
window.close();
});
Try parent as the context:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings");
Update:
Some of the comments following suggested the need to have the window close after the updates are done - that should be handled in the callback:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings", function() { window.close(); });