Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    trying to use ajax to get google suggest on my website

    I'm learning AJAX programming from the book "AJAX for Dummies".
    In the book there is a script for putting a live search box on your website
    The script uses a short php script and a longer html page with embedded javascript to connect to google suggest.
    Below are the two scripts that I can't get working.
    I notice that google suggest is now part google search and also there is google custom search.
    Has google custom search replaced what I am trying to do with these two scripts.
    Thanking you in anticipation for any sugestions.

    <html>
    <head>

    <title>Google live search</title>

    <style>
    #targetDiv {
    background-color: #FFEEAA;
    width: 40%;
    }
    </style>

    <script language = "javascript">
    var XMLHttpRequestObject = false;

    if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }

    function getData(dataSource)
    {
    if(XMLHttpRequestObject) {
    XMLHttpRequestObject.open("GET", dataSource);

    XMLHttpRequestObject.onreadystatechange = function()
    {
    if (XMLHttpRequestObject.readyState == 4 &&
    XMLHttpRequestObject.status == 200) {
    eval(XMLHttpRequestObject.responseText);
    }
    }

    XMLHttpRequestObject.send(null);
    }
    }

    function getSuggest(keyEvent)
    {
    keyEvent = (keyEvent) ? keyEvent: window.event;
    input = (keyEvent.target) ? keyEvent.target :
    keyEvent.srcElement;

    if (keyEvent.type == "keyup") {
    if (input.value) {
    getData("google.php?qu=" + input.value);
    }
    else {
    var targetDiv = document.getElementById("targetDiv");

    targetDiv.innerHTML = "<div></div>";
    }
    }
    }

    function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
    arrayResults, unusedArray)
    {
    var data = "<table>";
    var loopIndex;

    if (arrayResults.length != 0) {
    for (var loopIndex = 0; loopIndex < arrayResults.length;
    loopIndex++) {
    data += "<tr><td>" +
    "<a href='http://www.google.com/search?q=" +
    arrayTerm[loopIndex] + "'>" + arrayTerm[loopIndex] +
    '</a></td><td>' + arrayResults[loopIndex] + "</td></tr>";
    }
    }

    data += "</table>";

    var targetDiv = document.getElementById("targetDiv");

    targetDiv.innerHTML = data;
    }
    </script>

    </head>

    <body>

    <H1>Google live search</H1>

    Search for <input id = "textField" type = "text"
    name = "textField" onkeyup = "getSuggest(event)">

    <div id = "targetDiv"><div></div></div>

    </body>

    </html>

    <?php
    $handle = fopen("http://www.google.com/complete/search?hl=en&js=true&qu=" . $_GET["qu"], "r");
    while (!feof($handle)){
    $text = fgets($handle);
    echo $text;
    }
    fclose($handle);
    ?>

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    You say that the script isn't working. But why? What is it doing?

    I notice that google suggest is now part google search and also there is google custom search
    Did your browser try to redirect you to a google page that no longer exists? Because if it did, then the ajax worked fine. Did you get an error? What did it say?

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    The good news is the ajax script works just fine, and it is returning the text from the php file. The error is the handling of the return string

    Example:
    Code:
    window.google.ac.h(["hellokitty",[["hellokitty.com","","0"],["hello kitty","","1s"],["hellokitty email","","2"],["hello kitty games","","3s"],["hello kitty vans","","4s"],["hello kitty nails","","5s"],["hellokittyonline","","6"],["hello kitty coloring pages","","7s"],["hello kitty tattoos","","8s"],["hello kitty wallpaper","","9s"]],{"k":1}])
    the error is that object ac is null or undefined
    Last edited by blaze4218; 10-08-2011 at 06:39 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Personally I never understood the wisdom of an introductory level script that contains advanced concepts that a beginner can't debug. To me the first ajax script should be a simple retrieval and display of the data from a server script.
    Here was my "first ajax":

    index.HTML file
    Code:
    <script>
    //////////////////////////////////////////////////////////////////////////////////////////////
    var req;
    
    function loadXMLDoc(url) {
    	req = false;
        // branch for native XMLHttpRequest object
        if(window.XMLHttpRequest && !(window.ActiveXObject)) {
        	try {
    			req = new XMLHttpRequest();
            } catch(e) {
    			req = false;
            }
        // branch for IE/Windows ActiveX version
        } else if(window.ActiveXObject) {
           	try {
            	req = new ActiveXObject("Msxml2.XMLHTTP");
          	} catch(e) {
            	try {
              		req = new ActiveXObject("Microsoft.XMLHTTP");
            	} catch(e) {
              		req = false;
            	}
    		}
        }
    	if(req) {
    		req.onreadystatechange = processReqChange;
    		req.open("GET", url, true);
    		req.send("");
    	}
    }
    
    ///////////////////////////////////////////////////////////////////////////////////////////////
    
    function processReqChange() {
        // only if req shows "loaded"
        if (req.readyState == 4) {
            // only if "OK"
            if (req.status == 200) {
                document.getElementById('data').innerHTML=req.responseText
            } else {
                alert("There was a problem retrieving the XML data:\n" +
                    req.statusText);
            }
        }
    }
    
    //////////////////////////////////////////////////////////////////////////////////////////////
    
    </script>
    <button onclick="loadXMLDoc('test.asp')">Get Ajax Data</button>
    <div id="data"></div>
    test.ASP file
    Code:
    <%@LANGUAGE="JavaScript"%>
    
    <%
    Response.Write('Hello Ajaxer!');
    %>
    Very simple. Nothing that will be subject to change as google, or browsers evolve...

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax for Dummies

    Did anyone ever figure out the problem with the code (as originally written above) in the Ajax for Dummies book?


  •  

    Posting Permissions

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