We Keep Coding

jQuery: Add class to filter item containing active term, accounting for pagination

I'm working on an events page in a WordPress site that uses a set of filters to query posts; the markup for the filters is as follows:
<div class="event-filter">
All Events
Conferences
Webinars
Learning
Past Events
</div>
I'm using jQuery to add an active class to whichever filter is currently in use, the simple code for which is as follows:
$('.event-filter a').each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
This works perfectly fine except in the case that the resulting posts are paginated, as the url changes to reflect the current page, i.e. /events/page/2/?event-type=conference. How can I modify my JS to add the active class to the current filter if the URL contains the respective event-type term but also accounts for "All Events", and thus appends the class to "All Events" when the other filters are not in use? A couple notes: the "Past Events" option just links to an archive page that is a separate template from the main, filterable "Events" page; also, these filters are not using Ajax, they're just altering the WordPress query by URL parameter. Thanks for any insight here!

By the looks of it you will have to do a two part check, I would try something like:
$('.event-filter a').each(function() {
var currentHref = window.location.href.split('?'); // ['https://myexamplesite.com/events/page/2', 'event-type=conference']
var thisHref = this.href.split('?'); // ['https://myexamplesite.com/events', 'event-type=conference']
var currentHrefHasQuery = currentHref.length > 1 ? true : false; // true
var thisHrefHasQuery = thisHref.length > 1 ? true : false; //true
if (currentHrefHasQuery != thisHrefHasQuery) {
return; // they don't match
}
if (currentHrefHasQuery && currentHref[1] == thisHref[1]) { // if they have a query and the query is the same, it's a match!
$(this).addClass("active");
} else if (!currentHrefHasQuery && currentHref[0].indexOf(thisHref[0]) > -1) { //check to see if the current href contains this' href
$(this).addClass("active");
}
});
This could definitely be simplified, but hopefully this is fairly easy to read.
Fiddle: https://jsfiddle.net/m0hf3sfL/

Uncaught ReferenceError: t is not defined

have a small problem in my function below .
i constantly getting this error : Uncaught ReferenceError: t is not defined .
trying to add this piece of code in my project that is related to wordpress menu.
here it is
t(function() {
var e = t("#categories_navigation"),
i = "click" == e.data("action") ? "click" : "mouseenter mouseleave",
a = t("#categories_navigation_toggle");
"click" == i && e.find("> ul > li:first-child").addClass("active"), a.on(i, function(a) {
"click" == i && a.preventDefault(), t(this).toggleClass("opened"), e.toggleClass("opened")
}), "click" == i && t(document).mouseup(function(t) {
a.is(t.target) || e.is(t.target) || 0 !== e.has(t.target).length || !e.hasClass("opened") || (e.removeClass("opened"), a.removeClass("opened"))
}), e.find(" > ul > li > a").on(i, function(a) {
"click" == i && a.preventDefault();
var n = t(this).parent(),
s = n.find(" > ul");
t(" > ul > li > ul", e).css({
visibility: "hidden",
opacity: "0"
}), s.css({
visibility: "visible",
opacity: "1"
}), "click" == i && (t(" > ul > li", e).removeClass("active"), n.addClass("active"))
});
});
and this is my html codes
<div class="top-nav col">
<?php _e(' Categories Menu '); ?>
<nav class="categories-menu-navigation" id="categories_navigation" data-action="click" role="navigation">
<ul></ul>
</nav>
</div>
i should add that jquery file is attached to the page above all other js files .
thanks in advance .

Based on the functions that you are calling with t I would guess that you are copy-pasting code from somewhere else. In the snippet you gave us, you are referencing a variable called t. The error message you are getting is because in your code you did not define what t is.
From looking at what you posted, my best guess is that t is supposed to be the jQuery variable, but that's traditionally this symbol: $.
There is another issue as well. The code after a = t("#categories_navigation_toggle"); seems to be related to operating a menu like you said, but the syntax is quite wrong for a number of reasons. I think it'd be easier to help you phrase your question better than to try and fix your code without any additional context.
Improving your question
If you did copy-paste code from somewhere, could you link to it so we can see the whole thing? I don't think you have the entire snippet posted in your question.
Also, please explain what you are trying to do with this code. Giving us details about what you're trying to do will be more helpful to us than just saying it doesn't work :)

jQuery UI Tabs not working in Wordpress 4.4 and later

In my Wordpress theme, I have a Theme Options page which is using jQuery UI tabs.
These tabs perfectly works in Wordpress versions below 4.4. But they don't seem to work in the versions later than 4.4
It just don't give any error or anything. The other jQuery functions (such as jQuery color-picker, slider..etc.) in the options page are working fine. It's just the tabs which are broken.
In the console I get this message
Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
It's from the jQuery.js file which is included in wp-include/js/jQuery folder
This is my code...
<div class="ui-tabs">
<ul class="ui-tabs-nav">
foreach ( $this->sections as $section_slug => $section )
echo '<li>' . $section . '</li>';
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
var sections = [];';
foreach ( $this->sections as $section_slug => $section )
echo "sections['$section'] = '$section_slug';";
echo 'var wrapped = jQuery(".wrap h3").wrap("<div class=\"ui-tabs-panel\">");
wrapped.each(function() {
jQuery(this).parent().append(jQuery(this).parent().nextUntil("div.ui-tabs-panel"));
});
jQuery(".ui-tabs-panel").each(function(index) {
jQuery(this).attr("id", sections[jQuery(this).children("h3").text()]);
if (index > 0)
jQuery(this).addClass("ui-tabs-hide");
});
jQuery(".ui-tabs").tabs({
fx: { opacity: "toggle", duration: "fast" }
});
jQuery("input[type=text], textarea").each(function() {
if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "")
jQuery(this).css("color", "#999");
});
jQuery("input[type=text], textarea").focus(function() {
if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") {
jQuery(this).val("");
jQuery(this).css("color", "#000");
}
}).blur(function() {
if (jQuery(this).val() == "" || jQuery(this).val() == jQuery(this).attr("placeholder")) {
jQuery(this).val(jQuery(this).attr("placeholder"));
jQuery(this).css("color", "#999");
}
});
jQuery(".wrap h3, .wrap table").show();
// This will make the "warning" checkbox class really stand out when checked.
// I use it here for the Reset checkbox.
jQuery(".warning").change(function() {
if (jQuery(this).is(":checked"))
jQuery(this).parent().css("background", "#c00").css("color", "#fff").css("fontWeight", "bold");
else
jQuery(this).parent().css("background", "none").css("color", "inherit").css("fontWeight", "normal");
});
// Browser compatibility
if (jQuery.browser.mozilla)
jQuery("form").attr("autocomplete", "off");
});
</script>
What's the reason for this odd behavior ? Is it something in my code ? But it works fine in older versions of WP. Any clue ?

Finally I figured the answer for my own question...
Actually, this error was because of WP's some core changes in the backend interface. They've changed the Backend headings structure So, your <h3> tag in WordPress 4.3, is no longer <h3> anymore in 4.4 and higher.
So, in the custom options page, in WP 4.3, the titles were rendered as <h2> tags. And, that titles were binded to my javascript code as .h2. So, that's where the error occurred.
That small error caused the entire JavaScript block to malfunction. So, jQuery tabs didn't work.
You can explore this with inspector. See the image below.
As you can see the Titles in Wordpress 4.3 were rendered as <h3> but in Wordpress 4.4, they're <h2>
So, what I did was just adjusting my JavaScript code to bind the Title as both .h2 and .h3
From this...
jQuery(this).children("h2").text();
To like this...
jQuery(this).children("h2, h3").text();
This did work for me. Your code may be different than mine. But, the cause for the problem can be it...
Hope this helps!

JS fails reading upcoming array elements

The goal is to create navigation out of a JSON-file in the #left div-box. There should be links to the previous/next page according to the file hierarchy in the #right div-box.
My implementation is running very weirdly. When you click on a link in the navigation, only the link to the previous page shows up. By clicking on said previous link, the one to the next page is updating as well. Navigating through those 2 previous/next links works. As soon as you switch back to navigating through the navigation on the left the next page link won't update anymore. The previous one still does.
Try it out yourself:
http://jsfiddle.net/cxdL3/6/
From what I found out the problem is reading an element ahead in the array ([subchap+1]) doesen't always work. Which confuses me as it should be loaded before the functions are getting called.
Do you have an explanation for that behavior? The two links are also basically created the same way.
var chap; //position in the array of the currently open chapter
var subchap; //position in the array of the currently open subchapter
function update_right() {
var path = data.chapter[chap].subchapter;
//Previous Page
if(subchap > 0) {
$("#prev").html("<b>Previous: </b><a href='"+path[subchap-1].url+"'>"+path[subchap-1].title+"</a><br/>");
$("#prev > a").click(back);
} else { //subchap == 0
$("#prev").html("");
};
//Next Page
if(subchap+1 < path.length) {
$("#next").html("<b>Next: </b><a href='"+path[subchap+1].url+"'>"+path[subchap+1].title+"</a><br/>");
$("#next > a").click(next);
} else {
$("#next").html("");
}
}
function back() {
subchap--;
update_right();
}
function next() {
subchap++;
update_right();
}
$(document).ready(function() // DOM needs to exist in order to be able to add stuff in there
{
//... Navigation created ...
//------ onClick Navigation
$('#left > ul > li > a').click(
function()
{
chap = $(this).attr("data-chap");
subchap = $(this).attr("data-subchap");
update_right();
}
);
});
The remaining files are pretty standard. In case they matter, they can be found here: http://fabitosh.bplaced.net/SkriptET_iFrame_v3/

When getting chap and subchap values in your click handlers, get them as integers, not strings:
chap = parseInt($(this).attr("data-chap"), 10);
subchap = parseInt($(this).attr("data-subchap"), 10);
so that things like chap + 1 become 1 when chap == 0, instead of "01" when chap == "0"
Updated example: http://jsfiddle.net/cxdL3/10/

If you use $(object).data('chap'), jQuery will handle the type conversion for you.

Bootstrap 3 Nav Tabs on Top and Bottom of Page?

I'm building a site in Bootstrap 3 and have figured out that you can indeed place both a top nav-tab and bottom nav-tab section on the same page. These two separate tab menus will trigger the same tab content areas to show/hide.
Doing this works just fine with one problem. The tabs work independently of one another. I need the top and bottom tabs to show the same active tab. Right now if you click tab 4 on the top tab menu, it will take you to tab 4 but the bottom menu still shows the active tab as tab 1.
So, can Javascript/Jquery handle this issue? Just need them to act as the same menu.
Thanks in advance for any help.
<div class="tabbable tabs-below">
Should match top nav tabs.
http://jsfiddle.net/UT6ex/1/

Instead of listening to raw clicks, listen to the events triggered by the Bootstrap Tab class: show.bs.tab and shown.bs.tab. That will ensure future versions of Bootstrap markup won't break your setup.
This code finds <li> elements after a shown event to add and remove classes (working JSFiddle):
$('a[data-toggle="tab"]').on('shown.bs.tab',
function(event) {
var $relatedTarget, $target;
if (event.relatedTarget != null) {
$relatedTarget = $(event.relatedTarget);
$('a[data-toggle="' +
$relatedTarget.attr('data-toggle') +
'"][href="' +
$relatedTarget.attr('href') +
'"]').parent('li').removeClass('active');
}
if (event.target != null) {
$target = $(event.target);
$('a[data-toggle="' +
$target.attr('data-toggle') +
'"][href="' +
$target.attr('href') +
'"]').parent('li').addClass('active');
}
}
);

Sth like this is ok i suppose:
$('.nav-tabs').find('li').on('click', function(){
var location = $(this).find('a').attr('href'),
children = $('.nav-tabs').find('li'),
links = children.find('a');
links.each(function() {
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.closest('li');
miParents.removeClass('active');
if(miHrefs == location)
{
miParents.addClass("active");
}
});
})
Ok this works fine. Have a look here http://jsfiddle.net/UT6ex/4/.