$.ajax({
	url: "...",
	success: function(){
		$("#myTemplate").tmpl(data).appendTo($("#myContainer").empty());
	}
});

можно удобно писать

$.ajax({
	url: "...",
	context: $("#myContainer").empty(),
	success: function(){
		$("#myTemplate").tmpl(data).appendTo(this);
	}
});

только это все разбивается о рифы реальности, когда аджакс надо повесить на кнопку

$("#myButton").click(function(){
	$.ajax({
		url: "...",
		context: $("#myContainer").empty(),
		success: function(){
			$("#myTemplate").tmpl(data).appendTo(this);
		}
	});
});

При трех быстрых кликах, контейнер три раза обнуляется, потом идет запрос/ответ и шаблон три раза вставляется в контейнер.

Первый пришедший в голову вариант был прост как двери

$("#dialog1","#dialog2","#dialog3","#dialog4","#dialog5").dialog("close");

но если хотя бы один диалог не был создан при старте страницы то вылетит Exception. Естественно создавать диалоги при старте бессмысленно. ни один может не понадобиться а ресурсов они отъедают нормально. Второй вариант был таким

for (var i=1,j=5;i<j;i++){
	try{
		$("#dialog"+i).dialog("close");
	}catch(e){
		// do nothing
	}
}

и несколько дней эта конструкция муляла мне глаза. Наконец я переписал это примерно так

for (var i=1,j=5,d;i<j;i++){
	d = $("#dialog"+i);
	if(d.data("dialog")){
		d.dialog("close");
	}
}

стало лучше но еще не совершенно, последним вариантом стало

$("div:data(dialog)").dialog("close");

теперь я доволен, а какие еще есть варианты?

Как обычно примера из официального мануала мне не достаточно поэтому начал хачить. Собственно то что мне надо было находиться в низу страницы, а как я его делал я расскажу сейчас.

Основная идея примера из мануала: чтобы на одной и той же разметке можно было сделать табики и сверху и снизу. Это очень хорошая идея но мне явно не подходила. Вкратце табики выглядят так: общий контейнер, в нем сверху UL с закладками, снизу - DIV с контентом. Это верно как для разметки так и для отображения. Для табиков снизу разметка та же, но табики имеют position:absolute и bottom:0 . Казалось бы все должно работать, НО есть одно НО, и это не IE! Это как не странно WebKit. Все размерности в JQuery UI указаны в EM, что бы все одинаково хорошо смотрелось с любым размером текста, так вот при переходе из EM (да в общем и из остальных относительных величин) в PX, WebKit округляет числа в большую сторону, тогда как все остальные в меньшую, или подгоняют. Об этом еще Resig писал в далеком 2008 году. При таком подходе прижатые к низу табики налазят на текст на 1-2PX. Это совершенно не волнует пример в мануале, потому что текст там не имеет бордера и заранее короче на несколько пикселей, так что между ним и прижатыми табами есть зазор. Ради красоты пришлось пожертвовать первоначальной разметкой, перенеся табики под текст. Хотя по моему вообще это не принципиально, потому что я сделал это скриптом, да и вернуть их тоже не проблема.

Вторая проблема это !important. ежупанятна что универсальность в таком большом CSS framework требует перекрывать что-то, что было написано позже, тем что было написано раньше. Тут кроется проблема всего framework. Я свято уверен что классы типа ui-state-[default|hover|active] не должны определять толщину и тип бордера, а только цвет, потому что потом надо городить огороды. В своем маленьком примере я это поправил.

Ну и последние, надо открывать таб по урлу. Как бы самое обычное дело, но предусмотрено в документации только через куки, а если руками указывать то надо знать индекс таба а не скажем его ID. С этой маленькой гадкой проблемой я тоже очень элегантно справился двумя строками кода.

KISS

Тайлы резал вот этим

var a = 1, b = 3;
a = [b, b = a][0];
console.log(a, b);

хз правда сколько при этом выделяется памяти на создание массива.

function MyControl(map) {
	this.map = map;	
	
	this.button = document.createElement('DIV');
	this.button.style.margin = "50px";
	this.button.style.padding = "20px";
	this.button.style.backgroundColor = "#fff";
	this.button.style.fontSize = "25px";
	this.button.style.cursor = "pointer";
	this.button.appendChild(document.createTextNode("THIS IS SPARTAAA!!!"));
	
	this.div = document.createElement('DIV');
	this.div.appendChild(this.button);

	var marker = new google.maps.Marker({
		position : new google.maps.LatLng(37.074301,22.432584)
	});
	
	google.maps.event.addDomListener(this.button, "click", function(e){
		if (marker.getMap()){
			marker.setMap(null); 
		} else {
			marker.setMap(map);
		}
	}); 
}

MyControl.prototype.getDiv = function() {
	return this.div;
};

MyControl.prototype.remove = function() {
	this.div.removeChild(this.button);
	this.div.parentNode.removeChild(this.div);
};

google.maps.event.addDomListener(window, 'load', function(){

    var map = new google.maps.Map(document.getElementById("map"), {
		zoom: 1,
		center: new google.maps.LatLng(0,0),
		mapTypeId: google.maps.MapTypeId.HYBRID,
    });
	
	var myControl = new MyControl(map);
	map.controls[google.maps.ControlPosition.TOP].push(myControl.getDiv());

});

jQuery(document).ready(function(){

	var obj = function(){
		this.initialize.apply(this, arguments);
	}
	obj.prototype = {
		timeout : null,
		initialize : function(){
			$("ul").delegate("li","click",this.onClick.bind(this))
		},
		onClick : function(e){
			clearTimeout(this.timeout);
			this.timeout = setTimeout(function(){
			
				$.ajax({
					url : "/",
					context : this,
					success : onSuccess
				})
			
			}.bind(this))
		},
		onSuccess : function (){
			console.log("my context is:" this);
		}
	}

});

И никаких тебе

var self = this;
setTimeout(function(){
	self.doSomething();
});