I would like to auto reload an iFrame that is in my webpage called "dispatch1.php" every second without having it constantly blinking. Here is my line of HTML code with the iFrame.
<iframe id="dispatch1" src="table.php" name="dispatch1" width="800px" height="400px" style="margin-right:10%;margin-top:10%;"></iframe>
This is the code that I have so far with the jQuery, but it isn't working.
<script>
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh,1000);
$.get('table.php', function(data) {
$('#dispatch1').html(data);
});
}
</script>
Edit: I have fixed the problem. I just remove the code from the iFrame and put it into the dispatch1.php file.
Related
I'm parsing src of an iframe through jquery. As soon as I trigger an event, PDF is displayed in the iframe and gain it disappears and loading again slowly. What would be the cause for it?
<script>
function viewpdf(){
$('iframe').attr('src', '<?php echo $pdf;?>');
;}
viewpdf();
</script>
<button onclick="viewpdf();">click</button>
<iframe id="iframe" style="width:100%;height:92.5%;"></iframe>
When the page loads viewpdf() function will execute and when I click button again pdf should be loaded into the iframe but it displays pdf suddenly and disappers and again pdf is loading. And sometimes even pdf exists in the folder am getting the error like below
I think to achieve what you said in the comment, your code is not a good way. Do it like this...
<script>
$(document).ready(function(){
$('iframe').attr('src', '<?php echo $pdf;?>');
$("#close").click(function(){
$("iframe").hide();
});
$("#open").click(function(){
$("iframe").show();
});
});
</script>
You should not load the PDF again and again if you are not changing the src.
Try this..
function viewpdf(){
$('#iframe').attr("src", "http://www.education.gov.yk.ca/pdf/pdf-test.pdf");
}
<button onClick="viewpdf()">click</button>
<iframe id="iframe" style="width:100%;height:92.5%;"></iframe>
</div>
I have a form inside a DIV (normally the div is hidden using "display:none;")
The user open the DIV with: onclick='$("#Details").show("slow");
Fills out the form and save the data.
I don't want the entire page to be reloaded, and I need only this DIV to be reloaded
I tried:
function(data) {
$('#Detalils').load(location.href + ' #Detalils');
});
and:
$("#Detalils").load(location.href + " #Detalils, script");
and:
$('#Detalils').load(location.href + ' #Detalils', function() {
$('#script').hide();
})
where in #script I put my script
In this div I have some script, and because of the jQuery on load script execution, the script is not executed.
I cannot put the script in an external file, it must be in the page body.
Is there a way to execute the script a well?
Thanks
Your actual Javascript code should not be within the div, that is the issue. If you wish to reload the form for the user to enter new data, then use ID's on the elements within your forms and write your JQuery code outside of it or in an external file, here is a simple example :
Instead of something like :
<form>
<input type="button" onclick="alert('hello');"> Click me ! </input>
</form>
Do something like :
<form>
<input id="myButton" type="button"> Click me ! </input>
</form>
<script type="text/javascript">
$("#myButton").click(function()
{
alert('hello');
});
</script>
You will have to adapt your code to this, of course, but you don't have another choice. HTML code can be removed and added at will, but Javascript code must not be treated the same way. There are many reasons for this, but one reason is that the browser will only load the Javascript functions once, for obvious optimization reasons.
The works within my local environment. Give it a shot in yours.
The HTML:
<div id="wrapper">
Remove
Reload
<div id="Details">my details box</div>
</div>
The jQuery:
<script type="text/javascript">
function mload() {
/*LOAD IN MY EXTERNAL STUFF*/
mtarget = $('#Details'); //the element on your page, that houses your external content
mscript = 'external.js'; //the js script required for your plugin to work
mtarget.load("external.html", function(){
$.getScript(mscript, function() {
//run the plug-in options code for your external script here
});
});
//*/
}
function madjustments() {
/*ADJUST THE LOADING PROCESS*/
//remove the load request on click from your remove button
$('#mremovebtn').on("click",function(e) {
e.preventDefault();
$('#Details').children().remove();
});
//reload the request on click from your reload button
$('#mreloadbtn').on("click", function(e) {
e.preventDefault();
mload();
});
//*/
}
(function($){
mload();
madjustments();
})(jQuery);
</script>
You will obviously need 2 additional files. One called external.html and another called external.js, for my demo code to work. But you can change the naming process to whatever works for you.
Extra:
Set a class in your external html file (on the parent element), for example #external. And by default, set the CSS to display:none in the style sheet. Then when the page loads in, simply show() it in the jQuery code.
I add a html page in my CI project using iframe. Now i want to remove first div from included page. there is no id for that div. i write a jquery code but it removes whole iframe. here it is
$(document).ready(function(){
$("iframe").load(function(){
//$('div:first').remove();
$("body").find("div:first-child").remove();
});
});
html
<div class="span12">
<iframe id="patrolIframe" width="100%" height="900" frameborder="0" scrolling="yes" allowtransparency="true"
src="http://...../map.html"></iframe>
</div>
$(document).ready(function(){
$("iframe").load(function(){
$('div')[0].remove();
});
});
try
$(document).ready(function(){
$("iframe").load(function(){
$("body",this).find("div:first-child").remove();
});
});
Try
$(document).ready(function(){
$("iframe").load(function(){
//$('div:first').remove();
$(this).find("div:first-child").remove();
});
});
You $("body") selector selects the body of the page your jquery is loaded in, that is, the whole page. Im guessing your iframe is inside the first div of that page, so it gets removed. I dont use iframes, but i assume the $(this) on that case is refering to the iframe so it should work.
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
I'm using Fancybox to load and Iframe with a form. After I post it, onsubmit calls "return onSubmitForm()"
<script type="text/javascript">
function onSubmitForm() {
parent.jQuery.fancybox.close();
window.parent.location.reload(true);
}
</script>
So Php/Smarty is loading the dynamic content OK in my database. I can also close the Iframe. BUT, after reloading the parent, it's dynamic content is not updated.
I have doing several tests and it only works occasionally (1 in 10). The previous content gets sticky.
I also started using "nocache" or "caching=0" (for PHP/Smarty variables). So far it doesn't help.
If I reload manually the browser, it works.
Thanks!
Diego
Inside the iframe (with the form) just try closing the box
function onSubmitForm() {
parent.jQuery.fancybox.close();
}
...then, in the parent page (from where you called fancybox) add this API option to your script... something like
jQuery(".fancybox").fancybox({
type: "iframe",
width: 640, // or whatever
height: 320,
afterClose : function() {
location.reload();
return;
}
});