Link to home
Start Free TrialLog in
Avatar of YZlat
YZlatFlag for United States of America

asked on

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


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
Avatar of wellhole
wellhole

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.
Avatar of YZlat

ASKER

But then the whole page gets refreshed whenever iFrame gets refreshed
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

Avatar of YZlat

ASKER

That's why I posted a question here, because I need help doing what you described
Avatar of YZlat

ASKER

wellhole, could you help me with that? I am a beginner with AJAX
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

Avatar of YZlat

ASKER

but what it has to do with switching content of iFrame?
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.
Avatar of YZlat

ASKER

wellhole, with all due respect, your code has nothing to do with iframes
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.
Avatar of YZlat

ASKER

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.
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

Avatar of YZlat

ASKER

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
SOLUTION
Avatar of wellhole
wellhole

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of YZlat

ASKER

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:

https://www.experts-exchange.com/questions/26459170/Displaying-flash-file-from-a-page-inside-a-div-using-AJAX.html