@vingud

Динамическое добавление скриптов при формировании формы?

Есть конструктор формы, который должен по полученному айди формировать форму заказа услуги.
При формировании формы может динамически добавляться неограниченное количество полей.
Маска ввода для некоторых полей настраивается с помощью скрипта "inputmask.min.js".
Для полей с адресом используются подсказки DaData и подключается скрипт jquery.suggestions.min.js

логика работы следующая: порядок полей и характеристик полей для формы хранятся в бд. По айди получаем этот массив и в цикле формируем html-код и и js-скрипты.
вот для примера:
function getField_Address ($datafield) {	
		$html_text ='
			<div class="row">
				<div class = "col-xs-12 col-md-12">		
					<div class = "form-group required" >
						<label for="'.$datafield['prefix'].'_address" class="control-label">'.$datafield['label'].':</label>
						<input class="form-control" type="text" id="'.$datafield['prefix'].'_address"  name="'.$datafield['prefix'].'_address" placeholder="Введите адрес в свободном формате и выберите подходящий вариант из выпадающего списка" required="required">
					</div>
				</div>			
			</div>			
		';
		$html_js ='
	jQuery("#'.$datafield['prefix'].'_address").suggestions({
        token: "9efba7d511d6c286914ae785748767469a6727ae",
        type: "ADDRESS",
		hint: false,
        // Вызывается, когда пользователь выбирает одну из подсказок 
        onSelect: function(suggestion) {
            console.log(suggestion);
        }
    });		
		';
		return array($html_text, $html_js);	
	};

		$datafield_address = array('ff_type'=> 'address', 'name'=>'_Address', 'value'=>'', 'prefix'=>'realty_'.$datafield['prefix'], 'label'=>'Адрес объекта недвижимости:');
		$html_res = getField_Address($datafield_address);
		$html_text .= $html_res[0];	$html_js .= $html_res[1];


далее $html_text выводится где необходимо, а $html_js нужно вставить в самый низ после подключения всех скриптов и выполнения <?php wp_footer(); ?>. (Руками в своей тестовой странице убрал вызов <?php //get_footer(); ?> и прикрепил весь код из footer.php). И все вроде работает.
Но если вернуться к подвала из шаблона, то мои скрипты ссылающиеся на подключаемые внешние библиотеки вызывают ошибки. Если пропишу подключения скриптов руками до вызова "подвала" то все работает:
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@21.12.0/dist/js/jquery.suggestions.min.js" ></script> 
<script type='text/javascript' src='http://gupski.ru/wp-content/themes/stav_kray/js/jquery.inputmask.min.js?ver=1.1' id='inputmask-js'></script>
<?php echo $html_js; ?>
<?php get_footer(); ?>


Сам самоучка-дилетант. И фундаментального понятия как правильно все это организовать нет. Сайт до меня сопровождался разными людьми и имеется определенная запутанность в подключении скриптов плагинов. Например в footer.php прописана функция $(document).ready(function() в которой приписываются все скрипты которые на сайте, и они загружаются на каждой странице, хотя нужны естественно далеко не везде. Поэтому был бы признателен, если кто-то направит в нужную сторону и подскажет как правильно организовать подключение скриптов в моем случае и вообще как правильно навести порядок.
  • Вопрос задан
  • 20 просмотров
Пригласить эксперта
Ответы на вопрос 2
artzolin
@artzolin Куратор тега WordPress
php, WordPress разработка сайтов zolin.digital
Из вашего текста не понятно в какой момент может быть вызвана функция getField_Address(), если это возможно на хуке wp_enqueue_scripts, то вы можете подключить ваш код с помощью wp_add_inline_script()

add_action( 'wp_enqueue_scripts', function(){

	wp_enqueue_script( 'my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	$html_res = getField_Address($datafield_address);

	// добавим произвольный код
	wp_add_inline_script( 'my_scripts', $html_res[1] );
	
} );


Если возможности нет, то можете просто повесить скрипт на какой-то последний приоритет хука wp_footer
Ответ написан
Комментировать
@vingud Автор вопроса
не понятно в какой момент может быть вызвана функция getField_Address()

есть цикл в котором формируются поля формы. В зависимости от типа поля вызывается соответствующая функция. getField_Address() одна из таких функций. Результаты выполнения функций аккумулируются в $html_text и $html_js. После прохождения цикла в первой переменной получаю текст формы, а во второй все тег в котором собраны все необходимые для работы формы скрипты.

К сожалению в вопросе использования хуков плаваю. Пытаюсь разобраться в данном вопросе..пока больше вопросов, чем ответов :)
1. хук wp_enqueue_scripts я могу вставить в своем шаблоне? (может глупый вопрос, но во всех мануалах он вставляется всегда в function.php... но вот подумалось, а почему я не могу подключить скрипт в шаблоне)
2. у меня все скрипты собираются на лету. В примере я так понял прикрепляется файл '/my_scripts.js', а потом к нему уже прикрепляется произвольный код
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы