javascript - Google Maps API multiple times on this page - Modal Bootstrap Return Json Success -
the problem when open modal bootstrap carries google maps.
modal bootstrap - _edit.cshtml
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">editar</h4> </div> @using (ajax.beginform("edit", "account", new ajaxoptions { httpmethod = "post", onsuccess = "onmodalsuccess" }, new { @id = "modalformid", @class = "form-horizontal", role = "form" })) { @html.antiforgerytoken() <div class="modal-body"> <div class="form-horizontal"> @html.validationsummary(true, "", new { @class = "text-danger" }) <div class="form-group"> <div class="col-xs-6"> @html.labelfor(m => m.googlemaps_link) @html.textboxfor(m => m.googlemaps_link, new { @id = "pac-input", @class = "controls", @readonly = true }) <br /> <div id="map-canvas" class="help_googlemaps" style="width:865px;height:380px;" title="edit"></div> </div> </div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="save" /> <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> </div> </div> </div> @*success message modal*@ <div id="modalmsgboxid" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title"> <strong id="modaltitleid" style="margin-left: 6px; font-size: 16px;"></strong> </h4> </div> <div class="modal-body"> <p> <div id="modalcontentid" style="margin-left: 6px; font-size: 16px;"></div> </p> </div> <div class="modal-footer"> <button id="normalokid" type="button" class="btn btn-success" data-dismiss="modal">ok</button> </div> </div> </div> </div> } // google maps search <script> $(document).on("shown.bs.modal", function () { if (window.google && window.google.maps) { initautocomplete(); return; } $script = $("<script>", { 'type': 'text/javascript', 'src': 'https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&libraries=places&callback=initautocomplete' }); $script.appendto($("head")); }); function initautocomplete() { var latlong = @html.raw(jsonconvert.serializeobject(model.geo)); var latlongsplit = latlong.split(" "); var lat = latlongsplit[0]; var long = latlongsplit[1]; //var lat = (-23.5326148); //var long = (-46.803688); var endereco = @html.raw(jsonconvert.serializeobject(model.googlemaps_link)); var map = new google.maps.map(document.getelementbyid('map-canvas'), { center: new google.maps.latlng(lat, long), zoom: 11, scrollwheel: false, maptypeid: google.maps.maptypeid.roadmap }); var markerlatlong = new google.maps.marker({ position: new google.maps.latlng(lat, long), map: map, title: endereco }); // create search box , link ui element. var input = document.getelementbyid('pac-input'); var searchbox = new google.maps.places.searchbox(input); map.controls[google.maps.controlposition.top_left].push(input); // bias searchbox results towards current map's viewport. map.addlistener('bounds_changed', function () { searchbox.setbounds(map.getbounds()); }); //clear markers var markers = []; // [start region_getplaces] // listen event fired when user selects prediction , retrieve // more details place. searchbox.addlistener('places_changed', function () { var places = searchbox.getplaces(); if (places.length == 0) { return; } markerlatlong.setmap(null); // clear out old markers. markers.foreach(function (marker) { marker.setmap(null); }); markers = []; // each place, icon, name , location. var bounds = new google.maps.latlngbounds(); places.foreach(function (place) { var icon = { url: place.icon, size: new google.maps.size(71, 71), origin: new google.maps.point(0, 0), anchor: new google.maps.point(17, 34), scaledsize: new google.maps.size(25, 25) }; // create marker each place. markers.push(new google.maps.marker({ map: map, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { // geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitbounds(bounds); }); // [end region_getplaces] } var onmodalsuccess = function(result) { if (result.enableerror) { // clear. $('#modaltitleid').html(""); $('#modalcontentid').html(""); // setting. $('#modaltitleid').append(result.errortitle); $('#modalcontentid').append(result.errormsg); // show modal. $('#modalmsgboxid').modal( { backdrop: 'static', keyboard: false }); } else if (result.enablesuccess) { // clear. $('#modaltitleid').html(""); $('#modalcontentid').html(""); // setting. $('#modaltitleid').append(result.successtitle); $('#modalcontentid').append(result.successmsg); // show modal. $('#modalmsgboxid').modal( { backdrop: 'static', keyboard: false }); // resetting form. $('#modalformid').get(0).reset(); } } </script> controller
[httppost] [validateantiforgerytoken] public actionresult edit(editmodel model) { if (modelstate.isvalid) { return this.json(new { enablesuccess = true, successtitle = "success", successmsg = "success" }); } retur partialview (_edit, model); } the problem in partial view. show warning!
with code below:
<div id="modalmsgboxid" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title"> <strong id="modaltitleid" style="margin-left: 6px; font-size: 16px;"></strong> </h4> </div> <div class="modal-body"> <p> <div id="modalcontentid" style="margin-left: 6px; font-size: 16px;"></div> </p> </div> <div class="modal-footer"> <button id="normalokid" type="button" class="btn btn-success" data-dismiss="modal">ok</button> </div> </div> </div> </div> picture:
the problem modal success, make google maps fail. how can fix?
thank guys.
i solved problem in way. using bootstrap alert.
link: alerts - bootstrap
remove code:
<div id="modalmsgboxid" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title"> <strong id="modaltitleid" style="margin-left: 6px; font-size: 16px;"></strong> </h4> </div> <div class="modal-body"> <p> <div id="modalcontentid" style="margin-left: 6px; font-size: 16px;"></div> </p> </div> <div class="modal-footer"> <button id="normalokid" type="button" class="btn btn-success" data-dismiss="modal">ok</button> </div> </div> </div> </div> new code:
<center><div id="result"></div></center> javascript:
$("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>successfully updated record!</div>'); now works! took example link: here
Comments
Post a Comment