JavaScript - Sending Api Data To Iframe Source

I have a script which creates an element of iframe. I have a button which refreshes the iframe link.

I need to do something to change a variable in the iframe src on every click of the button.

I'll explain the real issue. I have a list of games I have with random name like,

boomer.swf, kingdom.swf, balloon.swf and so on.

So I somehow made this,

Code:

var r_text = new Array ();
r_text[0] = "boomer";
r_text[1] = "kingdom";
r_text[2] = "balloon";

var i = Math.floor(3*Math.random())
var gamedrome = { game: ""+r_text[i]+""};

Now I have a .js file which creates iframe element
Code:

function embed_game(params, options)
{
var data = [];
for(var i in params)
{
data.push(i + "=" + encodeURIComponent(params[i]));
}
data = data.join("&");
var frame = document.createElement("iframe");
frame.src = "http://website.com/embed/game.html?"+ data;
frame.style.width="100%";
frame.style.height="100%";
frame.style.border = "0";
frame.frameBorder = "0";
frame.id="newroom";
....

and another small script to refresh the inner iframe and not the page to change game.

Code:

<script type="text/javascript">
function Reload () {
var f = document.getElementById('newroom');
f.src = f.src;
}
</script>

It all works fine until the game is loaded, but the problem is that if once the game is loaded in site, the iframe source is already set and my button keeps loading the same game. I need to randomize it on every click. Please help me out.

Ok, 'nother head-banger for the hardcore!

I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens.

I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out.

Here's the code:

The snippet on the main page (index.html):

Code:

                <div id="linkListContact" class="LinkList">
				<img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img>
                    <span>
                    <ul>
                        <li>
                            <div><a id="contact">Contact Us</a>
                            </div>
                        </li>
                    </ul>
                    </span>
                </div>

... and the relevant Javascript:

Code:

function setIFrame(frameSource)
	{
		document.getElementById('mainWindow').src = frameSource;
	}

function setContactLink()
	{
		var contactURL = "http://katabasis.spreadshirt.com/shop/imprint"
		document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" );
	}

The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com.

Thanks.

I m trying to send data to my database (Mysql). When I enter things in the prompt box it doesn t go to my database.

Can someone tell me why, please?

Here is my code:

<script type="text/javascript">
function show_prompt()
{
var name=prompt("question");
if (name!=null && name!="")
{
//set the hidden input value to the value entered in the prompt
document.input.purpose.value = name; //document.input referring to the form named 'input'
document.input.submit(); //submit the form
}
}
</script>




<form id="propose" name="input" action="insertpropose.php" method="post"><br/>
<input type="submit" onclick="show_prompt()" value="propose" />
<input type="hidden" name="propose" value="">
</form>


and the insertpropose.php form is:

$propose=$_POST['propose'];


mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$query = "INSERT INTO propose VALUES ('','$propose')";
mysql_query($query);

mysql_close();

Hi there

How to send data from a text feild in GET method using an AJAX call...
I already have codes working

Code:

                to = "interfaces/add_department.jsp";
		parm = "name="+name.value+
                          "&name2="+name2.value;
		alert(parm)
		post(to,parm,callBackFunctionForAddDepartment);

Here the variable name may have "me&you" or "me you" like that.... so how do i encode it so that it reaches properly?

Hi,

I have a problem with sending data from a form to a php script with AJAX. To test if it works, I try to send data from the form, print it in the php with "echo", and then put it back in the initial html file.

My Javascript code is:
Code:

function registerPrivateUser()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
	  alert ("Your browser does not support AJAX!");
	  return;
	}
	
	var postData="firstName="+ document.getElementById("txtFirstName").value;
	var url="classes/users/checkRegistration.php";
	
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("POST",url,true);

	
	//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
	
	xmlhttp.send(postData);
}

The function stateChanged, basically says:
Code:

if (xmlhttp.readyState==4)
	{
		var strResponse;
		strResponse=xmlhttp.responseText;
		alert('Response:' + xmlhttp.responseText);
	}

checkRegistration.php looks like this:
PHP Code:
<?
session_start();
$firstName=$_POST['firstName'];
echo($firstName);
?>

The problem is that the response is empty, but I don't know why. I have checked the input data and the postData variable says "firstName="+input (e.g. "firstName=Robert"), so that's not the error. I have read several forum posts here, but still haven't figured out what I'm doing wrong.
If anyone could please tell me, I would appreciate it alot.

You've probably seen this many times with two dynamic linking select boxes that deals in form or another deal with countries and then cities for the second one or something similar well I have another question about that. I've looked at a few others and well their coding is so different then mine that I don't want to use code for my own project that I don't understand in case I need to reuse it for some other reason down the road.

The user selects a country and with the users selection it passes the countryid as a variable through jquery's ajax fuction as a post parameter to a php process page in which it goes to a table and matches the country id with the db field called country_id in the arenas table. With all the records that matches that countryid it selects the arena name and city that the arena is in and displays it as an option tag now I'm trying to figure out with muliple entries how can I pass the results back to the form page and insert it into the arenas dropdown box.

Following is my coding separated out for you. I only included the necessary parts. All help would be greatly appreciated.

form page
Code:

$('#countryid').change(function() {
      var countryid = $("select#countryid").val();
      var dataString = 'countryid='+ countryid;
      $.ajax({
        type: "POST",
        url: "processes/booking.php",
        data: dataString,
        success: function() {
            
        }
        });  
    });
<div class="field required">
    			<label for="countryid">Country</label>
                <select class="dropdown" name="countryid" id="countryid" title="Country">
                   <option value="0">- Select -</option> 
                    <?php
                    $query = 'SELECT id, countryname FROM countries';
                    $result = mysqli_query ( $dbc, $query ); // Run The Query
                    while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) 
                    {
                        print "<option value=\"".$row['id']."\">".$row['countryname']."</option>\r";
                    }
                    ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="arena">Arenas</label>
                <select class="dropdown" name="arenas" id="arenas" title="Arenas">
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>

php process page

PHP Code:
$countryid = (int)$_GET['countryid'];
$query = "SELECT * FROM `arenas` WHERE `country_id` = '$countryid'";
$result = mysqli_query ($dbc, $query);
while ($row = mysqli_fetch_array($dbc, $result))
{    
    echo '<option value="'.$row['arena'].'">'.$row['arena'].' - '.$row['city'].'</option>\n';
} 

recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source."

this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before?

Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end.

In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content.

Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code:

(function() {
var as,ae;
as = document.getElementsByTagName("img");
for (var i = 0; i < as.length; i++) {
    ae = as[i];
	ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail");
}
})();

I'm working on a image upload script. I have finish the PHP side of things now I'm ready for javascript to do its side of things. I wanting to have no page refresh the only way I know of doing this is pushing the form data to a iframe with the target property.

I understand the concept of it but I'm not to sure how to write. Can someone help me out with this?

Thank you!

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

Hi,

I would like to ask if there is anyway to get a variable from any webpage source using javascript.

Something like javascript: document.getelement?

Hi,

i am very new to this place..so if i make nay mistakes, am sorry.

and i am rookie at coding..so i may sound dumb...

I wanted to know, if there is any method by which i can get the source code of a webpage in a program by using the URL.

what i want to do is that am developing a javascript webpage which requires some info to be taken out of a certain webpage, and in the url of that webpage i can enter the query, so i wanted to know if there was any method to get the source of the webpage and store it in a varabile so i can scan it for the required info.


Thanks.

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.