I am making a dynamic page that contains several divs that change when the user selects to go to the next passage on my page. However, I cannot get my website to load the first set of information.
The HTML contains these blank divs, and then my function loads in a JSON file and changes the divs by their ID's. When I first load my page, these divs appear without text. Could it be that my javascript is not running when the page is first loaded? Here is an example of my HTML:
<div id="passage-section">
<!-- Title -->
<div id="passage-title"></div>
<!-- The panel that will display the content -->
<div id="passage"></div>
<!-- Button that when clicked activates a dialog box for the passage. -->
<button id="max-passage" class="max"></button>
</div>
And here is my function:
//This section of code handles the calling of the first passage.
//Loading in the JSON file and changing the contents of the page.
function loadFirstPassage()
{
var timeout = 250;
//load the new JSON file and change the elements
$.getJSON("passages/2.1.1.json", function( data ) {
document.getElementById("passage-title").innerHTML = data["passageNumber"];
document.getElementById("passage").innerHTML = "<p class='serif'>".concat(data["reading"]).concat('</p>');\
//fading the elements back in
$("#passage-title").fadeIn(timeout);
$("#passage").fadeIn(timeout);
});
}
I tried calling this function in the body and that did not work, so currently it is getting called in the head.
<head>
<!--The orginal load of the page maybe it works, who knows? -->
<script>
$(window).load(function()
{
loadFirstPassage();
});
</script>
you could try load it right after the DOM finished
(function() {
console.log('DOM Loaded')
})();
jQuery would use
$( document ).ready(function() {
console.log('DOM Loaded');
});
Try
$(document).ready(function() {
loadFirstPassage();
});
instead of $(document).load.
Related
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();
I am loading in my navigation with jquery from a nav.html file so I don't have to update it on every page each time it updates.
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 pasted into the page's html but it doesnt when I load it in from the nac-content.html file.
I did noticed when i view the source code on browser it doesnt 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");
});
You could do something like this
$(document).ready(function () {
// DOM has been parsed
$.get("your/url", function (data) {
var $navContainer = $("#sidebar-content");
$navContent = $(data); // build a jQuery object from your html markup
// do your updates using the find method of jQuery objects
$navContent.find("ul#devSubmenu").removeClass("collapse");
// ...
$navContainer.append($navContent); // assuming the container is empty.
});
});
window.onLoad gets executed after $(document).ready
You could use
document.addEventListener("DOMContentLoaded", function(event) {
$.get("nav-content.html", function(data){
$("#sidebar-content").html(data);
})
});
I'm dynamically loading content into a div (which works) but am unable to use the loaded content's JavaScript.
This is my loading code which is called from a clickable unordered list item:
<div id="resources" class="tabcontent">
<script>
$("#resources").load("pages/resources.html");
</script>
</div>
Once pages/resources.html has loaded there's a bunch of similar JavaScript within it to load yet more HTML pages into div's within that page.
Just add a callback to the load() call:
$("#resources").load("pages/resources.html", function() {
// pages/resources.html has loaded
});
What am doing is writing wizards using existing forms and list views. we want to combine these forms in single page. here is a script we have used to get form from url then called function to bind widgets. first line is loading content of form but bindWidgets is not working. While bindWidgets is working on preloaded content which is default loaded with page.
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform");
bindWidgets();
});
</script>
Do we need to wait for load, as it seems that 2nd line is executed prior to content loaded. How can we go to wait stat or better way to call bind function after load complete.
Use this;
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform", function() {
bindWidgets();
});
});
</script>
You can see demo here: jsfiddle
I'm trying to change the content of the portfolio section of my website. I have a div called .portfolio_box, which contains a small preview of the project (each project div also has a different id). When you click on this div (.portfolio_box) I want the content of the content div (#main_content) to go away and be replaced with the corresponding content.
I found the following tutorial and adjusted the script to my needs:
<script type="text/javascript">
$(document).ready(function()
{
$("#thomasschoof_old").click(function()
{
/*hide( 'fast', function()
{
$('#main_content').load(thomasschoof_old.html,'',showNewContent);
} );
var toLoad = $(this).attr('href')+' #main_content'; */
$('#main_content').hide('fast',loadContent);
$('#page').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
});
function loadContent()
{
$('#main_content').load('thomasschoof_old.html #project','',showNewContent)
}
function showNewContent()
{
$('#main_content').show('normal',hideLoader);
}
function hideLoader()
{
$('#load').fadeOut('normal');
}
return false;
});
</script>
But when I click on the div #thomasschoof_old nothing happens. I don't know a lot about jQuery or Javascript (just getting into it) and I really can't get it figured out.
You can view the web page here: http://jowannes.com/thomasschoof/portfolio.html
I hope somebody can help me, Thanks in advance!
Thomas
Your problem is, that you wrote your JS code inside scripts tags that are used to load an external script file (jQuery). You script just wont ge executed that way.
src: This attribute specifies the URI of an external script; this can
be used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
From: https://developer.mozilla.org/en-US/docs/HTML/Element/Script
Set up a separate script tag for you code or include it from a second external script-file and see what happens.