Solved

How to check if iframe fails to load? jquery?

Posted on 2010-09-04
7
8,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
[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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
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…

691 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