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);
});
Related
Aside from it not being "recommended" we needed to do this for a specific project. Basically I've got a site master page that is displays a "Please wait while loading..." div to not display a page until it has been loaded. Reason being is we have many 3rd party tools that are quite slow to load.
In any event we have something to this effect:
<script type="text/javascript">
$("#msg").show();
$('#pageBody').css('opacity', 0);
$(window).load(function () {
$("#msg").hide();
$('#pageBody').css('opacity', 1);
});
</script>
We also set a timeout in the case that something doesn't load, we want the page to come back...
setTimeout('$("#pageBody").css("opacity", 1)', 1000);
The html is as simple as this snippet:
<body id="pageContainer">
<div id="msg" style="text-align:center;font-weight: bold;">
Loading, please wait...<br/>
<img src="/Images/ajax-loader.gif" alt="Loading please wait..."/>
</div>
<div id="pageBody">
</div>
</body>
The div id=pageBody is a container for all my .aspx pages that use this site master. The issue is when I go to one of these pages, it seems that I see the loading please wait... but then I still see the page for say 1/2 a second but then it goes away and comes back as fully loaded..its a bit noticeable to the user so the experience isn't as great.
I'm not really a front end developer so I am not certain if I am doing something wrong. Should I go to my .aspx pages and be doing anything in the jquery there...I was under the assumption that the site.master would handle everything.
Set the appropriate CSS for the #msg element (display: block) and #pageBody element (opacity: 0), instead of running $("#msg").show(); $('#pageBody').css('opacity', 0);. Then, all you need is the $(window).load handler.
That way, by default, the correct things are hidden/shown as the page is rendered, and only when you want to hide/show things ($(window).load) will they be correct.
Here's how I'd set it up (of course, some of it is for demo):
HTML -
<div id="msg">
Loading, please wait...
</div>
<div id="pageBody">
<div>HERE'S</div>
<div>SOME</div>
<div>CONTENT</div>
</div>
CSS -
#msg {
text-align: center;
font-weight: bold;
display: block;
}
#pageBody {
opacity: 0;
}
JS -
$(document).ready(function () {
// Simulate some time before everything's loaded
setTimeout(function () {
$("#msg").fadeOut(function () {
// Wait for #msg to fade out before fading in #pageBody
$("#pageBody").animate({
opacity: "1.0"
}, 800);
});
}, 1500);
});
DEMO: http://jsfiddle.net/X7nBN/
Create the overlay directly in the HTML using CSS instead of having Javascript show the overlay.
It's basically the same setup you have except the overlay will be visible always and only hidden when the page is fully loaded.
You would have something like this on your header:
<!-- jQuery assumed to be loaded prior to this code -->
<script type="text/javascript">
$(function(){
$(document).load(function(){
$('#msg').hide();
});
});
</script>
So, basically you do not have to use display:none or opacity:0 or visibility:hidden for your page. Just put the overlay directly over it, it should be covered completely. Then, when the page is loaded just remove or hide the overlay to show the webpage.
I'm trying to do a .show() on page load, however, the div is not yet loaded
It looks like jquery is running before a certain div has been created.
Wondering how can I solve this ?
my code consists of the following:
<script>
function choose_category(category_id)
{
$('#' + category_id).show(); // this is the part which doesn't work, as on page load the div mentioned later is not yet available.
}
</script>
<script>
function load()
{
choose_category('<?php echo $model->category_id->__toString(); ?>');
}
</script>
<img onload="load();" src="http://media.sociopal.com/ires/images/homepage/status-socio-icon.png" alt="" width="0" height="0" style="display:none;"></img>
The html embeds php code which runs a loop and generates (among other divs) the following div:
<div id='thecategoryid!!' onclick='choose_category("51d552eb2c8751766000016d");return false;' class = 'settings_menu_item'>
<p class='settings_menu_item_text'>Design Channels<i class='icon-chevron-right right'></i></p>
</div>
However, as mentioned, when the page loads (only when the page loads) the .show() does nothing because it looks like the div is not yet created.
If I debug this in chrome and go step-by-step, there is no problem (the div is created on time and the .show() works fine)
Will appreciate your help.
I can see no error in the code you have posted.
It might be that your assumption of what $.show() does is wrong.
$.show simply removes any occurences of "display: hidden;" in the inline styling of the selected element/node.
<div style="color:red; display:none;">
would become
<div style="color:red;">
http://api.jquery.com/show/
Instead of using that inline onload stuff, try this giving your image an id (we'll use img here.
Since you are calling choose_category with an inline click event listener, do not place that function inside $(document).ready as it won't be able to be accessed.
Then, use the following JavaScript:
$(document).ready(function(){
var img = $("#img");
img.load(function(){
load();
});
if (img[0].complete)
img.load();
});
What this is doing:
When the doc is ready, get the image. Attach a load event listener. If the image has already loaded by the time we got here (especially with caches), trigger a load event anyway.
Also note that you shouldn't put special put exclamation points in your id.
I have a page that loads an external HTML page into an iFrame. There are two problems I am facing with this:
The iFrame is always a fixed height, but I want it to expand
vertically depending on the height of the content.
The content inside the iFrame can not inherit the CSS styles
attached to the HTML page that contains it. The HTML inside the
iFrame has to have it's own link or separate style sheet.
I could be wrong about either of those points, so if I am, please let me know and then I will continue to use the iFrame.
Otherwise, is there a simple Javascript call that can load an external HTML file into a DIV?
Just to be clear, since it seems some people have misunderstood me:
I am asking how to replace an iframe with a DIV and Javascript in order to get the functionality I mention above. I am not looking for ways to make iFrames behave differently.
(I thought this would be fairly common, but most of the questions and information I've found in this site and on the web seems to be situation specific and asks for additional functionality that I don't need and complicates the issue. However, if I've missed something and this is a duplicate, I wouldn't be offended if this got closed.)
You can make an ajax call to fetch your html page and add it to the div. For example using JQuery:
$.get('yourPage.html', function(data) {
$('#yourDiv').html(data);
});
Read more at: http://api.jquery.com/jQuery.get/
I actually wrote up an answer to a different question, that seems to apply here: https://stackoverflow.com/a/10012302/166661
You've got a server that will return to you information -- you could place this information in an IFRAME... or you can call a JavaScript function to retrieve that information and display it in a location (DIV) you set aside on your page.
Here is a sample HTML page that will retrieve information from the server using AJAX
<html>
<head>
<script type="text/javascript">
function getAreaInfo(id)
{
var infoBox = document.getElementById("infoBox");
if (infoBox == null) return true;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) alert(xhr.status);
infoBox.innerHTML = xhr.responseText;
};
xhr.open("GET", "info.php?id=" + id, true);
xhr.send(null);
return false;
}
</script>
<style type="text/css">
#infoBox {
border:1px solid #777;
height: 400px;
width: 400px;
}
</style>
</head>
<body onload="">
<p>AJAX Test</p>
<p>Click a link...
Area One
Area Two
Area Three
</p>
<p>Here is where the information will go.</p>
<div id="infoBox"> </div>
</body>
</html>
And here is the info.php that returns the information back to the HTML page:
<?php
$id = $_GET["id"];
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON.";
?>
Hope this helps!
#mydiv {
all: initial; /* blocking inheritance for all properties */
}
from How To Isolate a div from public CSS styles?
This solution saved my day.
Use a jQuery plugin to resize the iframe dynamically.
You can't restyle content inside a iframe. What are you planning on using the iframe for? There are often better ways to solve things.
I am asking how to replace an iframe with a DIV and Javascript in order to get the functionality I mention above. I am not looking for ways to make iFrames behave differently.
If you want the functionality mentioned you don't have to replace the iframe. The functionality 2 is easier with an iframe. As for functionality 1, you have two choices:
Put your iframe in a DIV and play with css rules like position absolute and relative plus height at 100%
Add a javascript function to handle the resize event of the window object to resize the iframe
I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
Sometimes the source content loads very slowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.
I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.
Is there any reason you can't listen to the onload event of the iframe itself? It should fire after the child content has loaded.
Something like this:
showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }
So In my case doing the following did for me..
The HTML
<iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>
and I was loading the iFrame on button of a click, so here is the JS
$(document).ready(function () {
$('body').on('click','#btnLoadiFrame',function () {
ShowLoader();
$('#ifrmReportViewer').attr('src', url);
$('#ifrmReportViewer').load(function () {
HideLoader();
});
});
});
You need to define a method that allows your iframe to highlight that it has finished loading, e.g.:
Main page:
var ChildFrameComplete = function()
{
$("#progress").hide();
};
var LoadChildFrame = function()
{
$("#progress").show();
$("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};
sourcelink.html:
$(function()
{
parent.ChildFrameComplete();
});
If the iframe is being sourced from the same domain as the parent page domain, it can call methods defined in the parent page through the window.parent property.
Just give the containing element (this case #myDiv) a background of a throbber and the iframe contents will overlap this when it's done loading.
That's the simplest.
I am dynamically creating an iframe with javascript inside the body.
iframe = m_oYDOM.get("ifAdwords");
iframe.contentWindow.document.body.innerHTML = <script type=\"text/javascript\">function Test(){alert(\"Success\");Test();}</script>";
I am not able to get the alert to work. Can someone help me!
I got this working
iframe = document.getElementByID("iFrameID");
var oDoc = iframe.contentWindow.document;
oDoc.open();
oDoc.write('<html><body><script type=\"text/javascript\">function Test(){alert(\"success\");}Test();<\/script><\/body><\/html>');
oDoc.close();
.innerHTML is only for text changes... Call the script from another *.html file. OR just add onload to the end of iframe like so:
<iframe src="test.html" onload="alert('Success')";>
Heres an example using jQuery that I use to execute javascript when a frame has loaded, I use it when redirecting the user to download a zip file, to control the browser after the download dialog appears.
Add a div to the page that will hold the iframe:
<div style='height: 1px; width: 1px; border: 0;' id='iframediv'></div>
Then call the following to create the iframe with the onload action:
var url = "http://google.com"
$('#iframediv').html('<IFRAME id="downloadAlbum" onload="loadFunction()" src="'+url+'"></iframe>');
Change url and loadFunction as required.