Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2022, 10:31
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 172

Как передать параметр из div вподгружаемый в него контент?
Приветствую!
На странице HTML есть DIVы, в цикле, в которые подгружается свой контент.
У каждого DIV свой параметр data-id.
Это DIV:
<div data-type="load">
	{foreach name='config_list' item='item' key="key"}
	<div data-type="config" data-id="{$key+1}" style="display:none">
		{$item.config|raw}
	</div>
	{/foreach}
</div>

Это контент:
<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1').validate({
				//
			});			
		})
	</script>

В итоге загрузки контента в блок DIV получается так:
<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1').validate({
				//
			});			
		})
	</script>	
</div>

Нужно передать значение параметра data-id из DIV в подгружаемый контент, чтобы я мог значение параметра data-id применить в подгружаемом контенте, а именно для персонализации каждой формы и её валидации.
Примерно так:
<div data-type="config" data-id="1" style="display: block;">
	<form class="form-h5_1_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_1').validate({
				//
			});			
		})
	</script>	
</div>
<div data-type="config" data-id="2" style="display: block;">
	<form class="form-h5_1_2" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_2').validate({
				//
			});			
		})
	</script>	
</div>
<div data-type="config" data-id="3" style="display: block;">
	<form class="form-h5_1_3" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_3').validate({
				//
			});			
		})
	</script>	
</div>
<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1_4" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
			$('.form-h5_1_4').validate({
				//
			});			
		})
	</script>	
</div>


Заранее спасибо откликнувшимся!

Последний раз редактировалось Vaska, 20.09.2022 в 11:12.
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2022, 11:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,609

Vaska,
из поставленной задачи data-id ненужный атрибут.

$(function(){
            let form = $('.form-h5_1:first');
           //let data_id = form.parent().data('id');
           // console.log(data_id);
            form.removeClass('form-h5_1');
			form.validate({
				//
			});
		})
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2022, 12:13
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 172

Сообщение от рони Посмотреть сообщение
Vaska,
из поставленной задачи data-id ненужный атрибут.

$(function(){
            let form = $('.form-h5_1:first');
           //let data_id = form.parent().data('id');
           // console.log(data_id);
            form.removeClass('form-h5_1');
			form.validate({
				//
			});
		})
Я вставил этот код в контент, но он только удаляет класс из тега form и больше ничего не происходит.
Получается так
<form class="" onchange="changeForm($(this),1)">

Валидация работает, но другие скрипты не работают из за удаления класса из формы.
В контенте есть ещё код, который инициализирует другие скрипты и тоже использует класс:
<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		// Валидация class через механизм (в реальном времени)
		window.validation.init({
			container: '.form-h5_1'
		});
		
		// Ручная валидация class (при нажатии кнопки Сохранить)
		$('.save-button').on('click', function () {
			window.validation.isValid({ container: '.form-h5_1' })
			$('.form-h5_1').valid()
		});
		
		$(function(){

				let form = $('.form-h5_1:first');
				//let data_id = form.parent().data('id');
				// console.log(data_id);
				form.removeClass('form-h5_1');
				form.validate({
					//
				});
					
		})
	</script>	
</div>

Я ориентировался на то, что у меня будет переменная, которую я повстававляю к классам в коде, типа этого '.form-h5_1_'+data_id+''.
А ваш вариант я не знаю как применить.
Можете поправить, чтобы работало с учётом выше указанного кода?

Последний раз редактировалось Vaska, 20.09.2022 в 12:21.
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2022, 12:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,609

Vaska,
вариант был для предоставленного выше кода. раз вам удобнее с data_id, то делайте как вам удобно.
пост #3 я не осилил.
но как-то так
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>
<div data-type="config" data-id="4" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
		$(function(){
            let form = $('.form-h5_1:first');
            let data_id = form.parent().data('id');
            let cls = `form-h5_1_${data_id}`
            form.removeClass('form-h5_1').addClass(cls);

		   /*	form.validate({
				//
			});*/
		})
	</script>
</div>
<div data-type="config" data-id="7" style="display: block;">
	<form class="form-h5_1" onchange="changeForm($(this),1)" novalidate="novalidate">
		<input type="hidden" name="model_id" value="1">
	</form>
	<script>
	  	$(function(){
            let form = $('.form-h5_1:first');
            let data_id = form.parent().data('id');
            let cls = `form-h5_1_${data_id}`
            form.removeClass('form-h5_1').addClass(cls);

		   /*	form.validate({
				//
			});*/
		})
	</script>
</div>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 20.09.2022, 12:58
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 172

рони,
Да, это то, что надо!
Всё работает.
Большое спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
как передать параметр javascript в model (asp.net mvc4 razor) Siend Общие вопросы Javascript 0 09.01.2015 14:30
Как получить value у динамичесокго div при нажатии на него? tarasdj Элементы интерфейса 7 04.12.2014 11:06
Передать параметр в div kalina jQuery 1 06.06.2011 08:09
Как из функции вызвать другую функцию и правильно передать ей параметр Alexd Общие вопросы Javascript 3 06.05.2011 03:42