AJAX - How do I display links that I can click

timothyarden · June 4, 2012

Hi Guys,

In this script PHP and AJAX are used to fetch results from a array and display them according to which letters are put in. I was wondering how I could change the results from just being names to links which would then when clicked link to a user profile.

Here the script

<html>
<head>
	<title>AJAX Suggest</title>
	<script type="text/javascript">
		function showHint(str)
			{
				if (str.length==0)
					{
						document.getElementById("txtHint").innerHTML="";
						return;
					}

				if (window.XMLHttpRequest)
					{
						xmlhttp=new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
					}

				else
					{
						xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
					}

				xmlhttp.onreadystatechange=function()
					{
						if (xmlhttp.readyState==4 && xmlhttp.status==200)
							{
								document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
							}
					}

				xmlhttp.open("GET","gethint.php?q="+str,true);
				xmlhttp.send();
			}
	</script>
</head>
<body bgcolor="black">
	<p style="color:blue"><b>Start typing a name in the input field below:</b></p>
	<table>
		<form name="suggestform">
			<tr>
				<td width="115px">
					<label style="color:blue" for="firstnameinput">First name:</label>
				</td>
				<td>
					<input type="text" onkeyup="showHint(this.value)" size="20" name="firstnameinput"/>
				</td>
			</tr>
			<tr>
				<td>
					<p style="color:blue">Suggestions:</p>
				</td>
				<td>
					<p style="color:blue"><span id="txtHint"></span></p>
				</td>
		</form>
	</table>
</body>
</html>

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Abigail";
$a[]="Anthony";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q = $_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
	{
		$hint="";
		for($i=0; $i<count($a); $i++)
			{
				if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
					{
						if ($hint=="")
							{
								$hint=$a[$i];
							}

						else
							{
								$hint=$hint." , ".$a[$i];
							}
					}
			}
	}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
	{
		$response="no suggestion";
	}

else
	{
		$response=$hint;
	}

//output the response
echo $response;
?>

Thanks for any help,

Timothy

Barand · June 4, 2012

output name between <a>...</a> tags eg

timothyarden · June 4, 2012

Thanks for the response,

I had tried that - example <a href="http://www.youtube.com">Youtube</a>

However by doing this I had to search for "<" instead of a Y.

Any ideas - thanks for your time,

Timothy

Barand · June 4, 2012

Are you storing

<a href="http://www.youtube.com">Youtube</a>

instead of just

Youtube

You add the <a> tags on output to the page

timothyarden · June 5, 2012

Okay (You were right I did have it in the php file instead of the HTML one) I will change that but then I have the problem of how do I change where the link points according to the name(s) displayed?

Thanks for your help

Timothy

Barand · June 5, 2012

However by doing this I had to search for "<" instead of a Y.

What exactly were you searching?

timothyarden · June 5, 2012

What I mean is if I put <a href="youtube.com">And in between here use the AJAX Loaded content</a> how would I change the hyperrefence to be according to what is brought up - example if I entered d and it then loaded david from the array - how would I make david a link to davids page instead of youtube. How would I make the link change according to the what is loaded?

Thanks for your help

Timothy

Barand · June 5, 2012

perhaps something like

array (
   'Youtube' => 'http://www.youtube.com',
   'David'     => 'http://www.davidspage.com'
)

or a database

Mahngiel · June 6, 2012

you can change the value of the href with .attr('href') (in jQ).

How I exchange from PHP to JQ is something like this:

<?php
// prep response
$response = array();

// request from DB
$My_YT_Link = $database extraction method;

// results exist
if( $My_YT_Link ) {
    // create return array
    $response = array(
        'status' =>  TRUE,
        'link'  =>  $My_YT_Link->youtube_id,
        'title'  =>  $My_TY_Link->youtube_title,
        );
} else {
    // db request failed
    $response = array(
        'status'  => FALSE;
    );
}

// return in JSON
return json_encode($response);

The appropriate array will be returned to your JS ajax request and you can handle it accordingly.

Sign In

AJAX - How do I display links that I can click

Recommended Posts

timothyarden

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

timothyarden

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

timothyarden

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

timothyarden

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information