Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to check if iframe fails to load? jquery?

Posted on 2010-09-04
7
Medium Priority
?
8,788 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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 …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

610 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