Как переделать Ajax запрос, чтоб результаты были выведены в определеном классе ячейки?

Question

[Олег Галимов]

Доброе время суток.
У меня рабочий скрипт по проверке доменов на занятость.
Как переделать Ajax запрос, чтоб результаты были выведены в определенном классе ячейки?
вот кусок скрипта

var index;
	var sld;
	var tld;
	
	var states = [
		['занят', 'red'],
		['свободен', 'green'],
		['неправильный формат', 'orange'],
		['ошибка запроса', 'orangered'],
		['ошибка сервера', 'crimson'],
		['ошибка сети', 'maroon']
	];
	
	$check.click(function(){
		$result.empty();
		index = 0;
		tld = [];
		sld = $.trim($sld.val());
		$tld.filter(':checked').each(function(){
			tld.push($.trim(this.value));
		});
		if (sld && tld.length) {
			$check.prop('disabled', true);
			$loading.show(300);
			ajax();
		}
	});
	
	function ajax() {
		$.ajax({
			type: 'POST',
			url:  'checkdomain.php',
			data: { sld: sld, tld: tld[index] },
			dataType: 'json',
			beforeSend: function(){
			},
			success: function(data){
				switch (data.status) {
					case '0':
						state = 0; // занят
						break;
					case '1':
						state = 1; // свободен
						break;
					case '2':
						state = 2; // неправильный формат
						break;
					case '3':
						state = 3; // ошибка запроса
						break;
					default:
						state = 4; // ошибка сервера
				}
			},
			error: function(){
				state = 5; // ошибка сети
			},
			complete: function() {
				var html  = '<tr style="display:none;">';
					html += '<td style="color:gray">' + sld + '.' + tld[index] + '</td>';
					html += '<td style="color:' + states[state][1] + '">' + states[state][0] + '</td>';
					html += '</tr>';
				$(html).appendTo($result).show(300);
				if (tld[++index]) {
					ajax();
				} else {
					$loading.hide(300);
					$check.prop('disabled', false);
				}
			}
		});

<div class="table_cell-1">
	<p><span class="doman_name"><input type="checkbox" name="TLDomain" value="ru" id="11"/>.ru</span></p>
		<p itemprop="price">100 RUB</p>
		<div>чтоб результаты были тут кнопка купить или картинка занят</div>
</div>
<div class="table_cell-1">
	<p><span class="doman_name"><input type="checkbox" name="TLDomain" value="рф" id="12"/>.рф</span></p>
	<p itemprop="price">100 RUB</p>
		<div>чтоб результаты были тут кнопка купить или картинка занят</div>
</div>

Помогите разобраться с скриптом.
Заранее благодарю за ответы.

Answer 1

[Ростислав Игнатенко]

Во первых, этому

<div>чтоб результаты были тут кнопка купить или картинка занят</div>

нужно задать класс.
Допустим

<div class="resp">чтоб результаты были тут кнопка купить или картинка занят</div>

В самом case делайте действие.
Рассмотрим если нам вернулось 1.

case '1':
    state = 1; // свободен
    $('.resp').textContent('Данный домен свободен');
    break;

Если вам нужно вставлять картинку, то просто переделайте мою строку на строку добавления картинки.

Comments

[Олег Галимов]

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

complete: function() {
				var html  = '<tr style="display:none;">';
					html += '<td style="color:gray">' + sld + '.' + tld[index] + '</td>';
					html += '<td style="color:' + states[state][1] + '">' + states[state][0] + '</td>';
					html += '</tr>';
				$(html).appendTo($result).show(300);
				if (tld[++index]) {
					ajax();
				} else {
					$loading.hide(300);
					$check.prop('disabled', false);
				}
			}

[Ростислав Игнатенко]

olegalimov: Ну скрипт только выводит результат. Проверка у вас осуществляется в php обработчике, так что если и будет путать - то проблема в обработчике.
По поводу complete я ничего не могу вам сказать, я всегда использовал success для динамического изменения контента.

[Олег Галимов]

Как добавить картинку
$('.resp').imgcontent а дальше что писать
или вывод через css?
как лучше сделать?

[Ростислав Игнатенко]

olegalimov: Я бы сделал следующие.
Создать классы в css, которые добавляют картинку, например

.free(
width:50px;
height:50px;//поставьте свою высоту и ширину
background: url(/путь к картинке/картинка.png) no-repeat center;
background-size: cover; //растягиваем картинку под указанные выше размеры с сохранением пропорций.
)

.//другие классы

А потом с помощью jQuery добавляете класс вашему блоку, где будет выводиться картинка.

$('.resp').removeClass('другие классы');//здесь удалите классы от старых проверок 
$('.resp').addClass('free');

[Олег Галимов]

Все понятно, Большое спасибо.

[Олег Галимов]

Доброе время суток.
Я все написал вот что получилось

success: function(data){
				switch (data.status) {
					case '0':
						state = 0; // занят
						$('.resp').removeClass('busy free_domain wrong_format request_error server_error error');//здесь удалите классы от старых проверок 
						$('.resp').addClass('busy');
						break;
					case '1':
						state = 1; // свободен
						$('.resp').removeClass('busy free_domain wrong_format request_error server_error error');//здесь удалите классы от старых проверок 
						$('.resp').addClass('free_domain');
						$('.resp').textContent('Данный домен свободен');
						break;
					case '2':
						state = 2; // неправильный формат
						$('.resp').removeClass('busy free_domain wrong_format request_error server_error error');//здесь удалите классы от старых проверок 
						$('.resp').addClass('wrong_format');
						break;
					case '3':
						state = 3; // ошибка запроса
						$('.resp').removeClass('busy free_domain wrong_format request_error server_error error');//здесь удалите классы от старых проверок 
						$('.resp').addClass('request_error');
						break;
					default:
						state = 4; // ошибка сервера
						$('.resp').removeClass('busy free_domain wrong_format request_error server_error error');//здесь удалите классы от старых проверок 
						$('.resp').addClass('server_error');
						}
			},
			error: function(){
				state = 5; // ошибка сети
						$('.resp').removeClass('busy free_domain wrong_format request_error server_error error');//здесь удалите классы от старых проверок 
						$('.resp').addClass('error');
				},

проблема в том что скрипт проверяет только первый домен и результаты ставит во все домен зоны одинаково. как это исправить?
может прописывать стили в секции

var states = [
		['занят', 'red'],
		['свободен', 'green'],
		['неправильный формат', 'orange'],
		['ошибка запроса', 'orangered'],
		['ошибка сервера', 'crimson'],
		['ошибка сети', 'maroon']
	];

С нетерпением жду ответа