[Exercises] jQuery and AJAX - 1. Add / Delete Items ( Tricky bug ) - Софтуерен университет

[Exercises] jQuery and AJAX - 1. Add / Delete Items ( Tricky bug ) - Софтуерен университет

+ Нов въпрос
Lusien.GG avatar Lusien.GG 66 Точки

[Exercises] jQuery and AJAX - 1. Add / Delete Items ( Tricky bug )

Изчетох 50+ страници stackoverflow, пробвах всичко познато за мен и за загубените ми 5-6 часа не установих къде бъркам, може би съм търсил грешки в кода, а не точно за този проблем, но все пак не успях да го оправя, please help.

Ето проблема:
Когато импортна JS-а в HTML файла със <script>...</script> в body-то, всичко е наред ето кода: цък

Обаче,
ако са в отделни файлове всичко работи, без функцията за Add с Enter от клавиатурата. Най-лесно ми е да пратя работещото решение, но след като загубих толкова време да се мъча по кода реших да питам къде е проблема, ако някой успее да ми обясни да си знам поне laugh.
Ето и кода от решението в отделни файлове: HTML и JS .
 

Тагове:
1
Софтуерни технологии 22/06/2016 21:29:10
idmitrov avatar idmitrov 55 Точки
Best Answer

Скрипта ти се зарежда преди html-a, т.е когато казваш  $('#newItemText') този елемент все още не съществува в DOM, най-добрата практика е именно да слагаш всички скриптпве в края на body-то точно преди затварящият таг (както си го реферирал сега, но в края на body-то вместо в header-a), както и да ползваш $(document).ready().
Hint short syntax-a e:
$(function() {
  // TODO:
});

В header зареждай само нужното такаче user-a да може, първото нещо което вижда да изглежда добре, обикновенно това са малки стилизации и евентуално някое нужно library.
Идеята на този подход е, че когато започнат да се изпълняват скриптовете в последствие, целият ти маркъп ще е заредил и всичко, което искаш да вземеш с JS ще е достъпно, както и това, че страницaта ще изглежда заредена поне тази част от нея, която user-a вижда при първоначално зареждане.

2
22/06/2016 23:41:16
Lusien.GG avatar Lusien.GG 66 Точки

ААААААААААААААААааа не мога да повярвам, че не се сетих за това целия ми ден отиде по дяволите. Знам че се зарежда първо скрипта ама въобще не съм зацепил, че може да е заради това щото другите функции си ми работят, ама то нормално всичките се извикват от HTML файла при някакъв action.. Аз съм най-тъпия човек на планетата. Благодаря все пак.

0
22/06/2016 23:11:41
idmitrov avatar idmitrov 55 Точки

Другият път когато испаднеш в подобна ситуация (евентуално ще намериш решение по-бързо) ще се сетиш от какво може да е понеже вече си се сблъсквал с този проблем, за това не съжалявай за изгубеното време, то ти носи ценен опит.
Съвети:

№1:
Console.log ти е най-добрият приятел :) винаги когато взимаш нещо с js и не става това, което очакваш, логвай какво ти връща селектора :) ест ако е повечко логика дебъгваш.(Отнася се и за други операции разбирасе, давам просто пример за вземане на елемент)

№2:
Не дръж кода в глобалният скоуп - в document.ready() ще е по-добре, а още по-добре е ако ползваш IIFE
ex: 
(function($) {
  // TODO: Your code here...
}(jQuery))

така целият ти код ще е в скоупа на функцията (ако ти трябват общи неща между различните ти файлове можеш да закачваш обект в който да ги пазиш или в краен случай ама много краен :Д на window).

Успех!

2
Lusien.GG avatar Lusien.GG 66 Точки

Много благодаря за изчерпателния отговор. smiley

1
vdimitrov13 avatar vdimitrov13 1 Точки

На мен ми дава unresolved function or method за keypress elementa във следният код http://pastebin.com/ZkqXELLb. От какво може да е това? Библиотека която не е вкарана правилно или нещо друго?

0
23/06/2016 15:15:39
vdimitrov13 avatar vdimitrov13 1 Точки

Проблемът се оправи като почнах да използвам некомпресираната версия на jQuery.

0