php - $(Id).submit() on javascript -
i have problem following code: here's javascript
$(document).ready(function(){ $("#visualisercarte").submit(function(){ $.post("store.php",{longitudes:longitudes,latitudes:latitudes}); alert('ok'); var mapoptions = { zoom: 13, // center 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 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 click on submit form "visualisercarte", expect it alert ok, draw map polyline , form réinitialisercarte below map. when execute alert not map . if add return false; @ end of submit function, alert, right map, 2 first forms still here, while expecting have third. help? tahnks
it seems you're missing success calback (or promise interface) executed when ajax call finished. aproximate code uses deferred objects can 1 below:
$(document).ready(function(){ // send data server , store $("#soumettrecarte").submit(function(ev) { ev.preventdefault(); // prevent submit; let ajax call deal 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 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 php code can 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 can see jquery code takes care of dealing server calls , displaying of various elements.
Comments
Post a Comment