Solved

Reload specific iframes using jQuery

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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)

636 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