How do I update content loaded with Jquery .load() with javascript?
I'm using two placeholders on every page: one with the navigation bar, and one with the main skeleton of the content, like this:
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>
The nav bar and content are both in seperate files and are loaded into the pages with an external javascript file like this:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
So far, it all works nicely. Now, I'm trying to alter the content separately for each page (with JS)
Part of content.html is for example
<h2 id="subheader1">Title</h2>
I'm trying to change the #subheader1 content in the javascript file like so:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
but that doesn't work (this is aimed at all pages, but it still doesn't work). Probably because it's only seeing the placeholder DIV in index.html and not it's content?
I tried placing the subheader1 div in the index.html to test, and then it did work, but that would take away the efficiency of the placeholder.
Is there any way to do this (or another way to be more efficient with pages with the same (DIV) layout but different text?)
Thanks!
The load method is not synchronous, so
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
is executed before the html is loaded in the page.
The doc suggest using a callback function.
it is executed after post-processing and HTML insertion has been performed
I had success using this in my js file:
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});
with <h2 id="insideNav">Original Nav Bar</h2> in my nav.html.
Related
I am using .load() function in JavaScript and I'm working with JSP java files. I am loading a page like this in JavaScript
$("#body").load("livestatus #status")
The problem is the div I'm trying to load doesn't load immediately on page load because it contains some data from APIs, so there's a one second delay but my code doesn't accommodate that delay.
Try to put your code in document.ready block or if you are making an ajax request then put your code in Ajax success function
If you use jQuery and it just not initialized for some element, you can use
$(function() {
$("#body"). // ... your code
});
If it calls through some time and you can't track when exactly, you can use live listeners on some event. Like, click on this element.
$("body").on("click", "#body", function() {
// your code
});
$("body") can contain any parent element which had loaded before jQuery.
Or you can load 1px image with you code which loads after main code and track when it will load.
<div id="body">
<!-- your markup -->
<img class="loading-status-img" src="../path_to_1px_small_image.png" style="display:none">
<img class="loading-status-img-2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=" style="display:none">
<!-- your markup -->
</div>
<script>
$("body").on("load", ".loading-status-img", function() {
// execute you code here after #body will load
});
</script>
The second image is encoded with base64.
[UPD] old version of jQuery have another syntax. More: http://api.jquery.com/live/
I have the following layout page:
<body scroll-spy="" class="theme-template-dark theme-amber alert-open alert-with-mat-grow-top-right solar-custom">
<main>
<div class="main-container">
<div class="main-content" autoscroll="true" bs-affix-target="" init-ripples="">
<section class="forms-basic">
<div ng-view class="view-animate view-fade">
</div>
</section>
</div>
</div>
</main>
</body>
I have an ng-view here in order to get html files on my code and place it's content inside here.
The problem I noticed is the following:
I have various textboxes from materialize which all should have an animation that kicks in on focus and blur.
However, I noticed that this animation does not occur on elements inside an ng-view.
One thing I noticed that there is a function on an js file that runs when the page loads.
$(function () {
$('[data-toggle="tooltip"]').tooltip(), $('[data-toggle="popover"]').popover(), $(".navbar-toggle").sideNav({
menuWidth: 260, closeOnClick: !0
}
);
var a = [".btn:not(.withoutripple)", ".card-image", ".navbar a:not(.withoutripple)", ".dropdown-menu a", ".nav-tabs a:not(.withoutripple)", ".withripple"].join(",");
$("body").find(a).ripples(), $(".form-control").each(function () {
$(this).val() && $(this).parent().addClass("filled"), $(this).bind("blur", function (a) {
input = $(a.currentTarget), input.val() ? input.parent().addClass("filled") : input.parent().removeClass("filled"), input.parent().removeClass("active")
}
).bind("focus", function (a) {
input = $(a.currentTarget), input.parent().addClass("active")
}
)
}
)
}
That code runs smoothly on load, and also when I click on a textbox that is on the main page (not in this example). BUT, if I add an input on the html that will be used as an ng-view, it does not run, which leads me to believe that when the js file runs, the ng-view is not rendered yet.
So, is there a way that I can get the ng-views to read all of materialize properties and not have these kinds of issues?
I have a link (A link), which dynamically creates some html content into the page by a js file placed in the head content. This works well.
<head>
<script src="my.js">
</head>
<body>
<div>
<a href="A link">
</div>
</body>
Than clicked the A link, and this is created:
<div>
<a href="B link">
</div>
The newly created html content also contains a link (B link), which should use the same js file, as used before, but it seems, that the B link cannot see it, however the js file is still in the header content.
Works only if I put the js file in a script tag to the end of the dynamically created html content generated by A link, like this.
<div>
<a href="B link">
<script src="my.js">
</div>
But this means I load this js file twice. What am I missing here?
Thanks.
If you want the newly created element to perform some action then you should use this technique using jquery.
$(document).on('click', '.linkclass', function()
{
// Perform your action here.
alert('I was clicked');
});
live of Jquery is now obselete and is better to use on. In this way your all newly created element or already created elements having class as .linkclass will perform alert(); action. Hope it helps.
I have the following code in a .tpl file ("comment_form.tpl"). This file is included in 3 different .tpl files ("file_a", "file_b" and "file_c") once each. And finally these 3 files are included in another .tpl file ("somefile.tpl").
<script type="text/javascript">
$(document).ready(function Hide() {
document.getElementById('div').style.display = 'none';
</script>
So basically, the "comment_form.tpl" is loaded thrice in "somefile.tpl" like so:
.....
</div><!-- .span9 -->
{include file="includes/file_a.tpl"} // includes "file_a.tpl" which already includes "comment_form.tpl" (which contains the code).
</div>
.....//some code
{include file="includes/file_b.tpl.tpl"} // "includes file_b.tpl" which already includes "comment_form.tpl" (which contains the code).
The issue is, the code works the first time. As in, out of the three places where the "comment_form.tpl" is loaded in "somefile.tpl", the target 'div' is hidden only the first time. At the next two places the form (div) isn't hidden.
I hope I am clear enough. What could be the reason??
It is perfectly legal to have multiple $(document).ready(function() {}) calls throughout your page.
It seems that you are hiding your element by ID. Note that IDs must be unique, and if you use the same ID multiple times (#div in your example), only ever the first is selected by getElementById(). That's what you are experiencing.
You must give each <div> a unique ID or group them together with a CSS class and hide the whole class.
Here is an example using a CSS class:
<div class="comment_form">some content</div>
<div class="comment_form">some content</div>
<div class="comment_form">some content</div>
<script type="text/javascript">
$(document).ready(function () {
$('.comment_form').css({'display' : 'none'});
}
</script>
By the way it's far more efficient to directly use CSS for the initial 'hidden' state of your <div>. There is no need to execute JavaScript on page load at all:
<style>
.comment_form { display: none; }
</style>
<div class="comment_form">some content</div>
You can still change the display property of your element later via JavaScript in an onClick event, for example.
I'm trying to make a page where a certain div (with lots of php, html and javascript content) loads after the rest of the page. Is this possible if so how?
You could apply this div a hidden style and then use javascript to show it:
$(function() {
$('#someDiv').show();
});
But if you want to avoid loading it initially you could use AJAX:
$(function() {
// <div id="container"></div> will be an empty div
$('#container').load('/script');
});
Also note that if you want this loading to happen once all other content is loaded including graphics you could use the $(window).load instead of $(document).ready:
$(window).load(function () {
...
});
I had a similar Issue, needed the data to be filled in after a certain div was created.
I use .ejs files for this stack.
What I did was Pull all the code to the .ejs page Ordering it in the way I needed.
For Ex.
<script type="text/javascript">
jQuery making the divs
</script>
<% Pull Data and put it in the divs above %>
look in to jQuery's $.ajax, and related functions. I think you'll find they're exactly what you're looking for. a simple example:
<script type="text/javascript">
$(function() { // called when page is done loading; you can have lots of these
$.ajax({
url: 'other-content.php',
success: function(data) { $('#load-me-later').html(data); }
});
});
</script>
<div id="load-me-later"></div>
The certain
<div id="the_div">some text or whatever</div>
must have
#the_div { display:none; }
in css.
An then
$(document).ready(function() {
$("#the_div").show();
});
There are several ways to do this. For one, you could put that div at the end of the page and flush() just before it; but this isn't very reliable, and it's pretty darned hard to get position and the likes right. A better way would be ajax:
$.ajax({
url: 'myurl.php',
data: someDataMaybe,
success: function(html) {
$('#mydiv').html(html); // document.getElementById('mydiv').innerHTML = html would be a thousand times faster, but I've been told jquery people like this more
}
});
this will only execute after page load and then load the contents into the div. It of course assumes myurl.php outputs only content that should be in said div.
So say you have this page:
<div id="page">
<div id="content">
<!-- lotsa stuff in here -->
</div>
<div id="mydiv"></div>
</div>
<script type="text/javascript">
// the stuff above ^
</script>
And myurl.php outputs this:
Some PHP-generated stuff
which would result in:
<div id="mydiv">Some PHP-generated stuff</div>