Hello,

I am experiencing a problem with running javascript code when ajax calls a file. I have a file named 'index.php' which simply loads some comments by using the file 'comment.inc.php' and run some javascript code to change the id of some div. I don't know how to let the browser handle this or is it even possible for my method?

So here are my scripts:

Filename: index.php

<?php
require "../../includes/connect.inc.php";
require "../../includes/core.inc.php";

session_start();
if (isset($_GET['p']) && !empty($_GET['p'])){
	$p = $_GET['p'];
	$name = getfield('name', $p);
	$title = getfield('title', $p);
	$content = nl2br(getfield('content', $p));
	$comment_enabled = getfield('comment_enabled',$p);
	$comment_view = getfield('comment_view',$p);
	$x = 1;
	$query = "SELECT * FROM `onwebed_menu` WHERE 1";
	if ($mysql_query = mysql_query($query)){
		while ($mysql_row = mysql_fetch_assoc($mysql_query)){
			$linkid[$x] = $mysql_row['id'];
			$linkname[$x] = $mysql_row['link_name'];
			$pageid[$x] = $mysql_row['page_id'];
			$x++;
		}
	}
	if (loggedIn()){
		$user_id = $_SESSION['user_id'];
		$query = "SELECT `username` FROM `onwebed_users` WHERE `id`='$user_id'";
		if ($mysql_query = mysql_query($query)){
			if (mysql_num_rows($mysql_query)==1){
				$username = mysql_result($mysql_query, 0, 'username');
			}
		}
	}
	?>
<script type='text/javascript'>
	function postcomment(id, file){
		if (window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
		}
		
		xmlhttp.onreadystatechange = function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
				document.getElementById(id).innerHTML = xmlhttp.responseText;
			}
		}
		var name = document.getElementById('name').value;
		var title = document.getElementById('title').value;
		var website = document.getElementById('website').value;
		var comment = document.getElementById('comment').value;
		var rand1 = document.getElementById('rand1').value;
		var rand2 = document.getElementById('rand2').value;
		var captcha = document.getElementById('captcha').value;
		var p = <?php echo $p; ?>;
		var querystring = "name="+name+"&title="+title+"&website="+website+"&comment="+comment+"&rand1="+rand1+"&rand2="+rand2+"&captcha="+captcha+"&p="+p;
		xmlhttp.open('POST', file, true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.send(querystring);
	}
	function commentview(id){
		if (window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
		}
		
		xmlhttp.onreadystatechange = function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
				var responsetext = document.getElementById(id).innerHTML = xmlhttp.responseText;
			}
		}
		var p = <?php echo $p; ?>;
		var querystring = 'p='+p;
		xmlhttp.open('POST', '../../includes/commentview.inc.php', true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.send(querystring);
	}
</script>
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html><head><title><?php echo $title; ?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<style type='text/css'>
			@import url('style.css');
			@import url('mainstyle.css');
		</style>
		</head>
		<body onload="commentview('viewcomment');">
		<div id="conteneur">
		<div id="header"><?php echo $name; ?></div>
		<div id="haut">
		<ul class="menuhaut">
		<?php
		$x = 1;
		while($x<=10){
			if (!empty($linkname[$x]) && $pageid[$x]!=0 && $pageid[$x]==$p){
		?>
			<li id='selected'><a href="<?php echo "../../?p=".$pageid[$x]; ?>"><?php echo $linkname[$x]; ?></a></li>
			
			<?php
			}elseif(!empty($linkname[$x]) && $pageid[$x]!=0){?>
			<li><a href="<?php echo "../../?p=".$pageid[$x]; ?>"><?php echo $linkname[$x]; ?></a></li>
			<?php
			}
			$x++;
		}
		?>
		</ul>
		</div>
		<div id="sidemenu">
			<div id='sidemenuheader'>awfwaf</div>
			<ul>
				<li><a href='www.google.com'>Link 1</a></li>
				<li><a href='www.google.com'>Link 2</a></li>
				<li><a href='www.google.com'>Link 3</a></li>
				<li><a href='www.google.com'>Link 4</a></li>
				<li><a href='www.google.com'>Link 5</a></li>
				<li><a href='www.google.com'>Link 6</a></li>
				<li><a href='www.google.com'>Link 7</a></li>
				<li><a href='www.google.com'>Link 8</a></li>
				<li><a href='www.google.com'>Link 9</a></li>
				<li><a href='www.google.com'>Link 10</a></li>
			</ul>
		</div>
		<div id="centre">
		<h1><?php echo $name; ?></h1>
		<?php
			echo $content;
			if (loggedIn()){
				echo "<div id='usermenu'><a href='../../control_panel.php'>Control Panel</a>&nbsp;&nbsp;";
				echo "<a href='../../logout.php'>Logout</a></div>";
			}
		?>
		<?php
			if ($comment_view=='true'){
		?>
		<hr></hr>
		<div id='viewcomment'>
			<script type='text/javascript'>
				setInterval("commentview('viewcomment');", 4000);
			</script>
		</div>
		<?php
		if ($comment_enabled=='true'){ ?>
		<hr></hr>
		<div id='result'>
			
		</div>
		<div id='comments'>
			<b>Post a comment in this page</b>
			<?php if (!loggedIn()){ ?>
			<br><br><span class='span'>Name: <input type='text' id='name' class='textboxbasic'/></span><br>
			<?php }else{ ?>
			<br><br><span class='span'>Name: <input type='text' disabled id='name' class='textboxbasicdisabled' value='<?php echo $username; ?>'/></span><br>
			<?php } ?>
			<br><span class='span'>Title: <input type='text' id='title' class='textboxbasic'/></span><br>
			<br><span class='span'>Website/blog: <input type='text' id='website' class='textboxbasic'/></span><br><br>
			<textarea id='comment' cols='50' rows='10' class='textareabasic' maxlength='500'></textarea><p></p>
			<?php $rand1 = rand(1,5); $rand2 = rand(1,5);
				echo "<span class='span'><input type='text' id='rand1' readonly='true' value='$rand1'>"." + "."<input type='text' id='rand2' readonly='true' value='$rand2'>"." = "."<input type='text' id='captcha'></span><p></p><br>";
			?>
			<input type='button' value='Post comment' class='submitbutton' onclick="postcomment('result','../../includes/comment.inc.php');">
		</div>
		
		<?php
			}
			}
		?>
		
		</div>
		<?php
		
		if ($comment_view=="false"){
			echo "<br><br><br><br><br><br><br><br><br><br><br><br><br>";
		}
		
		?>
		<div id="footer">
		<span>Copyright BDH Lab 2010-2011</span>
		</div>
		</div>
		
		</body>
		</html>
<?php
	echo "<p align='right'><a href='../../admin/edit.php?p=$p'>Edit this page</a></p>";
	}else{
		header("Location: index.php?p=1");
	}
?>

Filename: commentview.inc.php

<?php
	require 'connect.inc.php';
	require 'core.inc.php';
	session_start();
	if (isset($_POST['p']) && !empty($_POST['p'])){
		$p = $_POST['p'];
		if (loggedIn()){
			$user_id = $_SESSION['user_id'];
			$query = "SELECT `username` FROM `onwebed_users` WHERE `id`='$user_id'";
			if ($mysql_query = mysql_query($query)){
				if (mysql_num_rows($mysql_query)==1){
					$username = mysql_result($mysql_query, 0, 'username');
				}
			}
		}
		$query = "SELECT * FROM `onwebed_comments` WHERE `posted_on`=$p ORDER BY `time` DESC";
		if ($mysql_query = mysql_query($query)){
			if (mysql_num_rows($mysql_query)>=1){
				while($mysql_row = mysql_fetch_assoc($mysql_query)){
					echo "<div id='comcontent'><div id='comheader'><h2>".$mysql_row['title']."</h2></div><hr>".$mysql_row['comment']."<br><br><h6>By ".$mysql_row['name']." on ".$mysql_row['time']."</h6></div><p></p>";
					if (loggedIn()){
						if ($username==$mysql_row['name']){
							$comtitle = $mysql_row['title'];
							$superspace = '&nbsp;';
							for ($i=1; $i<=68; $i++){
								$superspace = $superspace.'&nbsp;';
							}
							echo "<script type='text/javascript'>
								document.getElementById('comcontent').id='comcontents';
								document.getElementById('comheader').innerHTML='<div id=comtitle>$comtitle</div> $superspace <a href=../../index.php>Edit</a> <a href=../../index.php>Delete</a>';
							</script>";
						}
					}
				}
			}else{
				echo "<i>No comments available. Be the first to comment!</i><br><br>";
			}
		}else{
			die("An error occured. Please try again later.");
		}
	}
?>
Member Avatar for diafol

Oof! I was a little bit sick in my mouth... :(
That's some mixed up markup/php - difficult to follow. I can't even begin to decipher it.

Changing the div id with js is easy. However, whether js will recognise the new id is another matter (if changed from an ajax call). You may need to use something like jQuery's 'live'. You're probably better of changing the 'class' anyway.

Also it's a good idea to wrap up your ajax code in an external js file so that it keeps your pages clean of clutter and so that it's reusable.

Things like this:

echo "<br><br><br><br><br><br><br><br><br><br><br><br><br>";

should be dealt with CSS (e.g. via height property).

Thanks a lot.

I used multiple echoes for other reason. I know I can deal it with CSS but CSS wasn't the right choice for increasing the height that time.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.