Много ми допадна тази презентация на възможностите на HTML5, мисля да започна с експериментите:
http://apirocks.com/html5/html5.html
След написах предната статия за дублиране на input полета, се сблъсках с по-сериозен проблем – дублиране на select полета. Разбира се можех да изброя опциите от select полето в javascript-а, но това изобщо не е добра идея. Още повече, че моите полета са 5-6 с по 10тина опции и се зареждат от базата. След още малко ровене стигнах до нещо, което е по-красиво от предното:
-
function duplicate_select(parent_id, select_id) {
-
var parentDiv = document.getElementById(parent_id);
-
var obj = document.getElementById(select_id).cloneNode(true);
-
parentDiv.appendChild(obj);
-
}
Любовта ми към javascript се задълбочава…
Когато ми се наложи да пиша javascript, обикновено гледам да свърша възможно най-бързо и да се върна на приятелска PHP-територия. Затова когато трябваше да напиша динамично добавяне на input елементи, набързо написах първото, което ми хрумна:
-
<div id="band_container'>
-
<div class="label">Favourite band(s):</div>
-
<div class="text-box"><input type="text" name="bands[]" /></div>
-
<div class="add-button"><a onclick="add_band_input();">add another</a></div>
-
<div class="clear"></div>
-
</div>
-
и съответно в js-файла:
-
function add_band_input() {
-
document.getElementById("band_container").innerHTML += '<div class="label"> </div><div class="text-box"><input type="text" name="bands[]" /></div><div class="clear"></div>';
-
}
Проработи и забравих за него. Няколко дни по-късно забелязах, че ако въведа нещо в input полето и след това натисна линка add another, въведеното от мен изчезва. Това беше проблем. След известно проучване – главно ровене из stackoverflow.com – намерих решение:
-
function add_band_input() {
-
var parentDiv = document.getElementById("band_container");
-
var newDiv1 = document.createElement("div");
-
var newDiv2 = document.createElement("div");
-
var newDiv3 = document.createElement("div");
-
newDiv1.innerHTML = '<div class="label"> </div>';
-
parentDiv.appendChild(newDiv1);
-
newDiv2.innerHTML = '<div class="text-box"><input type="text" name="bands[]" /></div>';
-
parentDiv.appendChild(newDiv2);
-
newDiv3.innerHTML = '<div class="clear"></div>';
-
parentDiv.appendChild(newDiv3);
-
}
Оказа се, че като използвам DOM, кодът е не само по-красив, но и по-стабилен. Това някак ме накара да почувствам непозната до този момент близост с javascript.
За целите на тази статия ми трябваше начин да покажа 2 последователни тирета --. Проблемът беше, че Wordpress „превежда“ двете тирета в едно по-дълго. И после като го копипейстнеш в конзолата, командата не ти работи и псуваш този, който е написал статия без да я тества. Просто е, само пишете --
Сега остава да напиша статия за това как показах кода за двете тирета, вместо да покажа самите тирета…
Източник: Simple Thoughts


