javascript上的$（Id）.submit（）

Question

I have a problem with the following code: here's the javascript

$(document).ready(function(){

 $("#VisualiserCarte").submit(function(){ 

    $.post("store.php",{longitudes:longitudes,latitudes:latitudes});
    alert('ok');
       var mapOptions = {
            zoom: 13,
            // Center the map on Chicago, USA.
            center: new google.maps.LatLng(tableauPoints[0].lat(),tableauPoints[0].lng())
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var flightPath = new google.maps.Polyline({
            path: tableauPoints,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
        flightPath.setMap(map); 


});

});

and here is the PHP

 <script src="google_map.js"></script>
  <?php
    $DisplayForm= True;
    if (isset($_POST['vue'])){
        $DisplayForm= False;    
    }
    if ($DisplayForm){

  ?>
  <form  method="post" id="VisualiserCarte">
      <input type="submit" name="vue" value="visualiser la carte"  >
  </form> 
  <form  action="store.php" method="post" id="SoumettreCarte" >
      <input type="submit"  name="submit" value="soumettre la carte"  >
  </form>
  <?php
    }
    else
    {
  ?>
  <form method="post" id="RéinitialiserCarte" >
      <input type="submit"  value="réinitialiser" value="réinitialiser la carte"  >
  </form>

  <?php
    }
  ?>  

If i click on submit for the form "VisualiserCarte", i expect it to it to alert ok, to draw the map with the polyline and to get the form RéinitialiserCarte below the map. When i execute it i get the alert but not the map . If i add return false; at the end of the submit function, i get the alert, the right map, but the 2 first forms are still here, while i was expecting to have only the third. Any help? Tahnks

Answer 1

It seems you're missing the success calback (or the Promise interface) to be executed when AJAX call is finished. An aproximate code which uses deferred objects can look like the one below:

$(document).ready(function(){

    // Send data to server and store it
    $("#SoumettreCarte").submit(function(ev) { 

        ev.preventDefault(); // Prevent submit; Let AJAX call deal with submit

        $.post("store.php", {longitudes: longitudes,latitudes: latitudes})
        .done(function (response) {
            alert('Soumettre Carte - ok');
        });

    });

     $("#VisualiserCarte").submit(function(ev){ 

        ev.preventDefault(); // Prevent submit

        // Hide forms
        $('#VisualiserCarte').hide();
        $('#SoumettreCarte').hide();

        // Display last form
        $('#ReinitialiserCarte').show();

        var mapOptions = {
            zoom: 13,
            // Center the map on Chicago, USA.
            center: new google.maps.LatLng(tableauPoints[0].lat(),tableauPoints[0].lng())
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var flightPath = new google.maps.Polyline({
            path: tableauPoints,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
        flightPath.setMap(map); 

    });

    $('#ReinitialiserCarte').submit(function(ev) {
        ev.preventDefault(); // Prevent submit

        $('#VisualiserCarte').show();
        $('#SoumettreCarte').show();
        $('#ReinitialiserCarte').hide();
    });

});

Also the PHP code can be written:

<form  method="post" id="VisualiserCarte">
  <input type="submit" name="vue" value="visualiser la carte"  >
</form> 
<form  action="store.php" method="post" id="SoumettreCarte" >
  <input type="submit"  name="submit" value="soumettre la carte"  >
</form>

<div id="map-canvas"></div>

<form method="post" id="ReinitialiserCarte" style="display: none;">
  <input type="submit"  value="réinitialiser" value="réinitialiser la carte"  >
</form>

As you can see the jQuery code takes care of dealing with the server calls and the displaying of various elements.