Solved

How to check if iframe fails to load? jquery?

Posted on 2010-09-04
7
7,125 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

743 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

13 Experts available now in Live!

Get 1:1 Help Now