Why my code is behaving differently on local and not loading correct json response?

Question

I wanted to implement auto-populate city and state from zip code.

This link is working super. Now I wanted to copy this code so right clicked and chosen view page source and there I found the html and ajax code.

I copied code created index.php on my localhost. I have also copied necessary files like jquery.min.js etc.

Now my code is same as that of link but I am not getting same output.

Here is code that I have copied :

<!doctype html>
<html>
<head>
<title>ZIP code autocomplete test</title>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.autocomplete.js" type="text/javascript"></script>
<style type="text/css">

body { font-family: Helvetica, Arial, sans-serif; }

.ac_city { font-size: smaller; float: right; width: 70% }
.ac_zip { font-weight: bold; float: left; width: 25%; }

.ac_city, .ac_zip { margin: 0.1em 0; }

</style>
<script type="text/javascript">

$(document).ready(function() {
    $("#zip, #city").autocomplete("zip_json.pl", {
        minChars: 2,
        selectFirst: true,
        matchSubset: true,
        width: 220,
        scrollHeight: 300,
        max: 1024,
        dataType: 'json',
        extraParams: {
            zip: function () {
                return $("#zip:focus").val();
            },
            city: function () {
                var c = $("#city:focus").val();
                return c && c + '%'
            }
        },
        parse: function (data) {
            var a = [];
            for(var i = 0;i < data.length; i++)
                a.push({ data: data[i],
                         value: data[i].zip,
                         result: data[i].zip
                       });
            return a;
        },
        formatItem: function (item) {
            return "<span class='ac_zip'>" + item.zip + "</span>" +
                              "<span class='ac_city'>" + item.city +
                              ", " + item.state + "</span>";
        },
    });
    $("#zip, #city").result(function (event, item) {
        $("#zip").val(item.zip);
        $("#city").val(item.city);
        $("#state").val(item.state);
    });
});

</script>
</head>
<body>
  <p>Enter a zip code or city and it will start autocompleting with 2
  or more chars. Select an item from the list and it will fill in the
  zip, city and state.</p>
  <form>
    <label> ZIP: <input name="zip" id="zip" type="text" size="5" maxlength="5"></label>
    <label> City: <input name="city" id="city" type="text" size="20"></label>
    <label> State: <input name="state" id="state" type="text" size="2" maxlength="2"></label>
  </form>

</body>
</html>

When I checked above code on local, actually the code working correctly but it is not picking correct json response. when I enter 2 numbers in zip field then it should show related zipcode which is showing on that website but on my local browswer it is loading all joson_zip.pl file's json data.

When I checked "NET" output from firebug tool, I found difference in json response of local output and link output.

Can anyone please help me on this ?

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

In the source there is

<script>
    $("#zip, #city").autocomplete("zip_json.pl", {
        ...
    }
</script>

zip_json.pl refers to something on the server: http://methvin.net/js/zip/zip_json.pl. This is not a file, like you saved (JSON), but a script. Check it out here: https://github.com/gmethvin/zipcity/blob/master/zip_json.pl

You should run it on you own pc, because you will get an error.

You should defenitely check out the sources on github, everything you need is in there https://github.com/gmethvin/zipcity

edited May 23 '17 at 12:20

Community

1
1

answered Jul 15 '14 at 10:39

P1nGu1n

594
8
23

NO its not like that. I have downloaded that .pl file on my local. Still it is not working. – Akki Jul 15 '14 at 10:42
@P1nGu1n because he have `zip_json.pl` file downloaded on local – Umesh Sehta Jul 15 '14 at 10:44
@P1nGu1n:I tried your trick of using the URL : http://methvin.net/js/zip/zip_json.pl but it's not worked for me. I'm also facing the same issue as Akki. It's really a genuine issue. – PHPLover Jul 15 '14 at 10:45
Check my edited answer, `zip_json.pl` is a script, not a file – P1nGu1n Jul 15 '14 at 10:54

score 0 · Answer 2 · answered Jul 15 '14 at 10:50

try changing

$("#zip, #city").autocomplete("zip_json.pl", {

to

$("#zip, #city").autocomplete("http://methvin.net/js/zip/zip_json.pl", {

that might not works either because of cross domain request you best option is to have your server handeling the request

Why my code is behaving differently on local and not loading correct json response?

2 Answers2