Solved

Reload specific iframes using jQuery

Posted on 2011-03-02
4
1,277 Views
Last Modified: 2012-05-11
Hello Experts,

I have several iframes placed within a page.
I hide and show the iframes depending on whether the user is logged in or not.
Currently, when they log in - I show all the 'logged in' specific iframes
and hide all the 'not logged in' specific iframes (and vice versa).

However, I need all the 'logged in' iframes to reload as they show new details as soon as the user logs in.
If I have
<iframe id='iframe1-in' src='a.php' />
<iframe id='iframe1-not' src='a1.php' />
<iframe id='iframe2-in' src='b.php' />
<iframe id='iframe2-not' src='b1.php' />

How can I force iframe1-in and iframe2-in to reload their respective src files?

Thanks!
0
Comment
Question by:jagku
4 Comments
 
LVL 5

Accepted Solution

by:
h4mi earned 250 total points
ID: 35018237
$('#iframe').each(function() {
 this.contentWindow.location.reload(true);
});
0
 
LVL 19

Assisted Solution

by:Bardobrave
Bardobrave earned 250 total points
ID: 35018277
I always strongly recommend not to use iframes into any webpage.

Iframes are deprecated by W3C and it's use probably won't be supported in a near future by browsers.

However, to answer your question. I supose you can force a reload of the file reloading the own iframe object, so something like:

getElementById("iframe1-in").contentDocument.location.reload(true);

should work.
0
 
LVL 7

Expert Comment

by:JosephEricDavis
ID: 35018406
You should just be able to use jQuery to reset the src attribute on the tag.

Take a peek at the html doc below.
<!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>
    <title>Untitled Page</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnRefresh').click(function () {
                $('#testFrame').attr('src', 'http://www.kc-soccer.com');
                return false;
            });
        });
    </script>
</head>
<body>
    <input id="btnRefresh" type="button" value="Refresh" />
    <iframe id="testFrame" src="http://www.kc-soccer.com" />
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:jagku
ID: 35018548
Hi,

Many Thanks.
I have marked the first one as the best solution - because this is the first response I got. The other one also works.

Bardobrave - you mention iframes have been deprecated by W3C. When was is deprecated?
0

Featured Post

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.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

863 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

24 Experts available now in Live!

Get 1:1 Help Now