www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    4

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

    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>

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    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.

  3. #3
    Join Date
    Mar 2011
    Posts
    4
    Thanks for the input. The second code example, I think, is what I need to work on and develop.

    Thanks again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles