New to Ajax Need some help

jkewlo · July 23, 2009

Hey, What I am trying to do is get user status to update say if I updated my status I want it to be live meaning to make it show without ever loading the page much like facebook and myspace I dont understand how to do this.

I know I need to call the js file. but I dont understand how to make it live feed

Thanks in advance

This is my showUpdates.js file

var xmlhttp;

function showUpdates(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
xmlhttp=GetXmlHttpObject()
if (xmlhttp==null)
  {
  alert ("Your browser does not support XML HTTP Request");
  return;
  }
var url="showUpdates.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged ;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("showupdate").innerHTML=xmlhttp.responseText;
  document.getElementById("showupdate").style.border="1px solid #A5ACB2";
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

showUpdates.php

<?php
session_start();
include("data/connect.php");

$Psql="SELECT F.`follower_id`, FU.username AS Name, U.`username` AS followerName
FROM `following` F
JOIN users U ON U.`id` = F.`user_id`
JOIN users FU ON FU.`id` = F.`follower_id`
WHERE F.`user_id` =". $_SESSION['userid'] ."
LIMIT 0 , 3";

$Presult = mysql_query($Psql);
while($Prows = mysql_fetch_array($Presult)){
  $Ppsql="SELECT `body`,`stamp` FROM `posts` WHERE `user_id` = '". $Prows['follower_id'] ."' ORDER BY `stamp` DESC LIMIT 0,3";
  $Ppresult=mysql_query($Ppsql);
  while($Pprows = mysql_fetch_array($Ppresult)){
    echo "<strong><a href=\"/". $Prows['Name'] ."\"><font color=black>".$Prows['Name'] ."</font></a></strong> | ". $Pprows['body'] ."<br>". $Prows['stamp'] ."<hr><br>";
  } 
}
?>

how do I get the js file to work in profile.php?

profile.php

<?php
session_start();
include("data/connect.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MoJo Social Network</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:150px;
z-index:1;
}
#apDiv2 {

position:absolute;
left:201px;
top:1px;
width:411px;
height:14px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:149px;
top:21px;
width:328px;
height:42px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:150px;
top:75px;
width:551px;
height:65px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:151px;
top:164px;
width:160px;
height:210px;
z-index:5;
}
#apDiv6 {
position:absolute;
left:310px;
top:160px;
width:460px;
height:153px;
z-index:6;
}
-->
.input {
border: 1px solid #BFBFBF;
font-size:24px;
padding-left: 2px;
height: 28px;
width: 300px;
}
textarea#styled {
width: 600px;
height: 120px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
background-image: url(bg.png);
background-position: bottom right;
background-repeat: no-repeat;
}
#apDiv7 {
position:absolute;
left:645px;
top:154px;
width:215px;
height:40px;
z-index:7;
}
#apDiv8 {
position:absolute;
left:645px;
top:195px;
width:277px;
height:141px;
z-index:8;
}
#apDiv9 {
position:absolute;
left:507px;
top:23px;
width:248px;
height:125px;
z-index:9;
}
#apDiv10 {
position:absolute;
left:-3px;
top:751px;
width:100%;
height:17px;
z-index:10;
background-color: #D1D1D1;
}

a, a:visited {
text-decoration: underline;
color: #007dfe;
font-size: 100%;
}
a:hover {
color: #000;
text-decoration: none;
}
#apDiv11 {
background:url(img/tab1.png);
position:absolute;
left:732px;
top:156px;
width:210px;
height:185px;
z-index:11;
}
#apDiv12 {
position:absolute;
left:760px;
top:169px;
width:155px;
height:155px;
z-index:12;
}
#apDiv13 {
position:absolute;
left:122px;
top:167px;
width:318px;
height:54px;
z-index:13;
}
.style2 {font-size: 36px}
#apDiv14 {
position:absolute;
left:149px;
top:70px;
width:285px;
height:54px;
z-index:14;
}
#apDiv15 {
position:absolute;
left:122px;
top:224px;
width:105px;
height:42px;
z-index:15;
}
#apDiv16 {
position:absolute;
left:146px;
top:259px;
width:41px;
height:23px;
z-index:16;
}
#apDiv17 {
position:absolute;
left:121px;
top:273px;
width:318px;
height:104px;
z-index:17;
}
.tabupdate {
background:url(img/tab1.png) no-repeat;
width: 318px;
height: 104px;
}
#apDiv18 {
position:absolute;
left:121px;
top:381px;
width:315px;
height:33px;
z-index:18;
}
#apDiv19 {
position:absolute;
left:143px;
top:416px;
width:41px;
height:23px;
z-index:19;
}
#apDiv20 {
position:absolute;
left:121px;
top:427px;
width:318px;
height:50px;
z-index:20;
}
</style>

<script type="text/javascript">
function setbg(color)
{
document.getElementById("short_desc").style.background=color
}
</script>
</head>

<body background="img/bg.png">
<div id="apDiv3"><a href="index.php"><img src="img/logo.png" border="0"/></a></div>

<div id="apDiv9"><img src="img/bunny.png" /></div>
<div id="apDiv10">
<center>MoJo Social Network © 2009 Created By: John Grissom 3 <a href="about.php">About</a> | <a href="contact.php">Contact</a></center></div>
<div id="apDiv11"> </div>
<div id="apDiv12"><?php

					$Psql="SELECT * from users WHERE username='". $_SESSION['myusername'] ."'";
					$Presult = mysql_query($Psql);
					while($Prows = mysql_fetch_array($Presult)){
echo "<img src=". $Prows['path'] ." width=155 height=155>";
}
?></div>
<div class="style2" id="apDiv13">Welcome <u><?php echo "". $_SESSION['myusername'] .""; ?></u></div>
<div id="apDiv14">MyURL: <input name="url" type="text" class="input" value="http://www.eve-lounge.com/<?php echo "". $_SESSION['myusername'] .""; ?>">
</div>
<div class="style2" id="apDiv15">Post It!</div>
<div id="apDiv16"><img src="img/arrow.png"></div>
<div  id="apDiv17" >

<script language = "Javascript">
maxL=140;
var bName = navigator.appName;
function taLimit(taObj) {
if (taObj.value.length==maxL) return false;
return true;
}

function taCount(taObj,Cnt) {
objCnt=createObject(Cnt);
objVal=taObj.value;
if (objVal.length>maxL) objVal=objVal.substring(0,maxL);
if (objCnt) {
	if(bName == "Netscape"){	
		objCnt.textContent=maxL-objVal.length;}
	else{objCnt.innerText=maxL-objVal.length;}
}
return true;
}
function createObject(objId) {
if (document.getElementById) return document.getElementById(objId);
else if (document.layers) return eval("document." + objId);
else if (document.all) return eval("document.all." + objId);
else return eval("document." + objId);
}

</script>

<form method="post" action="add.php">
<textarea cols="40" rows="3" name="body" id="body" onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('')">Post It!</textarea>
<input type="submit" value="Post It!" name="submit" />
<font color="#006600">Max. Length: 
			<span  id="myCounter">140</span>	</font>
</form>
</div>
<div class="style2" id="apDiv18">Recent Feeds</div>
<div id="apDiv19"><img src="img/arrow.png"></div>
<div id="apDiv20"><?php
				   
   $body = str_replace("","<img src=\"img/smilehappy.png\">",$body);
   $body = str_replace("","<img src=\"img/smilesad.png\">",$body);
   $body = str_replace("X(","<img src=\"img/smilemad.png\">",$body);
   $body = str_replace("o.O","<img src=\"img/smileoO.png\">",$body);
   $body = str_replace("><","<img src=\"img/smilesquint.png\">",$body);
   $body = str_replace(">_<","<img src=\"img/smileninja.png\">",$body);
   $body = str_replace(":S","<img src=\"img/smilesick.png\">",$body);
   $body = str_replace("zZz","<img src=\"img/smileZz.png\">",$body);
   $body = str_replace("oO","<img src=\"img/smilepo.png\">",$body);
				   
$Psql="SELECT F.`follower_id`, FU.username AS Name, U.`username` AS followerName
FROM `following` F
JOIN users U ON U.`id` = F.`user_id`
JOIN users FU ON FU.`id` = F.`follower_id`
WHERE F.`user_id` =". $_SESSION['userid'] ."
LIMIT 0 , 3";
$Presult = mysql_query($Psql);

while($Prows = mysql_fetch_array($Presult)){
  $Ppsql="SELECT `body`,`stamp` FROM `posts` WHERE `user_id` = '". $Prows['follower_id'] ."' ORDER BY `stamp` DESC LIMIT 0,3";
  $Ppresult=mysql_query($Ppsql);
  while($Pprows = mysql_fetch_array($Ppresult)){
    echo "<strong><a href=\"/". $Prows['Name'] ."\"><font color=black>".$Prows['Name'] ."</font></a></strong> | ". $Pprows['body'] ."<br>". $Prows['stamp'] ."<hr><br>";
  } 
}
?></div>
<center>
<div id="apDiv1"><img src="img/top.png" width="100%" height="150" /></div>
<div id="apDiv2"><a href="index.php">Home</a> | <a href="browse.php">Browse users</a> | <?php 
	if ($_SESSION['myusername'] == '') {
      header("location: index.php");
  } else {
  echo "<a href=logout.php><img src=img/x.gif border=0> Log out!</a> | <a href=profile.php>Profile</a> | <a href=account.php>Account</a> : "; 
      }
      ?></div>
</center>
</body>
</html>

Sign In

New to Ajax Need some help

Recommended Posts

jkewlo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information