Как разделить вызов функции для разных div?

Question

[Royorso]

Есть страница.
На ней есть ссылка:

<a href="#tabs_set_order" rel="bookmark" class="order_base"><div class="adw-button">Заказать в кредит</div></a>

которая вызывает форму заявки с помощью вот такого скрипта:

<script type="text/javascript">
		jQuery(document).ready(function() {		
			var orderTitle = 'Проект «<?php the_title(); ?>»';
			jQuery('#credit-project-name').val(orderTitle);
			document.getElementById("input_proj_name").innerHTML = orderTitle;
			jQuery("title_order_send").val(orderTitle);
			
			jQuery('.order_base').magnificPopup({
				type: 'inline',
				preloader: false,
				focus: '#order_name',
				tClose: 'Закрыть (Esc)',
				tLoading: 'Загрузка...',

				// When elemened is focused, some mobile browsers in some cases zoom in
				// It looks not nice, so we disable it:
				callbacks: {
					beforeOpen: function() {
						if(jQuery(window).width() < 700) {
							this.st.focus = false;
						} else {
							this.st.focus = '#order_name';
						}
					}
				}
			});
		});
	</script>

Также на этой странице (в левом sidebar) есть ссылка:

<a href="#tabs_set_order" rel="bookmark" class="order_calc" id="calc-button">
	<div class="calc-button">Калькулятор<br>проекта<img src="/wp-content/uploads/2015/03/calc_house_80px.png"></div>
</a>

которая вызывает другую форму, но с использованием практически того же скрипта:

<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery('.order_calc').magnificPopup({
				type: 'inline',
				preloader: false,
				focus: '#order_name',
				tClose: 'Закрыть (Esc)',
				tLoading: 'Загрузка...',

				// When elemened is focused, some mobile browsers in some cases zoom in
				// It looks not nice, so we disable it:
				callbacks: {
					beforeOpen: function() {
						if(jQuery(window).width() < 700) {
							this.st.focus = false;
						} else {
							this.st.focus = '#order_name';
						}
					}
				}
			});
		});
	</script>

Разница только в селекторе: jQuery('.order_base') и jQuery('.order_calc') соответственно.

Проблема: когда на странице только ссылка из левого сайдбара (.order_calc), то форма вызывается, всё в порядке, но когда две ссылки на одной странице (как по линку в начале сообщения), то форма по ссылке из левого sidebar перестаёт работать.

Вопрос: как разделить эти скрипты, чтобы вызывались две разных формы?

P.S.: js вот этот.

Answer 1

[Егор Федосенко]

Вы можете только 1 раз использовать id, это уникальный идентификатор. Селектор соответственно используйте различные id.

Comments

[Royorso]

Вы про этот? #tabs_set_order

[Royorso]

Да, там оказался скрытый div, который содержал вызов формы. Не сразу его заметил и поэтому не понимал проблему с id="tabs_set_order". Когда задал разные id на эти формы и, соответственно, вызов разных форм по разным id, то всё сразу заработало. Спасибо за наводку

Answer 2

[Rsa97]

То есть на странице два раза устанавливается обработчик jQuery(document).ready() ? Тогда при установке обработчика во второй раз предыдущий будет потерян.

Comments

[65536]

jsfiddle.net/6c22g430

[Rsa97]

65536: Callback-функция, указанная в $(document).ready() вызывается после создания DOM-модели страницы, а если модель уже создана, то функция вызывается сразу.

Таким образом если последовательность будет такой:
- выполнился первый JS (установил обработчик .ready);
- выполнился второй JS (переписал обработчик .ready);
- закончено создание DOM-модели,
то вызовется только последний обработчик.

Если же сменить последовательность например на
- выполнился первый JS (установил обработчик .ready);
- закончено создание DOM-модели,
- выполнился второй JS (переписал обработчик .ready);
то вызовутся оба обработчика.

У топикстартера загрузка идёт одним запросом в следующем порядке:
- HTML-фрагмент;
- первый JS-скрипт;
- HTML-фрагмент;
- второй JS-скрипт;
- HTML-фрагмент.
Таким образом к моменту второго вызова .ready() DOM-модель ещё не сформирована и первый обработчик не вызывается, а просто переписывается вторым.

[Royorso]

Rsa97: Спасибо, буду пробовать. Как что-то получится - напишу.

[Royorso]

Rsa97: а если использовать не .ready(), а .click() - это поможет или ситуация не изменится?

[Rsa97]

Royorso: Лучше всего - вынести все JS в один отдельный статический файл, тогда всё можно вызывать в одном .ready.
Можно извратиться, добавлять callback-функции в массив, а в конце документа добавить вызов .ready() с функцией, проходящей по массиву и вызывающей все callback-и.

[65536]

Rsa97: да, похоже на то. gyazo.com/7e452989341d97ecf371a8bcb0719957 если дом не готов, то запускает последнюю версию самой себя в следующем потоке или как это называется то что таймаутом откладывается.

ну вообще интуитивно понятно, что документ риди не самая подходящая функция для этого)) нужно чтобы каждый фрагмент хтмл сопровождался своим обработчиком, который вызывался вместе с его загрузкой

[Rsa97]

65536:
var onReady = [];
var onReadyIdx = 0;
HTML-фрагмент 1
onReady[onReadyIdx++] = function callback1(){};
HTML-фрагмент 2
onReady[onReadyIdx++] = function callback2(){};
HTML-фрагмент 3
$(document).ready(function() {
var i;
for (i = 0; i < onReadyIdx)
onReady[i]();
});
jsfiddle.net/qr63nw5h

[65536]

Rsa97: да, так надежно, приму на заметку) но ни разу за всю историю рука не поднялась документ риди использовать

[65536]

65536: таким образом использовать в смысле, с подобными подгрузками

[Rsa97]

65536: Только вызов .ready() должен быть в конце документа, после формирования всего массива callback'ов

[65536]

Rsa97: а он, кстати, вообще нужен? если скрипт идет следом за хтмл, то и без риди он отрабатывает нормально jsfiddle.net/qr63nw5h/1 не уверен в надежности правда

[Rsa97]

65536: DOM на момент выполнения скрипта может ещё не быть готова, соответственно к не созданным ещё в DOM элементам не будут прописаны свойства и callback'и

[65536]

Rsa97: скорей да. но это вообще изначально костылёвый способ. лучше всего грузить отдельно хтмл и отдельно джс и запускать джс после вставки в хтмл конкретного куска каким-то централизованным способом. вот можете в консоли посмотреть что происходит cc.cc10238.tmweb.ru/test

cc.cc10238.tmweb.ru/js/_common/main.js process_response() обрабатывает приём

[Royorso]

65536: Rsa97: Решение скрывалось в одном id на две разных формы. Да, там оказался скрытый div, который содержал вызов формы. Не сразу его заметил и поэтому не понимал проблему с id="tabs_set_order". Когда задал разные id на эти формы и, соответственно, вызов разных форм по разным id, то всё сразу заработало. Спасибо за наводку Егор Федосенко

Да, это лишь заплатка, и, наверно, правильнее было бы всё равно переписать сам скрипт в указанной вами последовательности, но пока обойдусь малой кровью, а ваше решение использую в другом проекте. Спасибо за помощь!