Putin ajutor jQuery

Limbaje de Programare JavaScript / Node
,
1

Vreau sa fac un formular dinamic si nu prea reusesc sa ii dau de cap. Formularul il am in penul de aici -> http://codepen.io/Cristian_N/pen/PPbBde

Problemele:

  1. Cand adaug inca un echipament, butonul de adauga operatiune din blocul nou generat nu functioneaza. Cum il fac sa mearga ?
  2. Cand dau click pe adauga operatiune ( si am adaugat deja 3 echipamente ), imi numara toate echipamentele de pe pagina si imi trece numarul acela la echipament, in loc de numarul echipamentului in cadrul caruia e prezent inputul. Cum il fac sa imi treaca numarul echipamentului ?
2

În primul rând eu aș simplifica toată povestea folosind template-uri js (underscore în cazul de față): http://codepen.io/iamntz/pen/epBPZy?editors=101

În felul ăsta poți băga și codul ăla PHP fără a-l amesteca cu JS .

3

Salut!

Din ce vad eu ai gresit un ID la linia 5 din js.

<span class=" postfix add-op" id="add-me">Adauga Operatiune</span>

Trebuie sa ai “add-op” in loc de “add-me”

1 Like
4

@Vali Ai dreptate, si pot sa jur ca am trecut peste cod de cel putin 10 ori. @iamntz Nu am mai folosit template-uri js pana acum dar am sa incerc.
Issue 2 still stands however :slight_smile:

5

Așa cum zice și Vali, ai bind pe un ID.

Despre numărătoare, aș zice că partea asta var j = $('.to-be-removed').size() ar trebui să fie un pic mai specifică. Revin cu un răspuns.

Ce s-a întâmplat:

  1. nu ai nevoie de un iterator la fiecare click; poți lua numărul elementelor direct așa: groupIndex : $('#client-details fieldset').size(),
  • problema ta era că, numărând elementele la click, nu te puteai limita la un anumit context (e.g. într-un fieldset). Prin urmare, a apărut asta: $('.op-to-be-removed', $(this).closest('.op-field')).size()

Și cam atât.

6

Mersi pentru ajutor. Am reusit pana la urma sa fac ce vroiam :slight_smile: Pentru incrementarea numarului operatiunilor am folosit varianta lui @iamntz iar pentru numarul echipamentului, tot din inputul de ops, am folosit var k = $($(this).closest('fieldset')).index();
Am actualizat penul cu ultima varianta.

Cat despre template-uri, am sa ma documentez mai mult, si poate pe viitor am sa le folosesc, dar pentru chestia asta am sa folosesc jquery fara ele.

1 Like
7

@iamntz, interesanta chestia cu template, nu stiam. Eu pana acum puneam block-ul cu display: none, si dupa aia cu ii faceam clone() si il foloseam unde aveam eu nevoie. [<%= groupIndex %>] asta are vreo legatura cu template sau cum functioneaza?

8

Și aia e o variantă, dar e destul de limitată.

De exemplu, în template-ul underscore poți face chestii de genul:

<% _.each( items, function(item){ %>
  <h3><%= item.title %>
<% } %>

Poți pune condiții, folosi variabile etc. Dezavantajul major este că toate variabilele folosite trebuiesc definite, deci nu poți refolosi un template cu două seturi ușor diferite de date (decât dacă adaugi condiții)

Cu toate astea, eu prefer un template ceva mai puțin pretențios și mai reutilizabil: mustache sau handlebars. De ce este mai reutilizabil? Pentru că îl pot folosi atât din PHP cât și din JS.

Un astfel de template arată cam așa:

{{#each items}}
  <h3>{{{ title }}}</h3>
{{/each}}
2 Likes