ajax loaded page bgcolor

63 New Member

i have a sample code like below:
index.html
[html]
<script language='javascript'>
//start xmlhttprequest
if (window.XMLHttpRequest) //for IE 7 & FF
{
request=new XMLHttpRequest();
}

else if (window.ActiveXObject)
{
request=new ActiveXObject('Microsoft.XMLHttp');
}
else alert('XMLHTTP not supported');

function state_change()
{
if((request.readyState==4) && (request.status==200))
{
document.getElementById('page').innerHTML=request. responseText;
}
}

function loadpage(url)
{
request.onreadystatechange = state_change;
request.open("GET",url);
request.send(null);
}

</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<table class=test align=center border=0 cellpadding=0 cellspacing=0 width=500>
<tr class="title">
<td><a onMouseOver="this.style.cursor='pointer'"onClick=" loadpage('page1.html')">Page 1</a></td>

</tr>
<tr>
<td id="page" class="content" colspan=5>
Welcome!

</td>
</tr>

</table>
[/html]

page1.html
[html]
<html>
<title>Page 1</title>
<body bgcolor="#FF0000">
<h1>This is page number one</h1>

</body>
</html>
[/html]

when i tried to load the page1.html from index.html using xmlhttprequest, however, t page included had no background color. can anybody tell me what's wrong?

Mar 30 '08 #1

Subscribe Reply

1914

hsriat

1,654

Recognized Expert Top Contributor

You may not load an HTML page into a table field like this.
As far as the background color is concerned, after line 19, add this line:

Expand|Select|Wrap|Line Numbers

document.getElementById('page').style.backgroundColor = 'red';

Or dynamically create an IFRAME element with src="page1.html"

Mar 30 '08 #2

rohypnol

New Member

i have a sample code like below:
index.html
[html]
<script language='javascript'>
//start xmlhttprequest
if (window.XMLHttpRequest) //for IE 7 & FF
{
request=new XMLHttpRequest();
}

else if (window.ActiveXObject)
{
request=new ActiveXObject('Microsoft.XMLHttp');
}
else alert('XMLHTTP not supported');

function state_change()
{
if((request.readyState==4) && (request.status==200))
{
document.getElementById('page').innerHTML=request. responseText;
}
}

function loadpage(url)
{
request.onreadystatechange = state_change;
request.open("GET",url);
request.send(null);
}

</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<table class=test align=center border=0 cellpadding=0 cellspacing=0 width=500>
<tr class="title">
<td><a onMouseOver="this.style.cursor='pointer'"onClick=" loadpage('page1.html')">Page 1</a></td>

</tr>
<tr>
<td id="page" class="content" colspan=5>
Welcome!

</td>
</tr>

</table>
[/html]

page1.html
[html]
<html>
<title>Page 1</title>
<body bgcolor="#FF0000">
<h1>This is page number one</h1>

</body>
</html>
[/html]

when i tried to load the page1.html from index.html using xmlhttprequest, however, t page included had no background color. can anybody tell me what's wrong?

That is a HTML problem. If you'd use Firebug, you'd be able to see what's going on:
You're loading page1.html inside a <td>. You can't expect to have a working <body> inside a <td>.
Again, use Firefox and install Firebug, it will help you a lot.

Mar 30 '08 #3

rohypnol

New Member

You might want to include the whole contents of page1.html in a div which is also part of page1.html and you can set the properties of that div accordingly (background-color: red; width:100%; height:100%; ETC)

Mar 30 '08 #4

tuananh87vn

New Member

i got it. thanks so much, guys :)

Mar 31 '08 #5

tuananh87vn

New Member

can i ask another question in this topic:
in the same example
index.html
[html]
//initialize xmlhttprequest object goes here...

<link href="css/style.css" rel="stylesheet" type="text/css" />
<table class='test' align='center' border='0' cellpadding='0' cellspacing='0'>
<tr class="title">
<td><a onMouseOver="this.style.cursor='pointer'" onClick="loadpage('page5.php')">Page 5</a></td>
</tr>
<tr>
<td id="page" class="content" colspan=5>
Welcome!

</td>
</tr>

</table>
[/html]

page5.php
[php]
<?php
header("Cache-Control: no-cache, must-revalidate");
?>
<script language='javascript'>
//initialize xmlhttprequest object
if (window.XMLHttpRequest) //for IE 7 & FF
{
request=new XMLHttpRequest();
}

else if (window.ActiveXObject) //fot ie6
{
request=new ActiveXObject('Microsoft.XMLHttp');
}
else alert('XMLHTTP not supported');

function state_change()
{
if((request.readyState==4) && (request.status==200))
{
document.getElementById('user_info').innerHTML=req uest.responseText;
}
}

function showuser(str)
{
var url="page5data.php?q="+str;
request.onreadystatechange = state_change;
request.open("GET",url);
request.send(null);
}
</script>

<?php
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('test') or die(mysql_error());

$res=mysql_query("SELECT * FROM users");
echo "<select name='username' onchange='showuser(this.value)'>";
while($row=mysql_fetch_assoc($res))
{
?>
<option value='<? echo $row['username']; ?>'>
<? echo $row['username']; ?>
</option>

<?php
}
echo "</select>";
?>

<p>
<div id="user_info"><b>User info will be listed here.</b></div>
</p>

[/php]

page5data.php
[php]
<?php
$a=$_GET["q"];

mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('test') or die(mysql_error());

$sql="SELECT * FROM users WHERE username = '$a'";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
{
echo '<br>Username: '.$row['username'];
echo '<br>Full name: '.$row['lastname'].$row['firstname'];
echo '<br>Gender: '.$row['gender'];
echo '<br>Age: '.$row['age'];
echo '<br>Phone: '.$row['phone'];
echo '<br>Email: '.$row['email'];
echo '<br>Address: '.$row['address'];
}

?>
[/php]

it works well if i run standalone page5.php but if i try to load it from index.html, it didnot work. any suggestion?

Mar 31 '08 #6

acoder

16,027

Recognized Expert Moderator MVP

it works well if i run standalone page5.php but if i try to load it from index.html, it didnot work.

What do you mean by it doesn't work? What happens? Are there any errors?

Apr 1 '08 #7

tuananh87vn

New Member

What do you mean by it doesn't work? What happens? Are there any errors?

the page5.php when standing alone allows us to view info of ppl listed inside it, however, if page5.php is loaded (using ajax of course) in index.html, it does list the ppl but cannot show their information like it did before. the firebug says: the showuser function is not defined(!?)

Apr 1 '08 #8

acoder

16,027

Recognized Expert Moderator MVP

I see what you're trying to do. The page you're loading has some JavaScript. To get that to run, you will need to either have that code already in the calling page, or add it using the script tag, or use eval (not a recommendation).

Since the JavaScript is just some Ajax code, modify the existing code in index.html to make it generic for both requests.

Apr 2 '08 #9

Similar topics

1821

Entire page gets refreshed after AJAX request

by: arunprabu | last post by:

Hi, I have a problecm with the AJAX request in my webpage. I have some filters on top of the page. I have a submit button and an empty div below the filters. Some of the filters have ajax...

ASP.NET

2043

Include javascript files in ajax loaded content

by: battle.chris | last post by:

Hello. I'm using Prototype's Updater class to refresh sections of a page. Is there a way to include an external javascript files in the updated content; i.e., have a javascript tag with src...

Javascript

4012

XMLHttpRequest and AJAX for PHP programmers

by: geevaa | last post by:

http://www.phpbuilder.com/columns/kassemi20050606.php3 XMLHttpRequest and AJAX for PHP programmers James Kassemi Introduction: Although the concept isn't entirely new, XMLHttpRequest...

PHP

5093

Javascript won't load in Ajax-tabs - need to refresh page for tab to load

by: jianxin9 | last post by:

Hi, I have an ajax powered tabs box that has a javascript drop-down search menu in the first tab. When I click on another tab, and go back to the first tab I have to refresh the page to get the...

Javascript

2193

Ajax en the Form_load event and Ajax in serveruser controls

by: =?Utf-8?B?VG9u?= | last post by:

Hello, I want to understand teh benefits of ajax technology. Does anyone has a good website where AJAX EXTENSIONS is worked out so I really understand it. There a 2 main questions: 1) How about...

ASP.NET

7818

Page level variables reset during Ajax post back

by: radix | last post by:

Hello, I have a aspx page with ajax scriptmanger update panel etc. I also have public string variables on the aspx page. Whenever postback happens from Ajax update panel, at server side all...

ASP.NET

1426

ASP and AJAX problems

by: srkidd12 | last post by:

Hello, I am having problems with using AJAX to call information to my primary ASP page from a secondary asp page that brings in the data I want to display. I'm having the onfocus event trigger...

ASP / Active Server Pages

2700

Ajax page not getting refreshed in IE

by: vjayis | last post by:

hi i have a php page in which i have included few tabs links like games, news,entertainment etc., when i click the tablink an ajax page is loaded below. In that ajax page several...

Javascript

2106

2 Questions about using AJAX with Master Page

by: =?Utf-8?B?RGFuaQ==?= | last post by:

Hi, Trying to create a master page that holds a menu, and the menu switches between pages in the site. 2 problem arrosed: a. When I navigate from page to page (all AJAX Web Forms, with the...

ASP.NET

7221

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7109

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7313

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7372

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

7029

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5039

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

1537

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

758

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

411

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General