Solved

Reload specific iframes using jQuery

Posted on 2011-03-02
4
1,284 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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.
The viewer will learn how to dynamically set the form action using jQuery.
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…

828 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