CODEWITHSUNDEEP
javascripthtmlajaxasp-classic
Cameron Fedy
Cameron Fedy

Reputation: 61

Javascript Ajax Call always returns readyState=1 and status=0 error

I am designing a small project that utilizes a geocoder and parses the address, lat, and long into variables, which sends the values to a database using AJAX/ASP and inserts the values.

My issue surrounds the readyState and status of the AJAX call, which always returns 1 and 0 respectively. I have been looking through numerous forums and examples to find one that is similar to mine, and have tried many different solutions, but to no avail. If someone could give me some advice, it would be greatly appreciated.

Here is my code for the interface, the issues surround the 'sendInfo()' and 'stateChange()' functions.

Geocoder_experimentAJAX.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style type="text/css">
    a.normal:link {text-decoration:none;} 
    p.rightcol {padding-left:1400px}
    div.header {
        padding: 0.5em;
        color: blue;
        background-color: #D0F5A9;
        clear: left;
    }
    div.footer {
        padding: 0.5em;
        color: white;
        background-color: #31B404;
        clear: left;
    }
    html, body, #map-canvas {
        height: 100%;
        margin: 1px;
    }
    #panel {
        width: 350px;
        font-family: Arial, sans-serif;
        font-size: 13px;
        float: right;
        margin: 10px;
     }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var geocoder;
var map;
var markers = [];
var drag = false;
var latLong;
var primeMarker;
var newlat
var newlon

//Creates geocoder and map.
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mid = new google.maps.LatLng(45.4214, -75.6919);
  var mapOptions = {
    zoom: 12,
    center: mid
  }
  map  = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

//Geocodes address provided by user and displays Lat/Long and Full Address.
function codeAddress() {
    address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results.length > 1) {
            document.getElementById("Multi").innerHTML = "Multiple matches of that address, please select the best match from the list below.";
            removeOptions(document.getElementById("myList"));
            var opt = document.createElement("option");
            var select = document.getElementById("myList");
            opt.text = "Please Choose Address";
            opt.value = '';
            select.options[0] = new Option(opt.text,opt.value);
            for (var i = 0; i < results.length-1;i++) {
                opt.text = results[i].formatted_address;
                opt.value = results[i].formatted_address;
                select.options[select.options.length] = new Option(opt.text,opt.value);
            }
        }
        else {
            removeOptions(document.getElementById("myList"));
            document.getElementById("Multi").innerHTML = "";
            map.setCenter(results[0].geometry.location);
            map.setZoom(17);
            latLong = results[0].geometry.location;
            var addy = results[0].formatted_address;
            var addy2 = addy.toString();
            document.getElementById("fmtAddress").value=addy2;
            marker = addMarker(results[0].geometry.location, drag);
            document.getElementById("latbox").value = primeMarker.getPosition().lat();
            document.getElementById("lngbox").value = primeMarker.getPosition().lng();
        }
    }
    else if( document.getElementById('address').value == "" ||  document.getElementById('address').value == null) {
        alert('Address box is emtpy, cannot geocode a blank address. Please fill in your address.');
    }
    else {
        alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

// Add a marker to the map.
function addMarker(location, drag) {
    marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: drag
    });
    primeMarker = marker;
    markers.push(marker);
}

// Allows the user to edit the position of the marker.
function moveMarker() {
    if (markers.length == 0) {
        alert('There is no marker to edit. Please insert address and click "Geocode" to produce a marker.');
    }
    else {
    drag = true;
    clearMarkers();
    addMarker(latLong, drag);
    google.maps.event.addListener(primeMarker, 'dragend', function (event) {
        newlat = this.getPosition().lat();
        newlon = this.getPosition().lng();
        document.getElementById("latbox").value = newlat;
        document.getElementById("lngbox").value = newlon;
    });
    }
}

// Sets the map on all markers in the array.
function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
}

// Remove all items in listbox
function removeOptions(selectbox) {
    var i;
    for(i=selectbox.options.length-1;i>=0;i--){
        selectbox.remove(i);
    }
}

// Gets full address from list and sends it to codeAddress()
function newAddress() {
    var x = document.getElementById("myList").selectedIndex;
    document.getElementById("address").value = document.getElementById("myList").options[x].text;
    codeAddress();
}

// Checks for and disables draggable marker, and checks that values to be sent to database aren't empty
function validateForm() {
    if (typeof primeMarker != 'undefined')
        primeMarker.setDraggable(false)
    var w = document.forms["myForm"]["address"].value;
    var x = document.forms["myForm"]["addy"].value;
    var y = document.forms["myForm"]["lat"].value;
    var z = document.forms["myForm"]["lng"].value;
    if (x==null || x=="" || w==null || w=="") {
        alert("The address text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
        return false;
    }
    else if (y==null || y=="" || z==null || z=="") {
        alert("The latitude and/or longitude text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
        return false;
    }
    else {
    sendInfo();
    }
}

function sendInfo(){
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("POST","UpdateAJAX.asp",true);
    xmlhttp.onreadystatechange=stateChanged(); 
    xmlhttp.send();
}

function stateChanged() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
    else {
        document.getElementById("txtHint").innerHTML="Error with ready state: " + xmlhttp.readyState + " and status: " + xmlhttp.status;
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="document.myForm.reset();">
    <div class="header">
        <img src="grey_logo.png" height="10%" width="10%"/>
        <h1 class="header" align="center" ><font  face="arial" color="black">Web-Based Geocoder Service</font></h1>
        <p class="rightcol"><a class="normal" href="https://geo.grey.ca/LaunchPage/"> Grey County GIS  </a></br>
        <a class="normal" href="http://swiftnetwork.ca/">SWIFT Network Survey</a>
        </p>
    </div>
    <div id="panel">
        <form name="myForm" action="" >
            <b>Enter Address To Be Geocoded:</b>
              <input id="address" type="textbox" size="50" name="address">
              <input type="button" value="Geocode" onclick="codeAddress()"></br></br>
              <p id="Multi"></p>
            <b>List of Address Options:</b>
              <select id="myList" style="width: 330px;" onchange="newAddress()"-->
              <option>List of possible addresses...</option>
              </select></br></br>
            <b>Full Formatted Address:</b>
              <p><input size="50" type="text" id="fmtAddress" name="addy" ></p>
            <p><b>Latitude:</b> <input size="20" type="text" id="latbox" name="lat" ></p>
            <p><b>Longitude:</b> <input size="20" type="text" id="lngbox" name="lng" ></p>
            <b>Edit Marker Location</b></br>
              <input type="button" value="Edit Marker" onclick="moveMarker()"></br></br>
            <b>Save New Location</b></br>
              <button type="button" onclick="return validateForm()">Save</button>
            <div id="txtHint">Response Shown Here...</div>
        </form>
    </div>
    <div id="map-canvas"></div>
    <div class="footer" align="center">COPYRIGHT 2015 GREY COUNTY GIS. ALL RIGHTS RESERVED</div>
  </body>
</html>

Here is the .ASP file that I call to perform the insertion into the database, which works just fine as I was able to insert the values without AJAX, but I can't seem to get the AJAX to fully work.

Update.asp

<% 
    conn = Server.CreateObject("ADODB.Connection"); 
    conn.Open("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" +  Server.MapPath("Project.mdb"));

    var addy=Request.Form("addy");
    var lat=Request.Form("lat");
    var lng=Request.Form("lng");

    var sql="INSERT INTO Location_Info (Address,Latitude,Longitude)"
    sql= sql + " VALUES "
    sql= sql + "('" + addy + "',"
    sql= sql + "'" + lat + "',"
    sql= sql + "'" + lng + "')"

    rs = conn.Execute(sql);

    Response.Write("Your record has been placed into the database.");


    rs.Close();
    conn.Close();
%>

Upvotes: 1

Views: 955

Answers (1)

Amadan
Amadan

Reputation: 198388

xmlhttp.onreadystatechange=stateChanged();

does not do what you think it does - it will invoke stateChanged, evaluate it to undefined, then assign that undefined to .onreadystatechange, which tells the xmlhttp that it doesn't have to care about ready state changes.

You want to assign your function to the .onreadystatechange, not its result:

xmlhttp.onreadystatechange=stateChanged;

Upvotes: 2

Related Questions