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
});
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();
On my site ajax calling iframe that is loading some sort of data. I want to load the iframe or div data as soon as the ajax request completes or data is loaded. I cannot access ajax directly, so I am trying it this way, but it is showing undefined. I think this is due to the iframe or div not loading each time. Any help with how I can load the iframe or div inside js without touching ajax code.Thanks
<script type="text/javascript">
setTimeout(function() { alert(jQuery('#wrapper').html()); }, 10000);
</script>
If I use pplus instead of wrapper its only show empty iframe. But I want to load its data.
Iframe code looks like this :
<div id="ppplus" style="height: 535px;"><iframe allowtransparency="true" style="height: 535px; width: 870px; border: none;">
<html>
<div class="content" id="wrapper">data goes here</div>
</html>
</iframe></div>
i dont know why you want to use i frame just to display data ..
use a div. iframes behave different than divs. you dont have innerHTML. you have a body (myFrame.contentDocument.body)
dont use a timer you dont know when the response will be rendered.
add a eventlistener like DOMSubtreeModified or DOMNodeInserted for the wrapper div and get its content
var ppplus = document.getElementById('ppplus');
ppplus.addEventListener("DOMSubtreeModified",function(e) {
var myFrame = e.target.firstchild;
console.log(myFrame.contentDocument.body);
});
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.
I'm using jquery's .html() function to inject a html file into a partial div of the main page of my application. In the injected partial html page, there is a javascript reference such as script(src='../../javascripts/partialFunctions.js').
The jquery function and the main page are like:
$('.partialDiv').html(htmlResult);
<div>main page</div>
<div class='partialDiv'></div>
<input type='button'>button</input>
When the user click a specific button on the main application page, the jquery function will got called and the html file will got injected to the main page.
The problem is every time a new htm file got injected, the browser will load the script file. So there will be many duplicated javascript functions after the user clicked the button several times.
How can I do this dynamically and avoid the duplication of javascript functions?
Thanks in advance!
You can remove the script tags and references from the htmlResult page.
Then use $.getScript('myscript.js') to import the necessary JavaScript files.
More info on getScript() here
So to load in the script and make sure it only loads in once:
var window.foo = false; //Outside the document.ready
$('.partialDiv').html(htmlResult);
if(window.foo == false){
$.getScript("js/myScript.js", function(data, textStatus, jqxhr){
console.log('Script loaded');
window.foo = true;
});
}
I just did a quick test, it looks like script tags are stripped out anyways when you call .html(). So you should be able to simply do:
var html = "<html><script></script></html>",
cleanedHtml = $(html).html();
myEl.html(cleanedHtml);
I use jScrollPane, and it works fine, but not when I use the load function in jQuery.
If I have one div that loads content with overflow:auto, and when the div is loaded, the content is different, the jScrollPane does not show the scrollbar.
For jQuery load I use this:
function infor(id) {
$(document).ready(function () {
$("#web_loader_text_content").show(2000);
$("#web_loader_text_content").load("indexer_data.php?id="+id);
});
}
I call for load contents in a div with links:
<div class="web_botones" id="b1" onclick="infor('houses1');"></div>
<div class="web_botones" id="b2" onclick="infor('houses2');"></div>
<div class="web_botones" id="b3" onclick="infor('houses3');"></div>
And the problem comes here:
$(function() {
$('#web_loader_text_content').jScrollPane();
});
The problem is that I have different contents with different sizes, and the scrollbars don't show.
Firstly remove the document.ready function from within the function you are calling:
And use:
autoReinitialise: true
in your jscrollpane initialize function. This property will reinitialize your jscrollpane and you dont have to worry about the loading data.