Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » jQuery » Как программно назначить значение для доп. поля типа Переключатель 'Да' или 'Нет'?

Как программно назначить значение для доп. поля типа Переключатель 'Да' или 'Нет'?

hostels 06.12.2017 дополнительное поле, переключатель jQuery, Общие вопросы по PHP 1840

вопрос

Подскажите пожалуйста как можно программно при выполнении кода javascript (или PHP, но лучше javascript) назначить чтоб значения доп. поля типа Переключатель 'Да' или 'Нет' сменилось на "включено", если до этого оно было "выключено".

Допустим есть доп. поле proverka, значение которого по-умолчанию "выключено".
Я пытаюсь реализовать, чтоб в админ панели при добавлении новости, когда нажимаем на кнопку "Добавить" (или при редактировании новости когда нажимаем "Сохранить"), осуществлялась проверка на наличие в тексте полной новости определённого слова или фразы, допустим слово "template". Если это слово встречается в тексте, то переключатель должен переключиться в положение "включено", ну а дальше новость уже сохраняется. Как сделать проверку наличия слова/фразы в тексте полной новости я разобрался, осталось понять какой код нужно прописать, чтоб изменилось значение данного доп поля.

Ответа пока нет

10 комментариев

Юзер

177

BRAGA - 2016-12-207 декабря 2017 10:14 - #66647

// Checkbox станет checked, но без визуального сопровождения
$('.switch[name="xfield[proverka]"]').prop('checked', true);

// Checkbox checked со стилями
$('.switch[name="xfield[proverka]"]').prop('checked', true)
									 .siblings('span')
									 .css({
									 	'boxShadow': 'rgb(76, 175, 80) 0px 0px 0px 12px inset',
									 	'borderColor': 'rgb(76, 175, 80)',
									 	'backgroundColor': 'rgb(76, 175, 80)',
									 	'transition': 'border 0.4s, box-shadow 0.4s, background-color 1.2s'
									 })
									 .find('small')
									 .css({
									 	'left': '22px',
									 	'transition': 'background-color 0.4s, left 0.2s',
									 	'backgroundColor': 'rgb(255, 255, 255)'
									 });

// Выключить без стилей
$('.switch[name="xfield[proverka]"]').prop('checked', false);

// Выключить со стилями
$('.switch[name="xfield[proverka]"]').prop('checked', false)
									 .siblings('span')
									 .css({
									 	'boxShadow': 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
									 	'borderColor': 'rgb(223, 223, 223)',
									 	'backgroundColor': 'rgb(255, 255, 255)',
									 	'transition': 'border 0.4s, box-shadow 0.4s'
									 })
									 .find('small')
									 .css({
									 	'left': '0px',
									 	'transition': 'background-color 0.4s, left 0.2s',
									 	'backgroundColor': 'rgb(255, 255, 255)'
									 });

// Проверить включен или выключен checkbox
// возвращает true / false
$('.switch[name="xfield[proverka]"]').is(':checked');

Юзер

177

BRAGA - 2016-12-207 декабря 2017 10:26 - #66648

Но намного лаконичней и приятней будет пользоваться функциями:

Показать / Скрыть текст

// Функция включения checkbox (вставить один раз на странице)
$.fn.enableCheckbox = function() {  
	return $(this).prop('checked', true)
				  .siblings('span')
				  .css({
				  	'boxShadow': 'rgb(76, 175, 80) 0px 0px 0px 12px inset',
				  	'borderColor': 'rgb(76, 175, 80)',
				  	'backgroundColor': 'rgb(76, 175, 80)',
				  	'transition': 'border 0.4s, box-shadow 0.4s, background-color 1.2s'
				  })
				  .find('small')
				  .css({
				  	'left': '22px',
				  	'transition': 'background-color 0.4s, left 0.2s',
				  	'backgroundColor': 'rgb(255, 255, 255)'
				  });
}  

// Функция выключения checkbox (вставить один раз на странице)
$.fn.disableCheckbox = function() {  
	return $(this).prop('checked', false)
				  .siblings('span')
				  .css({
				  	'boxShadow': 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
				  	'borderColor': 'rgb(223, 223, 223)',
				  	'backgroundColor': 'rgb(255, 255, 255)',
				  	'transition': 'border 0.4s, box-shadow 0.4s'
				  })
				  .find('small')
				  .css({
				  	'left': '0px',
				  	'transition': 'background-color 0.4s, left 0.2s',
				  	'backgroundColor': 'rgb(255, 255, 255)'
				  });
}  

// Включить checkbox
$('.switch[name="xfield[proverka]"]').enableCheckbox();

// Выключить checkbox
$('.switch[name="xfield[proverka]"]').disableCheckbox();

Юзер

177

BRAGA - 2016-12-207 декабря 2017 10:35 - #66649

А еще лучше будет использовать одну функцию с двумя boolean параметрами: true, false (false не обязательно указывать, но это повысит читаемость кода)

Функция

$.fn.toggleCheckbox = function(condition) {
	if (condition === true) {
		return $(this).prop('checked', true)
					  .siblings('span')
					  .css({
					  	'boxShadow': 'rgb(76, 175, 80) 0px 0px 0px 12px inset',
					  	'borderColor': 'rgb(76, 175, 80)',
					  	'backgroundColor': 'rgb(76, 175, 80)',
					  	'transition': 'border 0.4s, box-shadow 0.4s, background-color 1.2s'
					  })
					  .find('small')
					  .css({
					  	'left': '22px',
					  	'transition': 'background-color 0.4s, left 0.2s',
					  	'backgroundColor': 'rgb(255, 255, 255)'
					  });
	} else {
		return $(this).prop('checked', false)
					  .siblings('span')
					  .css({
					  	'boxShadow': 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
					  	'borderColor': 'rgb(223, 223, 223)',
					  	'backgroundColor': 'rgb(255, 255, 255)',
					  	'transition': 'border 0.4s, box-shadow 0.4s'
					  })
					  .find('small')
					  .css({
					  	'left': '0px',
					  	'transition': 'background-color 0.4s, left 0.2s',
					  	'backgroundColor': 'rgb(255, 255, 255)'
					  });
	}
}

//Включить
$('.switch[name="xfield[proverka]"]').toggleCheckbox(true);

// Выключить
$('.switch[name="xfield[proverka]"]').toggleCheckbox(false);

Так как это функция, то её можно использовать сколько угодно раз. Вешать нужно именно на checkbox input, а не на Div родителя, например.

Юзер

hostels - 2016-12-207 декабря 2017 14:53 - #66658

Спасибо за столь развёрнутый ответ, но к сожалению я не смог разобраться как заставить это работать. Может в HTML ещё нужно было что-то дописывать, или не разобрался как правильно вклинить это в javascript код, в общем не знаю...

Я сделал следующее: в файле inc/xfields.php я дописал чтоб для доп полей типа чекбокс указывался помимо name ещё и ID: id="x_field_$fieldname"

В итоге код, отвечающий за смену значения этого поля получился такого вида:

function proverka(){
var str = $('#full_story').val();
if(str.indexOf('template') + 1) {
document.getElementById('x_field_proverka').checked = true;
}else{document.getElementById('x_field_proverka').checked = false;}
}

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

Юзер

hostels - 2016-12-207 декабря 2017 14:54 - #66659

можно конечно оставить и без стилей, но с изменением стилей было бы лучше

Юзер

177

BRAGA - 2016-12-207 декабря 2017 15:00 - #66660

Вот полный код скрипта. Если в fullstory будет хотя бы одно слово из строки: Remember, Perc, Dmin, то при загрузке страницы и на лету будет включатся или выключатся чекбокс. Нужно обернуть это в <script> и засунуть в файл типа editnews.php - насчет файла не знаю, нужно найти файл где редактируются новости в админке, код поставить перед </body>

Показать / Скрыть текст

$.fn.toggleCheckbox = function(condition) {
	if (condition === true) {
		return $(this).prop('checked', true)
					  .siblings('span')
					  .css({
					  	'boxShadow': 'rgb(76, 175, 80) 0px 0px 0px 12px inset',
					  	'borderColor': 'rgb(76, 175, 80)',
					  	'backgroundColor': 'rgb(76, 175, 80)',
					  	'transition': 'border 0.4s, box-shadow 0.4s, background-color 1.2s'
					  })
					  .find('small')
					  .css({
					  	'left': '22px',
					  	'transition': 'background-color 0.4s, left 0.2s',
					  	'backgroundColor': 'rgb(255, 255, 255)'
					  });
	} else {
		return $(this).prop('checked', false)
					  .siblings('span')
					  .css({
					  	'boxShadow': 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
					  	'borderColor': 'rgb(223, 223, 223)',
					  	'backgroundColor': 'rgb(255, 255, 255)',
					  	'transition': 'border 0.4s, box-shadow 0.4s'
					  })
					  .find('small')
					  .css({
					  	'left': '0px',
					  	'transition': 'background-color 0.4s, left 0.2s',
					  	'backgroundColor': 'rgb(255, 255, 255)'
					  });
	}
}

var $fullStory = $('.fr-wrapper').eq(1),
	$textArea = $fullStory.find('.fr-element'),
	$checkbox = $('.switch[name="xfield[proverka]"]'),
	word = 'Remember, Perc, Dmin'.toLowerCase(),
	array = word.split(', ');

var checkText = function() {
	var flag = false,
		text = $fullStory.text().toLowerCase();

	for (var i = 0; i < array.length; i++) {
		if (text.includes(' ' + array[i] + ' ') === true) {
			$checkbox.toggleCheckbox(true);
			flag = true;
		}
	}
	if (flag === false) {
		$checkbox.toggleCheckbox(false);
	}
}

checkText();

$textArea.bind('DOMSubtreeModified', function() {
	checkText();
});

Юзер

177

BRAGA - 2016-12-207 декабря 2017 15:09 - #66661

Html код не нужно менять, добавлять свои id тоже, зачем ковырять движек ради такой мелочи. Найти файл "editnews.php" возьми скрипт, оберни его в теги <script></script> и вставь перед </body>.

Юзер

177

BRAGA - 2016-12-207 декабря 2017 15:38 - #66662

Найди файл engine/inc/editnews.php
Найди 1569 строку.
Между

</form>
</div>

HTML;

	echofooter();
}

Вставь этот код:

<script>
	$.fn.toggleCheckbox = function(condition) {
	if (condition === true) {
		return $(this).prop('checked', true)
					  .siblings('span')
					  .css({
					  	'boxShadow': 'rgb(76, 175, 80) 0px 0px 0px 12px inset',
					  	'borderColor': 'rgb(76, 175, 80)',
					  	'backgroundColor': 'rgb(76, 175, 80)',
					  	'transition': 'border 0.4s, box-shadow 0.4s, background-color 1.2s'
					  })
					  .find('small')
					  .css({
					  	'left': '22px',
					  	'transition': 'background-color 0.4s, left 0.2s',
					  	'backgroundColor': 'rgb(255, 255, 255)'
					  });
	} else {
		return $(this).prop('checked', false)
					  .siblings('span')
					  .css({
					  	'boxShadow': 'rgb(223, 223, 223) 0px 0px 0px 0px inset',
					  	'borderColor': 'rgb(223, 223, 223)',
					  	'backgroundColor': 'rgb(255, 255, 255)',
					  	'transition': 'border 0.4s, box-shadow 0.4s'
					  })
					  .find('small')
					  .css({
					  	'left': '0px',
					  	'transition': 'background-color 0.4s, left 0.2s',
					  	'backgroundColor': 'rgb(255, 255, 255)'
					  });
	}
}

$(function() {
	var fullStory = $('.fr-wrapper').eq(1),
		textArea = fullStory.find('.fr-element'),
		checkbox = $('.switch[name="xfield[proverka]"]'),
		word = 'Remember, Perc, Dmin'.toLowerCase(),
		array = word.split(', ');

	function checkText() {
		var flag = false,
			text = fullStory.text().toLowerCase();

		for (var i = 0; i < array.length; i++) {
			if (text.includes(' ' + array[i] + ' ') === true) {
				checkbox.toggleCheckbox(true);
				flag = true;
			}
		}
		if (flag === false) {
			checkbox.toggleCheckbox(false);
		}
	}

	checkText();

	textArea.bind('DOMSubtreeModified', function() {
		checkText();
	});
});
</script>

При необходимости замени слова в переменной `word` и названия доп.поля в переменной `checkbox`.

Юзер

hostels - 2016-12-207 декабря 2017 15:52 - #66663

Я так понимаю это вы привели пример для редактирования новости через сайт. При редактировании в админке данный скрипт у меня не работает. Всё равно спасибо за помощь. В принципе меня устроит вариант, который я сделал сам.

Юзер

177

BRAGA - 2016-12-207 декабря 2017 15:54 - #66664

Нет, это пример для редактирования новостей в админке.