Ich habe jquery ui modalen Dialog. jquery ui dialog Inhalt Anzeige mit Ajax Anruf. Mein Problem ist, wenn ich das erste Mal die jquery-Dialogmappe erfolgreich lade. zweites Mal wenn ich den Dialog öffne, kann ich die Karte im Dialog nicht laden. Ich habe versucht zu inspizieren, aber div hat Inhalt leer, wenn das zweite Mal geöffnet wird.Google Map Render-Problem in Ajax jquery UI modalen Dialog
Ich habe viele Stackoverflow Antwort versuchen, aber sie funktionieren nicht für mich. weil ich nicht nur ein dialogproblem habe. Ich denke, ich habe Probleme mit Inhalten auch von Ajax. Sie können meine Google Map API-Funktion zur Anzeige der Karte sehen.
var map = '';
function googleMap(selector, lat, lng) {
alert(map);
var myLatlng = new google.maps.LatLng(lat, lng);
// var map;
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(23.6459, 81.9217),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
if (!map) {
map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
google.maps.event.addListener(map, "click", function() {
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
});
} else {
google.maps.event.trigger(map, "resize");
map.setOptions(mapOptions);
}
}
mein jquery ui Dialog (Karte) Inhalt, der vom Ajaxanruf holt.
können Sie helfen, mein Problem zu lösen.
siehe meine unten div für googlemap Anzeige. es ist in Reaktion auf meine Ajax Anruf
<div id="googlemaps">
</div>
über div enthält meine Google-Karte. Zum ersten Mal öffnen Sie die Jquery-UI-Dialog-Karte erfolgreich, aber wenn Sie zum zweiten Mal öffnen, erscheint die Karte div leer.
meine Ajax-Code mit jQuery UI Dialog
$("<div>This is content</div>")
.dialog({
"title": "",
"width": "auto",
"height": "auto",
"modal": true,
// "buttons": {"OK": function() {
// $(this).dialog("close");
// },
// "Refresh": function() {
// getContent($(preview_btn).attr('data-id'));
// },
// }
}).dialogExtend({
"load": function (evt, dlg) {
getContent($(preview_btn).attr('data-id'), c_page);
//$('.ui-dialog').css('top', '95px');
//$("html, body").animate({
// scrollTop:0
//},"fast");
$('span').removeClass('ui-button-icon-primary ui-icon');
//$('span').remove();
$('.ui-button').css('top', '5px');
//$('.ui-dialog-titlebar-close').append('<span class="test"> </span>');
//$('.ui-dialog-titlebar-close').append('<span class="ui-button-text">Close</span>');
$('.ui-dialog-titlebar-close').append('<div style="margin-top: -12px;">X</div>');
$('.ui-dialog').css('top', scrollY + 'px');
$('.ui-button-text').css({"margin-top": "1px", "height": "0px"});
},
});
function getContent(id, c_page) {
// console.log(id);
$.ajax({
type: 'post',
url: 'xxx.php',
//url: 'preview_template.php',
data: {id: id, c_page: c_page},
success: function (data) {
$('body').find('.ui-dialog-content').html(data);
var full_size = $(window).width();
var ui_size = $('.ui-dialog').width();
// console.log(full_size);
// console.log(ui_size);
var ui_left = (parseFloat(full_size) - parseFloat(ui_size))/2;
$('.ui-dialog').css('left', ui_left + 'px');
}
})
}
Können Sie Geige für Ihre Frage schreiben? –
Ich habe sehr langen Code, so dass es nicht möglich ist, auf Geige einzurichten. Sie können mir Ihre Antwort vorschlagen, damit ich meine Maschine anprobieren kann. –
Checkout http://www.aspsnippets.com/Demos/1061/ Link. Verwenden Sie diese Art von Dialog? –