Linking a cookie (posted in a div) to a text box to search

**slewando123** · 08-27-2011 01:41 AM

Hi all.

How do I link a cookie, presented in a div, to a text box on the same page - so it can be searched?

Now I have a search box that link to the Google Maps API. I also have the two most recently search items to show up as cookies below the map. My goal is to have the cookies show up as links so that when you click them, they show up in the text box to search.

I'm thinking of three ways to do this and wonder which is the best way to do it.

1) Can I just adjust the div tag to link to the text box?

2) Can I adjust the function relating to how the cookies are posted on the page?

3) Do I have to make a new function to post the cookies as links?

Any input is appreciated

Code:

<html>

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">

var recent1 = initCookie("recent1")
var recent2 = initCookie("recent2")

function initCookie(cookieName){

if (document.cookie.indexOf(cookieName + "=") == -1){
return ""
}

else {
return getCookie(cookieName)
}

}

function getCookie(cookieName){

start=document.cookie.indexOf(cookieName + "=") + cookieName.length + 1
end=document.cookie.indexOf(";", start)

if (end == -1){
end = document.cookie.length
}

cookieLength=end-start
return(document.cookie.substr(start,cookieLength))

}

function setRecent(mostRecentName){

recent2=recent1
recent1=mostRecentName
document.cookie="recent1="+recent1

if (recent2.length >= 1){
document.cookie="recent2="+recent2
}

}

function getRecent(){

if(recent2){
document.getElementById("R1").innerHTML=getCookie("recent1")
document.getElementById("R2").innerHTML=getCookie("recent2")
}

else{
document.getElementById("R1").innerHTML=getCookie("recent1")
}

}
var geocoder;
var map;
var marker;

function load() {

getRecent()
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP

}
map = new google.maps.Map(document.getElementById("mymap"), myOptions);
}

function showAddress(theAddress) {
var myaddress = theAddress

if (geocoder) {
geocoder.geocode( { 'address': myaddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);

var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});

} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}

function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}

var http = createRequestObject()

function sndReq() {
http.open('get', 'ajaxphone.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}

function handleResponse() {

if(http.readyState == 4){

document.getElementById("theName").innerHTML = ""
document.getElementById("address").innerHTML = ""
document.getElementById("phone").innerHTML = ""
document.getElementById("email").innerHTML = ""

var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")

for (i=0;i<listings.length;i++) {

firstobj = listings[i].getElementsByTagName("FIRST")

if (firstobj[0].firstChild.data == document.getElementById("first").value){

firstobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")

document.getElementById("theName").innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
document.getElementById("address").innerHTML = addressobj[0].firstChild.data
document.getElementById("phone").innerHTML = phoneobj[0].firstChild.data
document.getElementById("email").innerHTML = emailobj[0].firstChild.data

theAddress = addressobj[0].firstChild.data
showAddress(theAddress)

getRecent()

mostRecentName = firstobj[0].firstChild.data
setRecent(mostRecentName)

}
}
}
}

</script>
</head>

<body onload="load()">
<br/>

<form id="search">
<input type="text" id="first" />
<input type="button" value="Search Phonebook" onClick="sndReq()" />
</form>
<div id="theName"></div>
<div id="address"></div>
<div id="phone"></div>
<div id="email"></div>
<div id="mymap" style="width: 500px; height: 300px"></div>
<div id="recent">
Most Recent Searches
<ul>
<li id="R1"></li>
<li id="R2"></li>
</ul>
</div>
</body>

</html>

**DracoMerest** · 08-28-2011 01:22 AM

Code:

document.getElementById("R1").innerHTML=getCookie("recent1")

This is the line which inserts the extracted cookie value into a DIV. All I see is:

t-factory-cc=1314511305173

Access restriction errors occur when I attempt to use anything on the page so I cannot
test anything myself without some major research. Not going to happen.

However, this is the place where you should be thinking about creating a link. Something
like this:

Code:

retVal=getCookie("recent1");
retVal='<a href="somewhere.htm">'+retVal+'</a>';
document.getElementById("R1").innerHTML=retVal;

"somewhere.htm" is obviously something I do not quite understand. What link and to
where? What is the normal value returned from the getCookie() function? If is it a valid
URL then:

Code:

retVal='<a href="'+retVal+'">Recent Link 1</a>';

But that creates another problem, how will you know which link goes where without
valid display text?

That's my best help at the moment.

**slewando123** · 08-28-2011 10:15 PM

Thanks for the input. The second code example, I think, is what I need to work on and develop.

Thanks again

Thread: Linking a cookie (posted in a div) to a text box to search

Thread Tools

Display

Hybrid View

Linking a cookie (posted in a div) to a text box to search

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions