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

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


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

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

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

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


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

BRAGA
Юзер

BRAGA - 7 декабря 2017 10:14 -

// 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');

BRAGA
Юзер

BRAGA - 7 декабря 2017 10:26 -

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

BRAGA
Юзер

BRAGA - 7 декабря 2017 10:35 -

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

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

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

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

hostels
Юзер

hostels - 7 декабря 2017 14:53 -

Спасибо за столь развёрнутый ответ, но к сожалению я не смог разобраться как заставить это работать. Может в 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
Юзер

hostels - 7 декабря 2017 14:54 -

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

BRAGA
Юзер

BRAGA - 7 декабря 2017 15:00 -

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

BRAGA
Юзер

BRAGA - 7 декабря 2017 15:09 -

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

BRAGA
Юзер

BRAGA - 7 декабря 2017 15:38 -

Найди файл 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
Юзер

hostels - 7 декабря 2017 15:52 -

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

BRAGA
Юзер

BRAGA - 7 декабря 2017 15:54 -

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх