Перейти к содержимому



Вопрос по JS и jQuery - теория и практика

#1

Поделиться сообщением #1



ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 477 сообщений
  • Репутация: 647
0

Отправлено 13 Март 2017 - 18:30

Господа Гуру, помогите советом ламеру =)

 

Давно уж созрел один вопрос, состоящий из двух частей - теоретической и практической. Очень надеюсь получить ответы...

 

Теоретическая часть: насколько я понимаю, jQuery написана на JavaScript? или не так? Если так, то jQ должна по идее спокойно и корректно работать с "вкраплениями" javascript... Нэ?

Теоретический вопрос - так, больше для себя, для самообразования, а вытекает он из практической части...

 

Практическая часть:

Предыстория.

Когда-то очень давно, больше 10 лет назад, начал осваивать "на коленках" (по бумажным книжкам) javascript. В результате освоения появились у меня на сайте автоматизированныерасчеты, избавляющие пользователя от путаницы с безумными арифметическими действами со строками и колонками таблиц, попросту говоря "калькуляторы".

С момента создания и по сей день "калькуляторы" надежно и исправно работают, полюбились клиентам и высвободили массу времени на пустую переписку с расчетом заказов.

 

The problem is...

В прошлом году я мал-мала познакомился и перешел на jQ, с его помощью в какой-то момент решил улучшить юзабилити и реализовать по запросу посетителя отправку результатов расчета на указанную почту.

Посидел пару-тройку ночей и сделал. Тоже всё работает, но как-то избирательно - и это меня уже гложет достаточное количество времени.

 

Сам "калькулятор я не трогал, оставив его на JS, а отправку результатов сделал на jQuery, через ajax.

 

Выжимкки кода ниже, структура работы "калькуляторов" и процессы следующие:

1. Исходные данные указываются через поля формы.

2. Кнопка submit в форме отсутствует - на все input-ы навешены onChange, запускающие функцию расчета.

3. Результат расчета выдается посетителю посредством замены содержимого <span id="Total">...</span> и <span id="OnePcs">...</span> (общая сумма заказа и стоимость одного изделия соответственно)

здесь работает всё чётко

 

Для реализации отправки результатов на мыло:

1. Добавлена кнопка отправки по клику на которую в попап-окне посетитель указывает свой мэйл-адрес

2. Производится валидация адреса, если она успешная, то производится передача ajax-ом данных формы скрипту который производит формирование и отправку письма с расчетом на мыло посетителя.

3. Для того чтоб отправить результаты расчета в форму добавлены "скрытые" input-ы, которым калькулятором присваиваются результаты расчета при каждом обращении (изменении данных) к функции расчета

 

Выжимки из кода (чтоб не делать лишних простыней всё ненужное /*работающее*/ выброшено, оставлено только существенное):

HTML:

<form id='counting' name='counting' action='#' method='post'>

<!-- добавленные для отправки данных по e-mail input-ы -->
	<input id='Total' name='Total' type='hidden'>
	<input id='OnePcs' name='OnePcs' type='hidden'>
	<input id='MailToSend' name='MailToSend' type='hidden'>

<!-- поля ввода данных для расчета -->
	<p>Тираж: <input size='6' type='text' value='1' id='Quantity' name='Quantity' onKeyUp='CheckCorrectQuantity()'>&nbsp;шт.</p>
	<p>Вид и производитель изделий:<br>
		<select id='TShirts' onChange='ReCount()'>
			<!-- Ряд <option> со своими значениями -->
		</select>
	</p>
	<p>Индивидуальная упаковка:&nbsp;<input type='CheckBox' Checked id='IsPacked' name='IsPacked' onClick='ReCount()'></p>
<!-- Другие аналогичные input-ы и select-ы -->

<!-- Вывод результатов расчета -->
	<p>Стоимость печати тиража:&nbsp;<span id='TotalRub'></span>&nbsp;руб.***</p>
	<p>Цена одного изделия:&nbsp;<span id='OnePcsRub'></span>&nbsp;руб.*</p>

</form> <!-- Конец формы -->

JavaScript расчетной части:

// функция проверки корректности тиража
function CheckCorrectQuantity() {
// бла-бла-бла
	if(lCorrect){ReCount();}
}

// сам калькулятор
function ReCount() {
var ... // загоняем значения полей в переменные и другие данные для расчета

////////////////////////
// сам скрипт расчета //
////////////////////////

nTotalSum=... // итоговая сумма
nOneCost=nTotalSum/Quantity.value; // стоимость единицы
// выводим пользователю результаты расчета
document.all("TotalRub").innerHTML=nTotalSum;
document.all("OnePcsRub").innerHTML=nOneCost;

//Задаем невидимые переменные для отправки результатов расчета
Total.value=nTotalSum;
OnePcs.value=StringRoundnOneCost;
}

Кусок jQuery-кода модального окна и отправки данных обработчику:

// some code

// вывод модального окна для задания адреса мыла через плагин FancyBox
	$('.modalSend').fancybox({title:''});
	$('#senddata').submit(function(){return false;});
	$('#countsend').on('click',function(){
		var sendemailval=$('#sendemail').val();
		var sendmailvalid=validateEmail(sendemailval); // ранее описанная функция проверки валидности введенного мыла
		if(sendmailvalid==false){$('#sendemail').addClass('error');}else if(sendmailvalid==true){$('#sendemail').removeClass('error');}
		if(sendmailvalid==true){
			$('#MailToSend').val(sendemailval); // ВАЖНО!!! Заносим e-mail в скрытый input формы с данными
			$('#countsend').text('...отправка...').toggleClass('pButton'); // манипуляции с кнопкой модального окна
			$.ajax({ // отправляем данные формы скрипту-обработчику, который высылает письмо по указанному адресу
				type:'POST',
				url:'/include/ajax/get_count.php',
				data:$('#counting').serialize(),
				success:function(data){
					if(data=='true'){ // при успешной отправке письма сообщаем посетителю и закрываем модальное окно
						$('#sendme').fadeOut('fast',function(){
							$(this).before('<p>Расчет отправлен по указанному адресу электронной почты</p>');
							$('#countsend').text('Отправить расчет');
							$('#countsend').toggleClass('pButton');
							setTimeout('$.fancybox.close()',2000);
						});
					}
				}
			});
		}
	});

// some code

Скрипт обработчик полученных данных из формы не привожу (не мусорить моск), отлажен, работает чётко...

 

А вот теперь суть проблемы!!!

Всё гладко, отлажено, проверено, но срабатывает не всегда!!!

Точнее всегда срабатывает, но иногда - частично!!!  :huh:

 

В некоторых случаях в письмах отправляемых посетителю с расчетами отсутствуют как раз самые важные переменные - стоимости (Total и OnePcs). Все другие заполненные параметры - отправляются (они прописываются в письме).

Знаю об этом, потому что скрипт параллельно с отправкой письма пользователю еще присылает и мне копию произведенного расчета  :unsure:

Сначала думал что проблема в присвоении скрытых переменных на JS - посмотрел через инструменты веб-разработчика: нет, всё чётко - скрытым полям значения присваиваются.

Было подозрение что скрытые поля не передаются ajax-ом скритпу-обработчику: тоже не так - люди-то письма получают (только без стоимости), а е-мэйл-адрес обработчик получает из такого же скрытого input-а  :wacko:

 

Понимая что разница в том, что значение input-у присваивается разными вариантами (стоимость-js, мыло-jQ) у меня закралась мысль что может у посетителя отключен js... В этой связи и возникла "теоретическая" часть вопроса... Ведь если jQuery работает только "в связке" с JS, то тогда и сам сервис отправки почты не должен работать... Весь моск себе сломал... :angry:

 

А самое парадоксальное (барабанная дробь!!!) что когда я получаю дубль такого письма посетителю (в котором отсутствуют цены), по своей копии письма, я прямо на сайте указываю все данные заполненные пользователем, получаю расчет, нажимаю "отправить на почту", указываю мыло пользователя, тискаю "отправить" и... Посетителю (и мне копия) прилетает письмо правильного содержания, включая цифры стоимости!!! ЧТО ЭТО??? И как это может быть???

 

Вот такое вот "кино, вино и домино"... У кого-нибудь есть на этот счет мысли или предположения? Поделитесь, плиззззз...  :rolleyes:


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Расчет по формуле на JavaScript
  2. Помогите со стилями плагина jQuery
  3. Слетает jQuery-карусель в IE - ActiveX
  4. Калькулятор на Javascript
  5. Вопрос к асам JS

#2

Поделиться сообщением #2



ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 477 сообщений
  • Репутация: 647

Отправлено 13 Март 2017 - 18:48

у меня закралась мысль что может у посетителя отключен js
Отследил через Вебвизор одно такое сегодняшнее посещение - у посетителя присутствует JS: видно что калькулятор считает, а он на 100% javascript-е...  :wacko:
  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3

Поделиться сообщением #3



Ixman

Ixman
  • Пользователь PRO
  • 2 671 сообщений
  • Репутация: 641

Отправлено 13 Март 2017 - 19:26

@ShowPrint, jQuery по сути это и есть javascript, только он заточен для более удобной работы. То есть цепляешь библиотеку jQuery и лишней писанины на js нет. Так-то это плохо, но как любой фреймворк даёт кучу свободного времени. Работают вместе с чистым js на ура, никаких проблем не замечал.

 

Если в браузере отключен js, то и jQuery тут не поможет. Всего скорее где-то, при каких-то условиях происходит сбой. Виной этому может быть старый браузер или ещё какие-либо варианты.

 

Я бы порекомендовал пройтись каким-нибудь заумным валидатором js проверить твой код, нет ли каких-то спорных функций или способов написания кода. Также отследить с каких браузеров приходят полупустые письма.


  • 0


#4

Поделиться сообщением #4



ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 477 сообщений
  • Репутация: 647

Отправлено 13 Март 2017 - 20:14

То есть цепляешь библиотеку jQuery и лишней писанины на js нет. Так-то это плохо, но как любой фреймворк даёт кучу свободного времени. Работают вместе с чистым js на ура, никаких проблем не замечал.

Не вдаваясь в глубинные познания я именно так и думал... Открывал код jQ в текстовом редакторе и решил что он сам написан на JS... =)

 

при каких-то условиях происходит сбой

Вот и ломаю голову - где он может быть... )))

 

Не-заумный валидатор сообщил что всё хорошо и код рабочий.

Untitled-1.png

Заумный валидатор выдал "простыню" с двумя вариантами ошибок в большом числе:

а) использование == вместо === и != вместо !==

б) использование не описанных переменных (типа Quantity.value - пишет: Quantity - не определено)

 

отследить с каких браузеров приходят полупустые письма

Ну они не то чтоб полупустые - с отсутствием двух, но самых важных полей )))

 

Сегодняшний заход вычислил: 11-осёл на 7-й винде

Более ранние случаи сейчас не представляется возможности отследить - не так часто пользователи юзают этот сервис, не вычислить. Будут еще - посмотрю...

 

Пока (для наблюдашек) в одном из калькуляторов сделал присвоение значения "попадающим" скрытым input-ам через jQ - буду наблюдать... Сейчас еще поправлю код относительно === и !== 

 

Была грешная мысль переписать калькуляторы с JS на jQ, но как-то думал что

Так-то это плохо

и раз уж написан и отлажен на JS, то это больше по феншую...

 

PS. Спасибо за участие!


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5

Поделиться сообщением #5



Ixman

Ixman
  • Пользователь PRO
  • 2 671 сообщений
  • Репутация: 641

Отправлено 13 Март 2017 - 20:50

Всего скорее беда с браузерами линейки IE. Я недавно сам бился с этими ослами. Они как-то по своему интерпретируют js код, точнее некоторый стиль написания и некоторые функции попросту не поддерживают. В том числе и 11 осёл. А вот EDGE в 10 окне уже норм обрабатывает. И ни один справочник, из тех что я смотрел, не указал мне, что могут быть проблемы. У них на примерах так и было, как я делал, а осел упрямился коротенькому коду. В общем пришлось сделать код длиннее, по ослиному феншую, чтобы не упрямился. В общем ужасный оконный арбузер 14.gif


  • 1


#6

Поделиться сообщением #6



ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 477 сообщений
  • Репутация: 647

Отправлено 13 Март 2017 - 20:52

@Ixman, спасибо за эзотерический пинок:

отследить с каких браузеров приходят полупустые письма
Оказалось что у меня тоже стоит вин7 с 11-м ослом - и у меня не работает )))))

 

Ваще скрипт не работает: по ходу он не понимает что Quantity.value относится к <input id="Quantity">, матерится что 

"Quantity" не определено

 

и походу вообще прерывает выполнение скрипта...

 

И это не смотря на то, что у меня все скрипты обёрнуты в

$(document).ready(function(){

    // скрипты

}

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

<input size='6' type='text' value='1' id='Quantity' name='Quantity' onKeyUp='CheckCorrectQuantity()'>

должен быть схаван на 100%

 

Вот же он ОСЁЛ!!! =)

 

Понятно что есть с чем разбираться... Будем мочить ослов!!!  :lol:


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7

Поделиться сообщением #7



Ixman

Ixman
  • Пользователь PRO
  • 2 671 сообщений
  • Репутация: 641

Отправлено 13 Март 2017 - 20:55

@ShowPrint, думаю уже дальше решишь проблему, как и я. Нужно всего лишь код подстроить под IE


  • 0


#8

Поделиться сообщением #8



ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 477 сообщений
  • Репутация: 647

Отправлено 13 Март 2017 - 21:23

Нужно всего лишь код подстроить под IE

Надеюсь - главное понятно где проблема, а решение найти всегда можно =)

 

Первое что приходит в голову - переписать калькуляторы на jQ, так как я не понимаю как можно по другому бороться с ослом, который не понимает кода "идентификатор.value"

 

Нашел еще вариант решения: попробовал в заумном валидаторе поменять

Quantity.value 

на

document.getElementById('Quantity').value

Ошибка пропадает... И ослу этот вариант по ходу подходит...

 

Долбанный осёл!!! Обеспечил мне веселую ночьку... Переправить все калькуляторы и еще проверить все остальные JS - до утра работы хватит...

 

Нет худа без добра - зато знаю теперь что JS-код нудно проверять не только на работоспособность, но и на валидность  :D

 

UPD:

Кстати, нашел еще заумный (правильный) валидатор JS - он еще много что делает, и не только с JS, еще и жмет css, js и т.д. и ещё много всякой полезности. С остальным пока не разбирался, не до того, на досуге посмотрю...

Внимание
Чтобы увидеть этот текст Вам необходимо авторизоваться


Сообщение отредактировал ShowPrint: 13 Март 2017 - 21:32

  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#9

Поделиться сообщением #9



ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 477 сообщений
  • Репутация: 647

Отправлено 14 Март 2017 - 12:46

@Ixman, я ночером один из калькуляторов сделал через относительно валидный JS и осёл его скушал, но он же не просто так "осёл" - инструмент разработчика всё-равно нашел одну синтаксическую ошибку (какую именно не нашел вариантов посмотреть), хорошо хоть она не мешает ему корректно работать.

 

Сегодня закину на сервис и начну пристальное наблюдение  :unsure:


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10

Поделиться сообщением #10



Ixman

Ixman
  • Пользователь PRO
  • 2 671 сообщений
  • Репутация: 641

Отправлено 14 Март 2017 - 17:58

@ShowPrint, если на осле сработало, то работать будет везде.


  • 0


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru