I started exploring ajax, and somehow I’m fine with it, not too hard and not easy just normal. Anyway I am having a difficulty with this project I have. It involves ajax, php, js, mysql. I am actually trying to copy Facebook’s tagging style. When you tag someone in a post, the full name turns to a hyperlink that directs to the tag users profile. It’s only a minor problem I feel, its just that I am new to JS as well. I did the rest already, but I am having a problem turning the text to a hyperlink with js. I want it in the putin_livesearch() the code.
This is my Code.
index.html
<!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>FB TAG</title>
<style>
.namesearch {
cursor:pointer;
}
</style>
<script type="text/javascript">
function putin_livesearch(fname, lname)
{
//document.getElementById('searchbar').value = (fname + " " +lname);
//document.location.href='#'+ window.document.getElementById('searchbar').value = (fname);
window.document.location.href="#"+window.document.getElementById('searchbar').value;
}
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input id ="searchbar" name="wallpost" type="text" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form>
</body>
</html>
getuser.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("place_main", $con);
$sql=" SELECT * FROM profiles WHERE firstname like '".$q."%' ";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
$fname = $row['firstname'];
$lname = $row['lastname'];
echo '<span class ="namesearch" onclick="putin_livesearch(\''.$fname.'\',\''.$lname.'\' )"> '. $fname ." ". $lname .' </span><br />';
//echo "<span class ='namesearch' onclick='putin_livesearch(" .$fname. ", " .$lname. " )'> " . $fname . " " . $lname . "</span><br />";
}
mysql_close($con);
?>
Okay I guess what I am trying to is not possible. To the test I actually tried adding a value in a text area with an tag. It does not turn it to a link. Did some inspecting in fb actually while tagging a friend with @ in the wallpost doesnt put it to a link, but afterwards when posting it does.