Как вывести Яндекс карту в jquery ui dialog. При разработке, а точнее доработке своего сервиса Конструктор Яндекс Карт, столкнулся с задачей, на первый взгляд весьма тривиальной. Надо было вывести Яндекс карту в форме диалогового окна jquery ui.
Хотя у меня уже был опыт подобного рода, я решил, что легко выполню эту задачу. Не тут то было. Карта совершенно не хотела рисоваться во вновь созданном и показанном боксе.
Дело еще осложнялось тем, что карту надо было выводить в iframe. Я хотел сделать что-то вроде "песочницы", для запуска кода.
Попробовал решить в лоб
var _frame = jQuery('<iframe></iframe>').attr("frameborder", "0"), _vbox = jQuery('<div></div>'), doc;
jQuery('body').append(_vbox);
_vbox.append(_frame).dialog();
_frame.width(500);
_frame.height(500);
var element = _frame.get(0);
if ( element.nodeName.toLowerCase() === "iframe" ) {
if (element.contentDocument) // Gecko
doc = element.contentDocument;
else if (element.contentWindow) // IE
doc = element.contentWindow.document;
}else
doc = element;
doc.open();
doc.write('<html><head><title>Конструктор Yandex карт</title></head><body>{ код вывода Яндекс Карты сгенерированный сервисом}</body></html>');
doc.close();
и вновь у это великолепного кода, всего один минус. Он не работал(
Через несколько часов, мой лучший друг Гугл, сообщил мне, следующее: jquery ui dialog не использует то же элемент, который подает в него при запуске плагина. Т.е. после установки диалога, мы пытаемся повлиять на его содержимое, которое таковым уже не является. Это кривая дорожка. Забегая вперед скажу, дорожка была верная, и гугл мне не товарищ
Некий пользователь, с умного форума сообщал, что стоит работать с событием open, диалога. Оно срабатывает в момент открытия диалога и в нем, уже можно работать с верным контекстом this.
Вот это верная дорожка, как продвижение сайтов от http://prodvijenie-web.ru/ верный путь в развитии Вашего бизнеса.
Все, что ниже _vbox.append(_frame).dialog(); нужно засунуть в вызов dialog
var _frame = jQuery('<iframe></iframe>').attr("frameborder", "0"), _vbox = jQuery('<div></div>'), doc;
jQuery('body').append(_vbox);
_vbox.dialog({
open:function(){
var div = jquery(this);
div.append(_frame);
_frame.width(500);
_frame.height(500);
var element = _frame.get(0);
if ( element.nodeName.toLowerCase() === "iframe" ) {
if (element.contentDocument) // Gecko
doc = element.contentDocument;
else if (element.contentWindow) // IE
doc = element.contentWindow.document;
}else
doc = element;
doc.open();
doc.write('<html><head><title>Конструктор Yandex карт</title></head><body>{ код вывода Яндекс Карты сгенерированный сервисом}</body></html>');
doc.close();
}
});
чудо-код вновь не работал.
Методом научного тыка (благо образование математическое), за комментировал строку
//doc.close();
все заработало. Если Вы не используете iframe, то Ваш код вероятно запустился уже давно. И вы даже не читаете эту статью. Ну, а если читаете, то значит - это вновь кому-нибудь нужно.
Комментарии
dialog.dialog("option", "title", "Как нас найти");
dialog.dialog("option", "width", 640);
dialog.dialog("option", "height", 520);
dialog.dialog("open");
$("#dialog-content").html('');
$('', {
src: 'map/list/',
id: 'mapFrame',
frameborder: 0,
scrolling: 'no',
width: '600px',
height: '450px'
}).appendTo('#dialog-content');
Все.
dialog.dialog("option", "title", "Как нас найти");
dialog.dialog("option", "width", 640);
dialog.dialog("option", "height", 520);
dialog.dialog("open");
$("#dialog-content").html('');
$(' < i f r a m e > ', {
src: 'map/list/',
id: 'mapFrame',
frameborder: 0,
scrolling: 'no',
width: '600px',
height: '450px'
}).appendTo('#dialog-content');
Все.