4.6 Zillow Web – Creating an input text box

You have succeeded in getting data from Zillow, and displaying it in the sidebar… but… for ONE zipcode only. Instead, we want to make this user-driven, by providing a text box that will allow users to enter a zipcode. First, let’s create the input text box and a submit button next to it. In the body section, below the H1 tag, add the following:

1
2
3
4
5
6
7
8
9
10
11
12
<body onload="yoh.initialize()">
    <!-- side panel div container -->
    <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
        <h1>Zillow Web</h1>
        Enter a zipcode:
        <input type="text" id="zipentry">
        <input type="button" onClick="yoh.getZillow()" value="go">
        <div id="zillowdisplay"></div>
    </div>
    <!-- map div container -->
    <div id="map_canvas" style="height:100%; margin-left:400px;"></div>
</body>

We have added the following:

  • input type=”text” id=”zipentry”
  • input type=”button” onClick=”yoh.getZillow()” value=”go”

The onClick action on the button means that when a user clicks “go”, the “getZillow()” function will run. However, at this point, “getZillow” does not know what value the user has entered. In order for “getZillow” to see the user entry, we’ll have to make it “read” the value entered in the textbox. Furthermore, we will have to delete the contents of the side bar every time a new request is made. Otherwise, the side bar will continue to grow endlessly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
yoh.getZillow = function (zip) {
   
    //empty sidebar
    $('#zillowdisplay').html('');
   
    //grab user entered zip value
    zip = $('#zipentry').val();
   
    url = 'http://www.zillow.com/webservice/GetDemographics.htm?zws-id=X1-ZWz1bvv3f4mex7_5kvb6&zip='+zip;
    encodedurl = encodeURIComponent(url);

    $.ajax({
        type: "GET",
        url: "http://www.yohman.com/proxy/proxy_xml.php?url=" + (encodedurl),
        dataType: "xml",
        success: yoh.xmlParser
    });
}

Now you have created an entirely dynamic experience for the user. Users can enter any zipcode… anywhere in the entire country!

Error Handling

The last step to perform is error handling. We need to alert a user if they entered an incorrect zipcode, or one that Zillow was unable to return data for. The Zillow response has a “message” parameter with a “text” node that returns “Error” when it fails. Therefore, before displaying the data, check to see whether or not there is an error. To do this, use the “.find” function on the “message” text to see if it has the word “error” in it. If it has an “error”, then create an “alert” popup box telling the user that the zipcode entered is not valid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
yoh.xmlParser = function(xml)
{
    //create variable to capture handling message from Zillow
    message = $(xml).find("text").text();
   
    //if message contains the word "error" show an alert box, if not, run the code
    if (message.search('Error') == -1)
    {
        $(xml).find("attribute").each(function ()
        {
            if ($(this).find("zip").text() != '')
            {
                $('#zillowdisplay').append($(this).find("name").text());
                $('#zillowdisplay').append(': ');
                $('#zillowdisplay').append('<strong>'+$(this).find("zip").text()+'</strong>');
                $('#zillowdisplay').append('<br>');
            }
        });
    }
    else
    {
        alert('Zipcode was not found');
    }
}

(sample code)

Leave a Reply