Develop Reference

Triggering a Click event in jquery upon navigating to the page

I have the following navigation:
<ul id="chooseType" class="chooseType">
<li><a id="active" href="#" title="" class="active selected">Active</a></li>
<li><a id="inactive" href="#" title="" class="inactive">Inactive</a></li>
</ul>
With this script:
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$('#active').click(function(){
$('#active').addClass('selected');
$('#inactive').removeClass('selected');
$('#activeList').show();
$('#inactiveList').hide();
});
$('#inactive').click(function(){
$('#active').removeClass('selected');
$('#inactive').addClass('selected');
$('#activeList').hide();
$('#inactiveList').removeClass('hidden');
$('#inactiveList').show();
});
});
/*]]>*/
</script>
I need to be able to navigate directly to the inactive view upon clicking a link on a separate page. How do I trigger the ('#inactive').click upon accessing the page from a link on a different page? The divs that are to be shown/hidden are not included for the sake of space and simplicity.
Edit: The missing }); unintentionally disappeared with some irrelevant code I removed for clarity's sake.

The cleanest way, IMO, is to pull the anonymous functions out of the .click() handlers, give them names, then bind the #inactive function to run on load as well as on .click(), like so:
$(document).ready(function() {
var active = function(){
$('#active').addClass('selected');
$('#inactive').removeClass('selected');
$('#activeList').show();
$('#inactiveList').hide();};
var inactive = function(){
$('#active').removeClass('selected');
$('#inactive').addClass('selected');
$('#activeList').hide();
$('#inactiveList').removeClass('hidden');
$('#inactiveList').show();};
$('#active').click(active);
$('#inactive').click(inactive);
inactive();
});

Provide a GET value to the page if you click on the link to the page from a specific location.
Let's say the following is your current anchor element from the specific location in question
Click me
Change it to
Click me
On the destination page, grab the GET value
$from_value = $_GET["from"];
Then look for the value in your JavaScript
var from_value = "<?php echo $from_value; ?>";
if(from_value != "" && from_value != null){
$('#active').removeClass('selected');
$('#inactive').addClass('selected');
$('#activeList').hide();
$('#inactiveList').removeClass('hidden');
$('#inactiveList').show();
}
If a GET value is provided, the JavaScript code in question is executed. If there is no GET value, nothing happens
I am assuming you are using PHP with this solution

Bootstrap tabs and delegation example

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.

jQuery .hover after getting content with .get

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

contextmenu is not opening on right clicking div

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.

Click event not processed when using prototype (with lowpro)

I have JS code that uses lowpro (prototype extension) to reorder a set of dynamically generated questions. So when I click a.move-up I want to move that element's parent up. And a.move-down suppose to move it down.
I'm using lowpro since the elements are generated after dom:loaded.
http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype
JS code:
document.observe('dom:loaded', function() {
Event.addBehavior( {
'a.move-up:click': function(event) {
alert('Moving up!')
//moveUp(this);
//event.stop();
},
'a.move-down:click': function(event) {
alert('Moving down!')
//moveDown(this);
//event.stop();
}
});
});
I have two links for each element (div.question) that allow that element to be moved up or down. However these click events don't get processed.
<div id="questions">
<div class="question">Q1 stuff
<a href="#" class="move-up" />Up</a>
<a href="#" class="move-down"/>Down</a>
</div>
<div class="question">Q2 stuff
<a href="#" class="move-up" />Up</a>
<a href="#" class="move-down"/>Down</a>
</div>
</div>
As part of debugging I've cut down the code to bare minimum, just trying to make sure event handling works. I don't even see the alert pop-up when I click the JS-backed links. So the "click" event isn't being handled properly.
What am I doing wrong???
Thank you!

After doing some reading/research I realized that elements that are generated dynamically...
wait for it...
are not registered/bound after DOM loads, thus the addBehavior needs to be reload()-ed for it to pick up new elements.
So after dynamically generating new elements, there has to be a call to
Event.addBehavior.reload();
After that call, new dynamically-generated elements can be moved up/down just like I want.
I knew it had to be something as simple and obvious as that... sigh