Page 1 of 1

div: innerHTML(solved)

Posted: Wed Aug 10, 2005 8:24 am
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

Posted: Wed Aug 10, 2005 10:44 am
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>

Posted: Wed Aug 10, 2005 11:16 am
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!!!

Posted: Wed Aug 10, 2005 1:03 pm
by PrObLeM
Sidenote: ever consider using AJAX for this? I Think it would work out alot better for you.

Posted: Wed Aug 10, 2005 2:25 pm
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=

Posted: Wed Aug 10, 2005 8:43 pm
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.

Posted: Thu Aug 11, 2005 12:41 am
by PrObLeM

Posted: Thu Aug 11, 2005 2:21 am
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