Develop Reference

Changing Bootstrap panel CSS class for "active" panel (clicked/focused)

I have a page with multiple Bootstrap panels, and I want to make it so that only the "active" panel has the panel-primary class (so, highlighted, in a sense). The definition of "active" in this case is that the user has clicked anywhere inside a panel or changed focus with keyboard or something.
So, I started with this:
function highlightActivePanel($activePanel) {
$('.panel-primary').toggleClass('panel-primary panel-default');
$activePanel.toggleClass('panel-default panel-primary');
}
$(document).on('click', '.panel-default', function () {
highlightActivePanel($(this));
});
The trouble is, I have a table with jquery DataTables plugin inside the panels. So, if I register the click event, it generally works, but not when you click on of the DataTables paging number buttons at the bottom of the panel for some reason. The click even doesn't fire. Probably due to DT's own click events, I'm guessing.
So, I then tried the focus event:
$(document).on('focus', '.panel-default', function () {
highlightActivePanel($(this));
});
... and that works better with clicking on DataTables buttons and fields, but doesn't work if the user simply clicks on the text (or in a table cell) inside a panel.
Finally, if I just simply leave both event listeners registered, it seems to work, but I'm wondering if this is smart, or if there is a better/cleaner way of doing this?
$(document).on('click', '.panel-default', function () {
highlightActivePanel($(this));
});
$(document).on('focus', '.panel-default', function () {
highlightActivePanel($(this));
});
Here's a JsFiddle that better illustrates what I'm talking about.
Edit: Just realized I can easily combine the two events like this:
$(document).on('click focus', '.panel-default', function () {
highlightActivePanel($(this));
});
But if there is still a better way to do this, let me know.

Clicking on the DataTables paging numbers triggers page.dt, so you could do click page.dt in place of click focus to avoid potentially losing focus to something else on the page (though you could also do that by using a more specific selector).

How to handle updating the navigation bar while using ajax

I have an AJAX implementation on my Wordpress install and I'm using the 'CSS and Javascript toolbox' plugin to apply additional Javascript code. I have also tried the following code in the header.php file in both the section and .
I'm using the standard 'Twenty Fourteen' theme and I'm referencing the primary navigation bar at the top. There are no subpages, just normal links.
http://twentyfourteendemo.wordpress.com/
The code I'm using, which I'm sure is the problem, is this
<script>
jQuery('ul.menu li').click(function(){
// Remove class on each item
jQuery('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
jQuery(this).addClass('current_page_item current-menu-item');
})
</script>
I have also tried this
<script>
jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');
</script>
I don't know Javascript very well but this isn't doing anything. When a link is clicked, the 'highlighted' page on the navigation bar stays on the original page.
I have other code, that toggles the navigation bar on and off when a link is clicked (on mobile) and that works fine so the code is registering, just not working.
Does anyone know why this code isn't working? I've been stuck with this problem for days and I can't launch without this being fixed, I'd even throw some beer money to anyone with a solution

I cannot see your sample code in that website, to see if you code is in the body or head etc, but a couple of things you can try:
1 - You have not wrapped your code in a document ready event.
That means you may be running code against DOM elements before they exist, so the code does nothing.
This shortcut version of jQuery(document).ready() also provides a locally scoped $ variable so you can shorten your jQuery code:
<script>
jQuery(function($){
$('ul.menu li').click(function(){
// Remove class on each item
$('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
$(this).addClass('current_page_item current-menu-item');
})
});
</script>
2 - If the menu items are added/classed-up after load (e.g. by a plugin), you need to use delegated event handlers:
e.g.
<script>
jQuery(function($){
$(document).on('click', 'ul.menu li', function(){
// Remove class on each item
$('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
$(this).addClass('current_page_item current-menu-item');
})
});
</script>
This works by listening for the event bubbling up to a non-changing ancestor element, then applying a jQuery element selector, then applying your function to any selected elements that caused the event.
Notes: The fallback element for delegated events should always be document and not 'body' as 'body' has some bugs (related to styling) that can cause events not to trigger. You should however target the nearest non-changing ancestor to be most efficient.
Note: The second option is generally the best way to code event handlers for e group of controls, as it only adds a single handler to the DOM.
Update:
As predicted, the JS code was in the header, so needed wrapping in a document ready event handler.
Also, the actual website uses a menu like this: <ul id="menu-pages" class="nav-menu"> so the selector for the menu items should be ul.nav-menu li or #menu-pages li and not ul.menu li.
e.g
<script>
jQuery(function($){
$(document).on('click', 'ul.nav-menu li', function(){
// Remove class on each item
$('ul.nav-menu li').removeClass('current-menu-item current_page_item');
// Add class for this one
$(this).addClass('current_page_item current-menu-item');
})
});
</script>

Jquery open and close within a parent div

The title does not explain that well, essentially I have 8 divs the same, with the same class for css styling.
They all have hidden content, I want to be able to only expand one div at a time without using different classes or identifiers for each div and hidden content.
I have tried to display this on Jsfidle using two divs the same , however I can't even get it to fire on jsfiddle for some reason
http://jsfiddle.net/dAXJ2/8/
$(document).on('click',".servicereadmore",function() {
//var x = $(this).closest('div').attr('class')
//$('.hiddenservices').parent(x).slideDown(1000);
$('.hiddenservices').slideDown(1000);
$(this).html("Read less");
$(this).removeClass("servicereadmore");
$(this).addClass("servicereadless");
});
$(document).on('click', ".servicereadless" ,function() {
$('.hiddenservices').slideUp(1000);
$(this).html("Read more");
$(this).removeClass("servicereadless");
$(this).addClass("servicereadmore");
});
That currently works above but opens all the hidden text as stated, the comments are were I have been trying to only expand within the parent div of the button I pressed

Your clickable <a> tags should probably be buttons, since that's the role they're in. Also, your functions aren't working currently because you've added
return false;
as the first statement of each one. That prevents any of the code after that from ever running. Instead of that, either change those <a> links to <button type=button> or else add a parameter to the handlers ("e" or "event") and call
e.preventDefault();
in the handler.
To affect only the portion of the page relevant to the "Read More" links, you just need to navigate the DOM:
$(this).closest('.myinfo').find('.hiddenservices').slideDown(1000);
That means: "staring from the clicked element, climb up the DOM to find the closest element with class 'myinfo', and then from that point down find all the elements with class 'hiddenservices' and slide them down."
A couple of other problems: you'll need to start the "hiddenservices" sections off as hidden, or otherwise not visible somehow. Also, another issue with your jsfiddle was that you didn't have jQuery selected. That's something you could quickly learn just by checking the error console.
Here is a repaired jsfiddle.

You dont have to use that much of code for this purpose. USe simply like
$(document).on('click', ".servicereadmore", function (e) {
e.preventDefault();
if ($(this).parent().find('.hiddenservices').is(":visible")) {
$(this).html("Read more");
} else {
$(this).html("Read less");
}
$(this).parent().find('.hiddenservices').slideToggle(1000);
});
Instead of adding and removing the class name, you can just use slideToggle().
Demo

Chaining :not selector in jquery.on

I have a table of rows that are dynamically managed via listjs. I have made these rows clickable to open a Bootstrap Modal based on a data attribute (data-modal). This all works fine except for when a link appears in the columns of the rows. Both the anchor is firing and the modal is opening.
To prevent this, I used the following code, which worked on initially loaded elements:
$("[data-modal]").on("click", "a:not(.open-disabled)", function(e) {//open modal code}
But as expected, this doesn't bind to dynamically injected rows or divs.
So I changed my code to try binding to $(document) instead, but I can't get the :not selector to chain properly -- the selectors aren't being properly identified and the modal does not open.
Here is what I changed my code to:
$(document).on("click", "[data-modal], a:not(.open-disabled)", function(e) {}
Questions:
A. How do I chain selectors in the above to prevent the modal from opening if there is an anchor child element that is being clicked.
B. Is there a better method of preventing the modal from opening?

Try this,
$(document).on("click", "[data-modal] > a:not(.open-disabled)", function(e) {}
//-----------^ use child selector here

I found a solution by implementing the method described here: https://stackoverflow.com/a/8696420/2659318
Here is the resulting code:
$(document).on("click", "[data-modal]", function() {
$(this).modal();
});
$(document).on("click", "a.open-disabled", function(e) {
if (!e.stopPropagation) {
e.cancelBubble = true;
return;
}
e.stopPropagation();
})

using preventDefault() with on() in jQuery AJAX tabs

I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can't seen to get preventDefault() to work with .on() on these newly created DOM elements.
I'm using jQuery BBQ with my tabs so I can't have "#"s being appended to the URL. This is caused when links within the tab panels are clicked.
I've been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.
My function for a content toggler is...
$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
I'd like to combine the preventDefault() from this function into it.
// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
I've tried several ways using .on("click", function(work)), etc. I've used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I'm doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can't seem to figure this out. Thanks in advance.

the part $(".showMoreOrLess").click just applies to already accessable links on your page
try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners
$(document).on("click", ".showMoreOrLess", function(event) {
event.preventDefault();
//here you can also do all sort of things
});
rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)

$("body").on('click', ".showMoreOrLess", function(event) {
event.preventDefault();
var self = $(this);
if (self.hasClass('clicked')) {
self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
}else {
self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
}
});