Редактирование данных прямо в таблице
 

Здравствуйте!
Здесь Тест находится тестовая страница. Таблица с пользователями. Нужно, чтобы при нажатии на любое значение из колонки Город вместо этого значения появлялся select с возможными вариантами.

В принципе, это уже сделано, с одним косячком. Это появление происходит со второго клика. То есть первый раз нажимаем - ничего не происходит. Второй раз - нормально появляется. Подскажите пожалуйста, почему так происходит?

Вот код при нажатии на элемент колонки Город:

$('div.edit-select').click(function(){
	if ($('#editbox').length>0) {
		return false;
	} 
	$('.ajax').html($('.ajax select').val());
	//удаляем все классы ajax
	$('.ajax').removeClass('ajax');
	//Нажатой ячейке присваиваем класс ajax
	$(this).addClass('ajax');
	var selectVal = $(this).text();
	var check = "select-val";
	$.post("http://test.panfproject.ru/ajax.php",
			{
				check: check,
				selectVal: selectVal
			},
			function(data) {
				//var data1;
				data1 = data;
				return data1;
			}
		);
	$(this).html(data1);
	//внутри ячейки создаём input и вставляем текст из ячейки в него
	
	//устанавливаем фокус на созданном элементе
	$('#editbox').focus();
});

Переменная data возвращает html с выводом select с нужными элементами-городами в результате ajax запроса.

Буду благодарен всем откликнувшимся...

В общем-то ничем практическим я тебе не помогу, но был тут на днях у меня проект с похожей задумкой. Так вот я сделал с помощью Backgrid, специальный компонент для Backbone.
Это я к чему? Ищи компоненты, плагины-не надо изобретать, а потом дорабатывать вещи которые до тебя уже использовали

Ты в консольку загляни и поймешь. F12

Нее) Хочется самому разобраться)) Я и так взял готовое решение, и дорабатываю под себя)

krasovsky, блин, всё время забываю про консольку....
Вот что пишет после первого клика:

Uncaught ReferenceError: data1 is not defined show.js:46(anonymous function) show.js:46jQuery.event.dispatch jquery-1.8.3.js:3058elemData.handle.eventHandle

С этой data с самого начала были проблемы... Нужно было как-то эту переменную вытащить изнутри конструкции $.post, чтобы использовать там... Если сделать Var data, ошибок нету, но и эта переменная не будет работать вне конструкции $.post.

Есть какие-нибудь мысли, господа? :thanks:

Короче, методом проб и ошибок, получилось вот так:

$('div.edit-select').click(function(){
	if ($('#editbox').length>0) {
		return false;
	} 
	$('.ajax').html($('.ajax select').val());
	//удаляем все классы ajax
	$('.ajax').removeClass('ajax');
	//Нажатой ячейке присваиваем класс ajax
	$(this).addClass('ajax');
	var selectVal = $(this).text();
	var check = "select-val";

        var new = $(this);

	$.post("http://test.panfproject.ru/ajax.php",
			{
				check: check,
				selectVal: selectVal
			},
			function(data) {
				new.html(data);
			}
		);
	
	//внутри ячейки создаём input и вставляем текст из ячейки в него
	
	//устанавливаем фокус на созданном элементе
	$('#editbox').focus();
});

То есть через переменную new. Объявили ее вне конструкции $.post, и затем использовали внутри... Как-то так.. Всем спасибо!))