jQuery error "this" is undefined for $.post to php page

Question

I have the same problem with the following code:

function getpgisdata() {
    sdata = ads.d;
    var send = $.post("csqcity.php", { variable:sdata }, function pgisquery(data) {
          alert("success");
       })
         .success(function() { alert("second success"); })
         .error(function() { alert("error"); })
         .complete(function() { alert("complete"); });
    send.complete(function(){ alert("second complete");
});

The function is called by:

<div class="wrapSearch">
    <div>
        <input id="searchTextField" type="text" size="50" placeholder="Enter an address...">
        <input type="submit" name="search" id="search1" onclick="getpgisdata()">
    </div>
 <div class="listWrap" id="listWrap1">
    <ul class="searchList" id="searchList1">
    </ul>
 </div>

The error is: with Firebug

 TypeError: this is undefined

...n!a?l:Sd(this.lat(),a.lat())&&Sd(this.lng(),a.lng())};P[H].equals=P[H].b;P[H].la...
{main,places}.js (line 11)

With Google

Uncaught TypeError: Cannot call method 'lat' of undefined
                                                                %7Bmain,places%7D.js:11 

The csqcity.php contains:

The following libraries are referred in index.html:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<link rel="stylesheet" type="text/css" href="http://dev.openlayers.org/releases/OpenLayers-2.12/theme/default/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev.openlayers.org/releases/OpenLayers-2.12/examples/style.css"/>
<script type="text/javascript" src="http://dev.openlayers.org/releases/OpenLayers-2.12/OpenLayers.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

I have another 2 functions. One is a Google Autocompleter, and the other draw an Openlayers map. The error is related with the google libraries, so I attach also the autocompleter code:

function initialize() {
    input = document.getElementById('searchTextField');
    var options = {
        componentRestrictions: {country: 'us'},
        //componentrestrictions: {administrative_area2: 'tx'}
    };
    autocomplete = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      //var place = autocomplete.getPlace();
      var place = autocomplete.getPlace();
      ads.d = place.geometry.location;
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

Any idea from someone? Thank you in advance!

Answer 1

I managed to get the code to work, after i checked the "this" value. In my code this was the DOM document. So first, I enclosed the $.post inside the HTML input submit element which triggered it, to have the this as the HTML input, and use the value of the associated input text of the autocompleter. Another mistake I done was to store the needed data in a global variable, which triggered the "this is undefined" error. So I called for the HTML input text associated with the HTML input submit (which is this in my case).

The code of the function became:

  $(document).ready(function () {
      $('#search1').click(function(){
           sdata = $('#searchTextField').val();
        if( sdata == undefined || sdata == 'Enter an address...' || sdata < 4 ){
        alert('Please insert or choose an address to proceed.');
        } else {
      $.post(
            'csqcity.php',
            { 'variable' : sdata },
            function( r_data ){
                alert(r_data);
            }       
        );
        }
      });
  });

The $.post was successful!

Thanks for the suggestions! They helped me to understand the problem.