div: innerHTML(solved)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

div: innerHTML(solved)

Post by raghavan20 »

I am reading the ChatMessages_tbl and loading the div with chat messages.

but when I try to read the contents of the div using 'document.getElementById("contents").innerHTML;
', I get nothing. why???

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chat Application - Retrieve messages</title>
<script language="javascript">
<!--
	//setTimeout("getMessages()", 2000); //poll server again in one second
	var content = document.getElementById("contents").innerHTML;
	document.write("innerHTML:"+content);//this does not work
	if (document.getElementById("contents").innerHTML != ""){
		parent.loadMessages(document.getElementById("contents").innerHTML);
	}
	function getMessages(){
		document.location.reload();
	}
//-->
</script>

</head>

<body>
	<div id="contents" name = "contents">
	<?php
	/**
	* [Retrieve all messages]
	*
	*
	*/
	$query = "select  `UserName`, `Message` from `ChatMessages_tbl`, `ChatUsers_tbl`
	 where `ChatMessages_tbl`.`UserId` = `ChatUsers_tbl`.`Id`";
	$stmt = $dbInstance->executeQuery($query);
	$result = $stmt->result;
	//echo $result;
	if (is_resource($result)){
		while($row = mysql_fetch_row($result)){
			echo $row[0].":&nbsp;".$row[1]."<br />";
		}
	}
		
	?>
	</div>
see the script in action at : http://raghavan20.allhyper.com/messages.php
Last edited by raghavan20 on Mon Aug 15, 2005 8:21 am, edited 2 times in total.
User avatar
PrObLeM
Forum Contributor
Posts: 418
Joined: Sun Mar 07, 2004 2:30 pm
Location: Mesa, AZ
Contact:

Post by PrObLeM »

because when your frist load the page the content of the div is empty.

there are several ways to fix this. here is one: (im pretty sure this will work)

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chat Application - Retrieve messages</title>
<script language="javascript">
<!--
function pageLoaded() {
    //setTimeout("getMessages()", 2000); //poll server again in one second
    var content = document.getElementById("contents").innerHTML;
    document.write("innerHTML:"+content);//this does not work
    if (document.getElementById("contents").innerHTML != ""){
        parent.loadMessages(document.getElementById("contents").innerHTML);
    }
}
    function getMessages(){
        document.location.reload();
    }
//-->
</script>

</head>

<body onload="pageLoaded()">
    <div id="contents" name = "contents">
    <?php
    /**
    * [Retrieve all messages]
    *
    *
    */
    $query = "select  `UserName`, `Message` from `ChatMessages_tbl`, `ChatUsers_tbl`
     where `ChatMessages_tbl`.`UserId` = `ChatUsers_tbl`.`Id`";
    $stmt = $dbInstance->executeQuery($query);
    $result = $stmt->result;
    //echo $result;
    if (is_resource($result)){
        while($row = mysql_fetch_row($result)){
            echo $row[0].":&nbsp;".$row[1]."<br />";
        }
    }
        
    ?>
    </div>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

Edited code:

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chat Application - Retrieve messages</title>
<script language="javascript"> 
<!-- 
	function pageLoaded() { 
		//setTimeout("getMessages()", 2000); //poll server again in one second 
		var content = document.getElementById("contents").innerHTML; 
		document.write("innerHTML:"+content);//this does not work 
		if (document.getElementById("contents").innerHTML != ""){ 
			parent.loadMessages(document.getElementById("contents").innerHTML); 
		} 
	} 
    function getMessages(){ 
        document.location.reload(); 
    } 
//--> 
</script> 


<link href="chat1.css" rel="stylesheet" type="text/css" />
</head>

<body onload="pageLoaded();">
	<div id="contents" name = "contents" class="chatWindow">
	<?php
	/**
	* [Retrieve all messages]
	*
	*
	*/
	$query = "select  `UserName`, `Message` from `ChatMessages_tbl`, `ChatUsers_tbl`
	 where `ChatMessages_tbl`.`UserId` = `ChatUsers_tbl`.`Id`";
	$stmt = $dbInstance->executeQuery($query);
	$result = $stmt->result;
	//echo $result;
	if (is_resource($result)){
		while($row = mysql_fetch_row($result)){
			echo "<b>".$row[0]."</b>:&nbsp;".$row[1]."<br />";
		}
	}
		
	?>
	</div>
</body>
</html>
It wont work because the server side script php loads first that should bring the content inside the div. only after that, the javascript should start to run, so the document.write will execute only after the contents are loaded into the div.

This is wot I guess!!!
User avatar
PrObLeM
Forum Contributor
Posts: 418
Joined: Sun Mar 07, 2004 2:30 pm
Location: Mesa, AZ
Contact:

Post by PrObLeM »

Sidenote: ever consider using AJAX for this? I Think it would work out alot better for you.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

I dont really know wot AJAX is all about?
I got this idea elsewhere and I want to build this with OO features and according to my needs.
I always welcome your suggestions.
I was earlier thinking of using XMLHTTP but I couldnot get a response from a php file properly so I saved that for the next revision.
If any of you thinking of helping me with XMLHTTP, have a look at:
viewtopic.php?t=36274&highlight=
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

raghavan20 wrote:I dont really know <span style='color:blue' title='ignorance is bliss'>what</span> AJAX is all about?
I got this idea elsewhere and I want to build this with OO features and according to my needs.
I always welcome your suggestions.
I was earlier thinking of using XMLHTTP but I couldnot get a response from a php file properly so I saved that for the next revision.
If any of you thinking of helping me with XMLHTTP, have a look at:
viewtopic.php?t=36274&highlight=
XMLHttpRequest is kinda the backbone of AJAX.
User avatar
PrObLeM
Forum Contributor
Posts: 418
Joined: Sun Mar 07, 2004 2:30 pm
Location: Mesa, AZ
Contact:

Post by PrObLeM »

User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

I have gone thru that chat application in the tutorials section earlier. But I was trying to make my own script work.

You have to help me with the link I gave you for another post which has got a problem on receiving response from the server using XMLHTTP.

Thanks for your help guys
Post Reply