I am using some JQuery to load a div from another page to the current page, the problem I am having is that the content is the div does not exist until that page has loaded.
<div id="placeholder"></div>
What I am trying to do is load the page first (So the content goes into the div) and then I want to load the div in the current page.
Currently I have something which looks like this:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div class="panel-body">
<div id="bar-chart-db" class="height-sm"></div>
</div>
<script>
$( "#bar-chart-db" ).load( "../index.aspx #placeholder" );
</script>
Is what I want to do possible and if it is, any suggestions?
you have to wrap the jquery in a document ready function:
$(function(){
$( "#bar-chart-db" ).load( "../index.aspx #placeholder" );
});
Here is something you might want to read: Document Ready Function
Related
I have:
index.html
and
test.html
and I could load my test.html with jquery load(); function to in index.html
but then my index.html style is broken that is why I want to load my test.html into index.html as iframe..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>index.html</h1>
<div class="item">
load test.html here with iframe
</div>
<div class="test">
I'm a test div and I want to be in index.html in `item` class
</div>
to load html file into an iframe
<html>
<body>
<iframe src="test.html">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
What you could do is to specify only the content you want to load when using jQuery.load like this:
$( "#result" ).load( "test.html #container" );
Then it would only load the content of #container instead of everything (including the styles which might break your layout.
If you want to change an iframe src with jQuery you could use a click event like so:
jQuery( function() {
$( 'button' ).click( function( e ) {
e.preventDefault();
$( '#result' ).attr( 'src', 'test.html' );
} )
} )
But I think it would be better to use the first approach, trying to only load the content itself, not the whole HTML structure of test.html.
I hope that helped :)
I've got a login page that redirects you to an index page, the index page has this code:
<script type="text/javascript">
<div id="overlay">
<img src="loading.gif" alt="Loading" />
Loading...
</div>
jQuery:
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
It loads just a simple modal.
The issue is that the it shows the modal after a few seconds of delay. No just when the page is loading. The index page is heavy in content.
What I want is that just when for example chrome is loading (it's show a little circle spinning) my page show the modal.
The seconds of delay I think is why index its heavy.
When you add a function to the $(window).load() you are saying: call me when the page is finished loading. It sounds like you want to hide the spinner while the page is loading, not after. The problem is that jQuery might not be ready either, but if you don't have to support too many browsers, you can try it in a simple function instead of in load().
<script type="text/javascript">
$('#overlay').fadeOut()
</script>
Otherwise, if jQuery doesn't work because it isn't ready yet, then you may have to write the fadeOut logic yourself.
Your example is a little odd. Maybe just some reformatting of your code?
<div id="overlay">
<img src="loading.gif" alt="Loading" />
Loading...
</div>
<script type="text/javascript">
// Using the shorthand jQuery ready code. Basically
// this will add an anonymous function to a stack
// and when the document's ready event fires, it
// goes through the stack and runs anything you've
// added. So, document is ready, no run:
$(function(){
$('#overlay').fadeOut();
});
</script>
Or maybe your question is more about the difference between load event in window and document's ready event. See this for more window.onload vs $(document).ready()
Let me start off by saying my bootstrap modal load remote works fine. My particular problem is that it loads the whole remote URL as the HTML result, and I just need some specific sections from that HTML. For instance, lets say my remote URL is like this:
<html lang="en">
<head>
{head content goes here}
</head>
<body>
{some content here}
<div id="myContent1">{more content here}</div>
...
<div id="myContent2">{even more content here}</div>
</body>
</html>
So, instead of loading all above html code inside my modal, I just want to display divs #myContent1 and #myContent2.
Use Jquery ajax functions:
$( "#myContent1" ).load( "ajax/test1.html" );
$( "#myContent2" ).load( "ajax/test2.html" );
Using page fragments you can load specific divs to specific divs.
For example
$('#mainContainer').load('loadpage.html #nav1div');
Will load stuff inside your mainContainer that appear inside the div nav1div from the loaded page ('loadpage.html'), for more info check out http://api.jquery.com/load/
I need to redirect page if div id found inside the page.
I have this script :
<script>
if (!document.getElementById("locationsHolder")) {
window.location.href = "logged.html";
}
</script>
On the same page I have this
<div class="locationsHolder" id="locationsHolder"></div>
Although I have everything right it loads logged.html page whatever id I put on getElementById. i.e. getElementById("notexist")
You should do if (document.getElementById("locationsHolder")) since you want to do something if the div is found. Also you should put the script at the end of document or use jQuery $(document).ready() to make sure the entire page is loaded prior to running the script.
Maybe this will do what you need:
<!-- Put the following somewhere in the head block: -->
<script type="text/javascript">
window.onload = function(){
if(document.getElementById("locationsHolder") == null){
// Do something here if the ID is NOT found on the page
}else{
// Do something here if the ID IS found on the page
document.location = "logged.html";
}
};
</script>
you probably tested for the existence of div id before even the page has been loaded.
I would suggest you to either place the script after the div id or invoke the call only after the onload event.
window.onload=function(){
// your code
}
you should ask if it is == null. try this in the developer tool.
!null --> true
!"" --> true
!document.getElementById("locationsHolder") is always true.
you should do something like
!document.getElementById("locationsHolder") == null
It was the '!' that I remove it and script was before div id. Now it's working.
I need it this because I want home page redirected if another page contain a div id. I have another script inside index file that looks for page2 if contain div id , and it worked until I made this script from this topic that checks if that div is present on the page.
So, this script is one home page and checks if div id found on page2 and loads it on home page :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#result').load('Page2.html #intro');
});
</script>
</head>
<body>
<div id="result"></div>
Code from page2:
<div id="result"><div id="intro">Hi, this is the Intro!</div></div>
Now the script from this topic can't find div id "intro" , and actually it dosen't load as bellow script search for 'intro'(and jquery above stops working), but if I search for other div from the page is working Must be a conflict.
<script>
if (document.getElementById("intro")) {
window.location.href = "logged.html";
}
</script>
What is wrong?
Maybe there is another more simple way to trigger redirection if page.2 contain div id "intro" ?
I tried to trigger redirect directly from page1 with this script but won't work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>
<script type="text/javascript">
if ('page2.html #intro').length === 0){
window.location.href = "logged.html";
}
</script>
I have this code snippet:
<div id="div1">
</div>
<div id="div2">
<h3>This is the content</h3>
<script type="text/javascript">
alert('This is the content');
</script>
</div>
<script type="text/javascript">
jQuery('div#div2').appendTo('div#div1');
</script>
Using this code, alert message will be displayed twice (once when the page is loading, and then when jQuery re-execute the script when it execute appendTo method?
Any idea of how to use jQuery to conveniently move element (that have script tag) around without re-executin the javascript?
Thanks.
Once the <script> has executed you don't need it any more, so you could remove it before moving #div2.
$('#div2 script').remove();
$('#div2').appendTo('#div1');