We Keep Coding

Add/Remove classes from navigation loaded with Jquery

I am loading in the content of my sidebar navigation with jquery from a nav-content.html file so I don't have to update it on every page each time it updates.
What I am trying to do is when on a specific page, the sidebar nav with uncollapse based on what category that page is on.
I am trying to target elements in that loaded nav to be active when on certain pages and it only works when the nav is hard coded into the page's html but it doesn't work when I load it in from the nav-content.html file with jquery.
I did noticed when i view the source code on browser it doesn't actually paste in the html but still displays it which I think is the disconnect but I am not 100%. Not sure if I should look into different way to load it in or if my jquery is the issue.
Any insight would be greatly appreciated.
HTML:
<nav>
<div id="sidebar">
<div id="sidebar-content">
<!-- nav loads here from nav-content.html -->
</div>
</div>
</nav>
Jquery:
/*Loads the Nav */`
window.onload = function(){
$.get("nav-content.html", function(data){
$("#sidebar-content").html(data);
})
}
/* changes classes within the loaded nav based on what page it's on */
$(document).ready(function() {
$('ul#devSubmenu').removeClass('collapse'),
$('ul#appStackSubmenu').removeClass('collapse'),
$('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
$('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
});
I asked this a few days ago but this is a rephrased/re-explained of deleted post.

Two things to get you on the right path.
1) jQuery's get() does not load an HTML file. You might mean to use load() to get your sidebar content: https://api.jquery.com/load/
2) $(document).ready fires before window.onload. See: window.onload vs $(document).ready()
In order to ensure that your content is loaded before modifying the classes, you can make your modifications in the callback from load() (the function passed as the second parameter to load()).
Something like [untested]:
$(function() {
$( "#sidebar-content" ).load( "nav-content.html", function() {
$('ul#devSubmenu').removeClass('collapse'),
$('ul#appStackSubmenu').removeClass('collapse'),
$('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
$('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
});
});
The wrapping $(function() { ... }) is just jQuery shorthand for $(document).ready();

Can I add/remove class on element loaded by load() function?

I have a navbar with class called "active" with some CSS styling. The navbar is used on a number of subpages so I figured out that instead of repeating the code on all the subpages I will load navbar with load() function.
The problem is that with the content loaded by the load() function I cannot remove the class using removeClass(). The navbar is loaded, I can see the tags in inspector, and all seems to be OK. The code is working if I put the navbar manually in the HTML.
I've tried to move the script tag that deletes the class after the CDN script, but it does not help (the idea was to remove class on the fully loaded page). What am I missing?
I'm using the following code to load the navbar:
$(function(){
$("#includeNavbar").load("../partials/navbar.html");
});
Then I put a tag in HTML:
<div id="includeNavbar"></div>
Then I use <script> tag in the HTML, but below code does not remove class:
<script>
$("li").removeClass("active");
$("li").eq(1).addClass("active");
</script>

The issue is where you're calling removeClass() and addClass() from. You need to do it in the callback of the load(), to ensure that the content exists in the DOM when you execute those calls:
$(function(){
$("#includeNavbar").load("../partials/navbar.html", function() {
$("li").removeClass("active").eq(1).addClass("active");
});
});

Loading content to the div using AJAX/jQuery

I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!

You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});

You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});

Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})

jQuery slideshow plugin with .load()

I'm trying to make an auto slideshow with pics from other .php file and to achieve that i've decided i will use http://responsiveslides.com/ jQuery plugin. The problem is that this plugin doesn't want to work with my photos by "loading" them from other file.
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides');
});
$(function() {
$("file.php .rslides").responsiveSlides();
});
*CSS/HTML are exactly the same way written like the author wrote in his "Usage".

try this:
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides', function callback () {
$('.rslides').responsiveSlides();
});
});
I've not used the plugin before, but it appears that you need to apply the bootstrap method to the element that contains the slides you load into your page. So what you're doing in your code is attaching the load method to the click handler, while attaching the responsive slides to an empty selector when the DOM is ready. What I've provided above loads the content, and then using a callback function (when the content has successfully been loaded into the DOM), then calls the bootstrap method onto the original selector.
Edited the code to use the '.rslides' selector.

jquery colorbox and custom scrollbar

I would like to use a custom scrollbar with Colorbox
I am using Wordpress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I'm guessing that I need to apply to the #cboxLoadedContent div so I've loaded as per this code, however it's not working:
(function(jQuery){
jQuery(window).load(function(){
jQuery("#cboxLoadedContent").mCustomScrollbar();
});
})(jQuery);
Using Firebug there's no alteration to the standard coding i.e. the JavaScript isn't firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn't have a scrollbar so nothing is shown.
The question is why isn't it working on the right div i.e. #cboxLoadedContent?

#cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won't work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).
The best way is to call mCustomScrollbar function inside colorbox's onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.
From colorbox examples:
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxContent").mCustomScrollbar();
}
});

Just a quick note about the code in the accepted answer. I couldn't get it to work with $("#cboxContent") as shown; I needed to use $('#cboxLoadedContent').
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxLoadedContent").mCustomScrollbar();
}
});