Solved

How to check if iframe fails to load? jquery?

Posted on 2010-09-04
7
7,299 Views
Last Modified: 2012-05-10
I have this jquery code right now and it's working fine. What it does it when a user clicks the submit button, it would hide the form, show the loader, then submit the data to a link and load the output in an iframe.

$(document).ready(function() {

	$("#xxx_form").validate({
		submitHandler: function() {
			$('#input_form').hide('slow');
			$('#loader').show('slow');
			form.submit();
		}
	});
	
	$("#xxx_frame").load(function (){
		$('#loader').hide('slow');
		$('#history').show('slow');
		$('#xxx_frame').show('slow');
	});
});

Open in new window


This is working fine. What I need is how to check if the iframe loaded fine or not. During my testing their are times when the iframe would timeout or give an error that it can't connect to the server. Due to ISP failure. Now I need to check for this kind of errors, how can I do this?
0
Comment
Question by:Bandai2
7 Comments
 
LVL 1

Expert Comment

by:acuraxjasim
ID: 33604890
try to set a variable on the iframe file and use condition statement to check weather the variable is present.
0
 

Author Comment

by:Bandai2
ID: 33605128
how?
0
 
LVL 14

Expert Comment

by:sam2912
ID: 33605157
http://www.codeguru.com/forum/showthread.php?t=396531#post1440061
http://www.dyn-web.com/tutorials/iframes/
http://codingforums.com/showthread.php?t=22861

Apparently you could try to do this:
<iframe id="theframe"></iframe>



<script type="text/javascript">

document.getElementById('theframe').onload = function() { alert('iframe loaded!'); }

</script>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 82

Expert Comment

by:leakim971
ID: 33605531
0
 

Author Comment

by:Bandai2
ID: 33606317
sam2912: the example code you provided doesn't work.. it gives the alert message even if the submit button hasn't been pressed yet.

leakim971: doesn't work as well, it gives an error with jquery.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33606581
If you set url of an image on the same site as the iframe, we may use it's error handling :


            $(".xxx_frame").error(function(e){
                  alert("connection error!");
            });

With :

< img src="" class="xxx_frame" style="display:none" / >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
/*
		$("#xxx_form").validate({
			submitHandler: function() {
				$('#input_form').hide('slow');
				$('#loader').show('slow');
				form.submit();
			}
		});
*/
		$("#xxx_frame").load(function() {
			var url = $(this).attr("src");
			var url = url.substr(0, url.lastIndexOf("/"));
			$(".xxx_frame").attr("src",  url + "verySmallPicture.jpg");
			$('#loader').hide('slow');
			$('#history').show('slow');
			$('#xxx_frame').show('slow');
		});

		$(".xxx_frame").error(function(e){
			alert("connection error!");
		});

	});

</script>
</head>
<body>
<form id="xxx_form"></form>
<img src="" class="xxx_frame" style="display:none" />
<iframe src="http://www.bad.url" id="xxx_frame" ></iframe>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33818015
Thanks for the points!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now