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

x
?
Solved

How can I utilize AJAX to reload the contents of iFrame every 30 seconds?

Posted on 2010-08-24
16
Medium Priority
?
979 Views
Last Modified: 2012-05-10

The iFram on my page displays different aspx pages, switching between the 4 pages every 30 seconds. As of now I am using javascript and jquery and wondering if i could utilize AJAX.

Each aspx page contains flash
0
Comment
Question by:YZlat
[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
  • 8
  • 7
16 Comments
 
LVL 9

Expert Comment

by:wellhole
ID: 33513687
You don't need ajax if you're only refreshing an iframe. Just use javascript on a 30 second timer that changes the src for the iframe.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33513917
But then the whole page gets refreshed whenever iFrame gets refreshed
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33513969
Oh, i misunderstand your question then. You absolutely should use ajax to change the content of the iframe contents. Just use ajax to talk to your server for content, somehow identify your control in the iframe, and replace it with the result from your server connection. This is an example of javascript  I used to replace content on my page.
$.ajax(
  {
  	type: "POST",
  	dataType: "json",
  	url: "tireSearch/VehicleYears.aspx",
  	data: { VehicleMake: vehicleMake },
  	success: function(result) {
  		var options = "<option>SELECT YEAR</option>";

  		for (var i = 0; i < result.Years.length; i++) {
  			options += "<option>" + result.Years[i] + "</option>"
  		}

  		$("[name='VehicleYear']", searchForm).html(options);

  		if (result.Years.length == 1) {
  			$("[name='VehicleYear']", searchForm).val(result.Years[0]);
  			VehicleYearChange($("[name='VehicleYear']", searchForm));
  		}
  		else {
  			$("[name='VehicleMake']", searchForm).removeAttr("disabled");
  			if (result.Years.length > 0) {
  				$("[name='VehicleYear']", searchForm).removeAttr("disabled");
  				$("[name='VehicleYear']", searchForm).focus();
  			}
  		}
  	}
  });

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 35

Author Comment

by:YZlat
ID: 33514355
That's why I posted a question here, because I need help doing what you described
0
 
LVL 35

Author Comment

by:YZlat
ID: 33541480
wellhole, could you help me with that? I am a beginner with AJAX
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33541630
To do ajax, your javascript must use something to the effect of the code I posted before. My code uses the POST method to access the url member passing it the data members, expects a result of the datatype json, and finally when and if its successful it'll run the function in success with the result parameter.

I'm not going to explain jquery since you should understand that already and if not then you should check out the examples on the jquery homepage because there are very good examples there.

Below is the codebehind for the aspx page my above javascript is trying to access. It should be very self explanatory if you have coding experience. You'll pretty much just have to fill in result.Years to get results for your ajax. You can also return more than 1 member in result and you can change the type of member in the response from a list to anything else.
Imports System.Runtime.Serialization
Imports System.Runtime.Serialization.Json

Partial Class TireSearch_VehicleYears
  Inherits System.Web.UI.Page

  <DataContract> Public Class RequestResponse
    <DataMember()> Public Years As List(Of String) = New List(Of String)
  End Class

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim result As RequestResponse = New RequestResponse
    Dim vehicleMake As String = Utilities.IsNull(Request.Form("vehicleMake"))
    result.Years = TireSearchVehicles.VehicleYears(vehicleMake)
    Response.Clear()
    Response.ContentType = "application/json"
    Dim jsonSerializer As DataContractJsonSerializer = New DataContractJsonSerializer(GetType(RequestResponse))
    jsonSerializer.WriteObject(Response.OutputStream, result)
    Response.Flush()
    Response.End()
  End Sub
End Class

Open in new window

0
 
LVL 35

Author Comment

by:YZlat
ID: 33557672
but what it has to do with switching content of iFrame?
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33557988
I gave you code using jquery to utilize ajax and change web content and I even gave you the backend code to return results to the ajax call. If this doesn't get you anywhere then you should be asking for help with javascript in general.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33628522
wellhole, with all due respect, your code has nothing to do with iframes
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33628754
YZlat, can you rephrase your question in a less obscure way? Be more precise to the exact problem. Apparently, I'm giving you answers to a question you're asking which you then say is not the question you're asking.
0
 
LVL 35

Author Comment

by:YZlat
ID: 33637275
I though I was clear:  have an iFram and I want to display different aspx pages in my iFrame so that every 30 seconds new aspx page is displayed in the iFrame. I have 4 aspx pages I want to display and each of them displays a flash file. I would like to do that with AJAX.
0
 
LVL 9

Expert Comment

by:wellhole
ID: 33639160
Then, you shouldn't have objected to my very first post.
var frames = Array('http://www.google.com/', 15,
    'http://www.yahoo.com/', 37,
    'http://www.ask.com/', 12,
    'http://www.dogpile.com/', 14);
var i = 0, len = frames.length;
function ChangeSrc()
{
  if (i >= len) { i = 0; } // start over
  document.getElementById('frame').src = frames[i++];
  setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;

Open in new window

0
 
LVL 35

Author Comment

by:YZlat
ID: 33645673
I already have javascript code similar to this and iFrame gets refreshed when the whole page gets refreshed. I'd like to utilize AJAX to do that.

To clarify: I can refresh the page every 30 seconds and change the aspx page displayed in iFrame, that's what I've been doing for over a year. My question is how to do that utilizing capabilities of AJAX
0
 
LVL 9

Assisted Solution

by:wellhole
wellhole earned 400 total points
ID: 33646226
You do so by combining the ajax code with the timer code that refreshes the iframe.

You'll want to create a somepage.aspx file similar to the one I posted in post id 33541630 to return the result of the new url for the iframe.
function ChangeSrc()
{
  $.ajax({
     type: "POST",
     url: "somepage.aspx",
     data: ({paramname1 : datavalue1, paramname2 : datavalue2}),
     dataType: "json",
     success: function(msg){
       document.getElementById('frame').src = msg;
       setTimeout('ChangeSrc()', 30000);
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
       setTimeout('ChangeSrc()', 30000);
     }
   });
}

window.onload = ChangeSrc;

Open in new window

0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1600 total points
ID: 33652062
You may have a problem using AJAX for this because of the Flash.  I also noticed this question may be ending or closing but, I noticed it, and want to clarify something.

When you use AJAX you would not also use a frame/iframe.  The point of AJAX is to make replace the frame/iframe.  I am not sure why your refresh of the content in an iframe would refresh the whole page but, if it is happening, then that can be changed.  However that would not need AJAX.  It would just be javascript that would reload the frame with the next URL.

For AJAX you would replace the iframe section with a div or other "container" html element.  The AJAX code would dynamically reload the contents of that div or container.  A problem though is if you are trying to show a complete web page.  An iframe/frame can do this because it is like another window.  However with AJAX the "window" or reloading part is part of a page.  You can't fill it with the html for a complete page.  Basically, when using AJAX, you are getting the code for just part of a page.

For example, if you were to use AJAX to dynamically validate a person's typing in an input box the AJAX code is just filling in some part of that web page.  In the case where AJAX is used to validate a member name (i.e. it is unique) then the AJAX code (javascript that runs some other server code using an "xmlhttp" object) would just show a message in a "container" right next to the input box.

If you have to show a complete web page then you should stick to an iframe.  There are some elaborate ways to do it without an iframe or frame but they are not easy (and involve more than just "ajax" code).

Let me know how this helps or if you have a question.

bol
0
 
LVL 35

Author Comment

by:YZlat
ID: 33661924
b0lsc0tt, thanks a lot! that's exactly what i was looking for and exactly what I did but I ran into some issues displaying flash. Could you please take a look at my other question from 09/08/10:

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_26459170.html
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Suggested Courses

609 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