JavaScript - Open New Page In Iframe With Ajax, Javascript & Php.

i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine.

the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same??

this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state.

I don't want the city option to change upon a normal page refresh. how do I go about this?

below are the city, hotel select options & iframe
Code:

    <form name="hotelslist" id="hotelslist">
        <select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
          <option value="Baddeck">Baddeck</option>
          <option value="Banff">Banff</option>
        </select>
    <select id="hotelnames" name="hotelnames" onChange="loadHotel();">
          <option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
        </select>
      </form>

<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>

below is my javascript functions
Code:

function loadHotel() { 
    var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value; 
		window.frames["hotelframe"].location = destURL; }

var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
	hotelslist.hotelnames.options.length=0;
	
switch(i)
{	
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new  Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new  Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new  Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new  Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new  Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new  Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}

can some one please advise on a cross browser solution?

thanks in advance.
Omar.

Code:

oaktree.addItem("RC Mail", branch1, "rcmail/") //Add this item to branch2

I can open it up in the current page, but the menu is in a frame and I need to open it in a fram called "home".

How can I do that~??

Hi,

I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case --

1) When parent page is opening popup window, it is getting refreshed (required from client for some reason).

2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side).

With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same.

Currently I am using below code to open popup

[CODE]
function OpenWindow()
{
if(winPop && !winPop.closed)
{
alert("Popup is already open");
}
else
{
winPop = window.open('MyPopupPage.aspx');
}
}
[CODE]

Please help me to get rid of this problem.
Thanks in advance.

- Bhasker

Hello folks! I don't know anything about JavaScript but I found a really cool snippet I use a lot. It will randomize images and each image can open a new link. It looks like this:

----------------------------------------------------
<script language="JavaScript" type="text/javascript">

function random_imglink(){

var myimages=new Array()

myimages[1]="/img/images1.jpg"
myimages[2]="/img/images2.jpg"
myimages[3]="/img/images3.jpg"

var imagelinks=new Array()

imagelinks[1]="http://www.google.com"
imagelinks[2]="http://www.yahoo.com"
imagelinks[3]="http://www.alexa.com"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}

random_imglink()
//-->
</script>
-------------------------------------------------

Now, my question is, can I link to open a document within an iFrame on my page?

Please don't tell me not to use iframes or whatever, I'm not a professional, just want to see if this works.

I have a PARENT HTML page. Within it, there is an iFrame. Let us call page inside of iFrame is CHILD.

I would like to following things:

1. When click button in CHILD, A NEW full size page opens and mouse focus moves to NEW.

I used following scripts:

function openFullWin(urlPara)
{ var windowFeatures = 'menubar=1,modal=0,resizable=1,scrollbars=1,status=1,toolbar=1,width=' + screen.availWidth + ',height=' + screen.availHeight + ',left=0,top=0';
var winNew = window.open(urlPara, '', windowFeatures);
winNew.focus();
this.blur();
}

In Firefox, if only PARENT widow there. It works property. However, if there is another window there, the focus moved to that window rather than the NEW.

In IE, if there is another window there, the NEW open as a tab in that window, rather than as tab in PARENT.

2. When click button in CHILD, A NEW full size page opens and mouse focus moves to NEW. At meantime, the CHILD changes to a NEWCHILD page, but not on focus.

I am never being able to do this. Please help.

3. When click button in CHILD, A NEW full size page opens to replace PARENT. Of course, the CHILD disappeared too.

I am never being able to do this. Please help.

I have two pages A and B.
I have a link in the page A.
I have two iframes in the page B.

In practice, the link in the page A must open the page B and the link's href must open in the second iframe of the page B.
Is there any script that does this?

Hi,

I am using a password protection javascript code that works very well, but my problem is that I would like to edit the code so that the ".html" page will open inside an iframe on the main page. I think the code "window.location=verification+extension" needs to be edit to indicate the iframe that I want the html page to open in. The complete code is below in bold and parts of code in red text is where I think I need to edit, but I don't know how to edit the code to do what I want.

Can anyone please Help Me, Thanks to all that respond.


<!--
var pass=new Array()
var t3=""
var lim=7
pass[0]="TLMXe8VqAwsAllw"
pass[1]="YeWAc9pfP1rmGrA"
pass[2]="M8ljslaPqg0mQQp"
pass[3]="SRdDwXWa0LSsGB"
pass[4]="83I2WyO06m3aUjs0"
pass[5]="453I2WyO06m3aUjs"

var extension=".html"
var enablelocking=0
var numletter="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
var temp3=''
var cur=0

function max(which){
return (pass[Math.ceil(which)+(3&15)].substring(0,1))
}

function testit(input){
temp=numletter.indexOf(input)
var temp2=temp^parseInt(pass[phase1-1+(1|3)].substring(0,2))
temp2=numletter.substring(temp2,temp2+1)
return (temp2)
}

function submitentry(){
t3=''
verification=document.password1.password2.value
phase1=Math.ceil(Math.random())-6+(2<<2)
var indicate=true
for (i=(1&2);i<window.max(Math.LOG10E);i++)
t3+=testit(verification.charAt(i))
for (i=(1&2);i<lim;i++){
if (t3.charAt(i)!=pass[phase1+Math.round(Math.sin(Math.PI/2)-1)].charAt(i))
indicate=false
}0
if (verification.length!=window.max(Math.LOG10E))
indicate=false
if (indicate)
window.location=verification+extension
else
alert("Invalid password. Please try again")
}
//-->

Hi all. First post so please be gentle.

My sites has a menu on the home page linking to a dozen other pages. My intention is to open those items into a main iframe also on the home page.

I have put the <base target="iframe" > in the <Head> area and all seems to work in Opera but Internet Explorer and Firefox will both open new windows instead of loading into the iframe.

Having said that. Links from WITHIN the iframe will open correctly in all browsers.

Ideas in newbie-speak very much appreciated
Regards, Phil

Hi,

Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks.

Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once.

Does anyone know how to do this please?

Thanks so much for your help.

I have a slideshow on the "Projects" page. The javascript is external.
There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that?

Here's the code I have for the slideshow:

Code:

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var current = 0;

function prevPic() {
	clearInterval(interval);

	if(current > 0) {
		current--;
		
		if(current == 0) {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow_off.jpg";
		} else {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";			
		}
		update();
	}		
}

function nextPic() {
	clearInterval(interval);

	if(current <  slides.length - 1) {
		current++;
		
		if(current == slides.length - 1) {
			document.getElementById('next').src = "images/right_arrow_off.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";
		} else {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";			
		}
		update();
	}
}

function update() {
	var pic = slides[current];
	document.getElementById('project_title').innerHTML = pic.title;
	document.getElementById('project_image').src = "images/slides/" + pic.image;
	document.getElementById('project_location').innerHTML = "<span>Location:</span> " + pic.location;
	document.getElementById('project_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation;
	document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length;
	
	if(pic.link) {
		document.getElementById('project_link').style.display = "block";
		document.getElementById('project_href').href = pic.link;
	} else {
		document.getElementById('project_link').style.display = "none";		
	}
}

//preload slides
var images = [];

for(i in slides) {
	var img = new Image();
	img.src = "images/slides/" + slides[i].image;
	images.push(img);
}

I'm writing a web app and so far:

- the user enters some information on the web page
- user data is submitted to a PHP script (using AJAX, so w/o a page refresh) which processes the data and generates a list of items that need to be returned to the user

Now, I need to return the data -- preferably in the form of a list, where each returned item has a check box (so the user can choose which items in this list the subsequent operations will affect).

However, can a PHP script effectively add/remove contents from such a checklist, or would this be something done better through Javascript only? For example: this, I think, or something similar.

Luckily the PHP script that processes the data is short at this point, so I'd like to know whether I should rewrite it in Javascript (assuming Javascript can deal with REST well) to avoid a hassle.

Hi guys,

I need to redirect a page to another url when it detects that the page is opened inside an iframe.

I need help with this
<script >
if(location.href != top.location.href){ window.location = 'http://myurl.com' }
</script>

- check my attachment index.zip

Thx.

We have an html page which brings in content dynmically using Ajax. So the page starts out with certain content, and when a particular link is clicked, the content is swapped out with new content. With this approach, the back button on the browser does not work, because the URL didn't actually change. How could a user bookmark the new page with the second set of content? Is this even possible?

Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked.

[hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary]

The AJAX [AJAX.js]:

Code:

function loadurl(generate.php) {
 
var ajax = false;
 
// Create the object:
 
// Choose the objecttype, depending on what is supported:
if (window.XMLHttpRequest) {
 
    // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
    ajax = new XMLHttpRequest();
 
} else if (window.ActiveXObject) { // Old IE-browsers
 
    // Make the type Msxml2.XMLHTTP, if possible:
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) { // Else use the other type:
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) { }
    }
 
}
 
// Retrieving the data from the page
 
 if (ajax) {
 
   alert("url:generate.php" + url);
 
   ajax.open('GET', url);
 
   // Sends request
   ajax.send(null);
 
   // Function that handles response
   ajax.onreadystatechange=function(){
    // If everything is OK:
     if ( (ajax.readyState == 4) && (ajax.status == 200) ) {
          // Returns the value to the document
          alert(ajax.responseText);
	 }
    }
 
 
 } else { // AJAX is not useable
     alert('It is not possible to connect, please update your browser.');
 }
 
}

The PHP [generate.php]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>

<?php
 
if($_GET['act'] == "generate_quotes") {

$db = mysql_connect("*", "*", "*") or die ("Unable to connect to database.");
mysql_select_db("quote") or die ("Unable to select database.");


$result = mysql_query( " SELECT * FROM `quote`  ORDER BY RAND() LIMIT 0,1 " );
$fetch = mysql_fetch_array($result); 


echo "<blockquote>".$fetch['q_quote']."</blockquote>";
mysql_close($db);

} else { 

echo "<img src=\"1.png\">";

}
?>
</body>
</html>

The page where I'm trying to bring them together [PULL.php]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="ajax.js" type="text/javascript"></script>
</head>

<body>
           <a onClick="loadurl('generate.php'); return false;">Click Here</a>
</body>
</html>

I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated.