Solved

How to check if iframe fails to load? jquery?

Posted on 2010-09-04
7
7,837 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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

How our DevOps Teams Maximize Uptime

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
testing a web application for ipad on windows pc 3 36
selected value 16 26
Html using "Or" in condition 3 27
Can anyone help me find this preloader? 51 42
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…
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …

749 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