[jQuery] dodawanie inputów Opcje

[colachips]

Witam,

tworzę sobie skrypt ankiet, gdzie ankieta moze miec n pytań, każde pytanie zaś n odpowiedzi. Muszę jakoś dane pytanie i odpowiedzi do niego zgrupować, więc wpadłem na pomysł aby skorzystać z tablic. Tak to wygląda:

[HTML] pobierz, plaintext 
<dl>
	<h2>Dodaj pytania</h2>
 
	<dt><label for="questions[0][q]">Pytanie 1</label></dt>
	<dd><input type="text" name="questions[0][q]" id="questions[0][q]"></dd>
 
	<dt><label for="questions[0][a][0]">Odpowiedź 1</label></dt>
	<dd><input type="text" name="questions[0][a][0]" id="questions[0][a][0]"></dd>
 
	<dt><label for="questions[0][a][1]">Odpowiedź 2</label></dt>
	<dd><input type="text" name="questions[0][a][1]" id="questions[0][a][1]"></dd>
 
	<a href="#" class="link_add_answer">Dodaj kolejną odpowiedź</a><br />
	<a href="#" class="link_add_question">Dodaj następne pytanie</a>			
</dl>
[HTML] pobierz, plaintext 

Chciałbym, korzystając z jQuery aby można było dodawać kolejne pytania i odpowiedzi. Moim celem jest stworzenie takiego kodu, który doda pytanie w takiej formie:

[HTML] pobierz, plaintext 
...
<dt><label for="questions[1][q]">Pytanie 2</label></dt>
	<dd><input type="text" name="questions[1][q]" id="questions[1][q]"></dd>
 
	<dt><label for="questions[1][a][0]">Odpowiedź 1</label></dt>
	<dd><input type="text" name="questions[1][a][0]" id="questions[1][a][0]"></dd>
 
	<dt><label for="questions[1][a][1]">Odpowiedź 2</label></dt>
	<dd><input type="text" name="questions[1][a][1]" id="questions[1][a][1]"></dd>
 
	<dt><label for="questions[1][a][2]">Odpowiedź 3</label></dt>
	<dd><input type="text" name="questions[1][a][2]" id="questions[1][a][2]"></dd>
 
	<a href="#" class="link_add_answer">Dodaj kolejną odpowiedź</a><br />
	<a href="#" class="link_add_question">Dodaj następne pytanie</a>
[HTML] pobierz, plaintext 

Nie proszę o gotowca, chciałbym się czegoś nauczyć, dlatego jeśli ktoś może wskazać przynajmniej kierunek, w którym powinienem podążać, to będę wdzięczny. Mogę ewentualnie zapłacić, jesli ktoś ma coś gotowego

Pozdr.

[kamil4u]

A czego nie możesz zrobić? Której części swojego algorytmu nie umiesz zrealizować.

Jeśli problem sprawia Ci dodawanie elementów to: http://ferrante.pl/frontend/javascript/jquery-to-latwe-4/

Słowa kluczowe, które mogą być pomoce:
DOM - dodawanie/edycja elementów
zdarzenia - wszelkie klikanie myszką lub klawiaturą

[lukasz1985]

Może łatwiej byłoby gdybyś spróbował podejścia obiektowego.
Na przykład tworząc odmienne klasy dla ankiety, pytania i odpowiedzi

Wyglądałoby to mniej więcej tak, że klasa ankiety przetrzymywałaby węzeł DOM z kontenerem pytań, klasa pytań przetrzymywałaby węzeł DOM z kontenerem odpowiedzi.
Klasa ankiety miałaby metody dodające i usuwające pytanie.

Klasa odpowiedzi natomiast przetrzymywałaby węzeł z odpowiedzią.

Wtedy miałbyś ładną strukturę kodu:

Klasa "Ankieta" - właściwości, np:
- liczba pytań
- pytania (tablica z "Pytanie")
metody, np:
- dodaj pytanie
- usuń pytanie

Klasa "Pytanie" - właściwości, np:

- numer pytania
- treść pytania
- odpowiedzi (instancje "Odpowiedź")

Klasa "Pytanie" - metody np:
- zmien tresc pytania
- przenies pytanie wyzej
- przenies pytanie nizej

Klasa "Odpowiedź":
- analogicznie jak do pytania

[colachips]

@kamil4u: proste dodawanie elementów umiem. Chodzi mi o bardziej kompleksowe podejście do problemu. Takie jak przedstawił @lukasz1985
@lukasz1985: bardzo mi się podoba taki pomysł. Gdzie zacząć żeby to ugryźć. Możecie coś polecić?

Dzięki

EDIT:

Jakoś sobie poradziłem. Uważam, że brzydko to rozwiązałem, ale na potrzeby chwili powinno wystarczyć.
Mam natomiast problem z czymś takim. Mam kod:

[HTML] pobierz, plaintext 
					<dl class="question">
 
						<dt><label for="questions[0][q]">Pytanie 1</label></dt>
						<dd><input type="text" name="questions[0][q]" id="questions[0][q]"></dd>
 
						<dt><label for="questions[0][a][0]">Odpowiedź 1</label></dt>
						<dd><input type="text" name="questions[0][a][0]" id="questions[0][a][0]"></dd>
 
						<dt><label for="questions[0][a][1]">Odpowiedź 2</label></dt>
						<dd><input type="text" name="questions[0][a][1]" id="questions[0][a][1]"></dd>
 
						<!-- tutaj chcę dodać kolejne pytanie -->
 
						<dt><a href="#" class="link_add_answer">Dodaj kolejną odpowiedź</a></dt>
 
					</dl>
[HTML] pobierz, plaintext 

I chcę dodać kolejne pytanie w miejscu komentarza. Próbowałem tak:

[HTML] pobierz, plaintext 
			$('.link_add_answer').click(function(){
				$(this).parents('dl.question').append(
					'<p>aaa</p>'
				);
				return false;
			});
[HTML] pobierz, plaintext 

To działa, ale tylko dla pierwszego <dl class="question">. Jak dodam kolejne pytania to w tamtych już nie działa (nic się nie dzieje po kliknięciu "Dodaj kolejną odpowiedź". Jak zatem znaleźć pierwsze "dl.question" (parent) dla klikniętego "link_add_answer"?

Ten post edytował colachips 24.02.2013, 23:03:43

[lukasz1985]

Napisałem conieco na ten temat, może Cię to zainteresuje:

[JAVASCRIPT] pobierz, plaintext 
/*
 
Ze swojego doświadczenia myślę, że najlepiej byłoby gdybyś znalazł jakąś bibliotekę do tworzenia klas w JS która Ci najlepiej odpowiada.  Ja używam tej dołączonej do prototype.js, ponieważ jest zwięzła i prosta.
 
https://github.com/Jakobo/PTClass
 
Jako, że trudno napisać gotowiec  :) , mogę Ci podać tylko pewne schematy myślenia.
 
Ważne, żebyś wyobraził sobie wszystko co chcesz otrzymać i rozbił temat, nieco abstrakcyjny na drobniejsze elementy.
 
Idąc tokiem myślenia z mojego poprzedniego postu:
 
Spróbuj zrobić tak, żeby w momencie konkretyzacji klasy kreatora ankiety konieczne 
było tylko podanie elementu w którym pomieści się cały interfejs użytkownika i 
wszystkie elementy z których będzie on zbudowany:
 
var kreatorAnkiety = new KreatorAnkiety("id_diva_z_kreatorem")
 
Skoro chcesz utworzyć "kreator ankiet" możesz zacząć od stworzenia konstruktora kreatora ankiety:
 
W konstruktorze możesz utworzyć wszystkie pola klasy, które będą potrzebne do jego działania czyli:
- pole z przyciskiem dodawania pytania (który będzie węzłem DOM) z przypisanym zdarzeniem, np "dodajPytanieButton"
- pole z ilością pytań, które w danej chwili są w kreatorze (między innymi po to aby wiedzieć jaki
numer będzie miało następne pytanie.
 
 
 
na przykład:
*/
 
/*
 * Klasa kreatora ankiety. Na stronie może znajdować się więcej takich kreatorów.
 * 
 */
 
var KreatorAnkiety = Class.create({
    initialize: function (selektorElementu) {
        /*
         * Węzeł DOM w którym będą się znajdować pytania
         */
        this.$kontenerKreatora = $("<div>")
 
        /*
         * Pole z tablicą, która przetrzymuje obiekty klasy Pytanie
         */
        this.pytania = [];
 
        /*
         * Wrzucanie kontenera do węzła o selektorze podanym w konstruktorze
         */
        $(selektorElementu).append(this.$kontenerKreatora);
 
        /*
         * Utworzenie i dodanie do kontenera -  przycisku odpowiedzialnego za
         * dodawanie pytań w kreatorze
         */
        this.$buttonDodajPytanie = $("<input type='button' value='Dodaj pytanie'>");
        this.$kontenerKreatora.append(this.$buttonDodajPytanie)
 
        /*
         * Ilość pytań, jako że jesteśmy w konstruktorze to przypisujemy tej właściwości
         * (lub polu - słów "właściwość" i "pole" używam zamiennie) wartość zerową
         */
        this.iloscPytan = 0;
 
        /*
         * Uruchomienie przycisku z dodawaniem pytań
         */
        this.uruchomDodawaniePytan();
    },
 
    uruchomDodawaniePytan: function () {
        /*
         * Przy kliknięciu w button dodający pytanie wykonuje się funkcja dodajPytanie
         */
        this.$buttonDodajPytanie.click(this.dodajPytanie.bind(this))
    },
 
 
    dodajPytanie: function () {
        /*
         * Dodaj 1 do ilości pytań w tym kreatorze ankiety,
         * dla jasności przypisz tę wartość do zmiennej kolejnePytanie
         */
        this.iloscPytan += 1;
        var kolejnePytanie = this.iloscPytan;
        /*
         * Dialog pytający o treść pytania i umożliwiający wpisanie jego treści
         */
        var tresc = prompt("Prosze podać treść pytania");
 
        /*
         * Sedno funkcji dodajPytanie - utworzenie nowej instancji (konkretyzacja) klasy 
         * Pytanie.
         * Obiekt nowePytanie zostaje skonstruowany z trzema parametrami:
         * 1. this - ten kreator ankiety, obiekt typu Pytanie musi wiedzieć do którego
         * kreatora ankiety należy
         * 2. kolejnePytanie - czyli numer właśnie tworzonego pytania
         * 3. tresc - mówi samo za siebie
         */
        var nowePytanie = new Pytanie(this, kolejnePytanie, tresc)
 
 
        /*
         * Wyswietlenie pytania
         */
        nowePytanie.wyswietl();
 
        this.pytania.push(nowePytanie);
 
        this.przenumeruj();
 
    },
 
    usunPytanie: function (pytanie) {
        /*
         * Odwrotność tego co dzieje się przy dodawaniu pytania. Tutaj
         * przesyłany jest obiekt klasy Pytanie (w argumencie "pytanie")
         */
        this.iloscPytan -=1;
 
        /*
         * Poszukiwanie pytania które ma być usunięte z kreatora
         */
        var indexPytania = this.pytania.indexOf(pytanie);
 
        /*
         * Usunięcie podanego pytania z tablicy pytań tego kreatora ankiety
         */
        this.pytania.splice(indexPytania,1);
 
        this.przenumeruj();
 
    },
 
    przenumeruj: function () {
        // Tutaj kod przenumerujący pytania tak aby miały prawidłowe numery. 
        // Do napisania we własnym zakresie :)
    },
 
    pobierzKontenerKreatora: function () {
        return this.$kontenerKreatora;
    }
 
 
})
 
var Pytanie = Class.create({
    initialize: function (kreatorAnkiety, numer, tresc) {
        /*
         * Kreator ankiety, w którym znajduje się pytanie,
         */
        this.kreatorAnkiety = kreatorAnkiety
 
        this.utworzElementy();
        this.uruchomUsuwanie();
 
        /*
         * Przekazanie wykonania konstruktora do metod 
         */
        this.ustawNumer(numer);
        this.ustawTresc(tresc)
    },
 
    utworzElementy: function () {
        this.$kontenerPytania = $("<div></div>");
        this.$numer = $("<span></span>");
        this.$tresc = $("<span></span>");
        this.$buttonUsunPytanie = $("<button type='button' value='Usun to pytanie'>")
 
        this.$kontenerPytania.append(this.$numer);
        this.$kontenerPytania.append(this.$tresc);
        this.$kontenerPytania.append(this.$buttonUsunPytanie);
    },
 
    uruchomUsuwanie: function () {
        this.$buttonUsunPytanie.click(this.usun.bind(this));
    },
 
    wyswietl: function () {
        var $kontenerKreatora = this.kreatorAnkiety.pobierzKontenerKreatora();
        $kontenerKreatora.append(this.$kontenerPytania);
    },
 
 
 
 
    ustawNumer: function (numer) {
        this.$numer.html(numer + ".")
    },
 
 
    ustawTresc: function (tresc) {
        this.$tresc.html(tresc + ".")
    },
 
    usun: function () {
        /*
         * Pytanie musi się usunąć z kreatora ankiety
         */
        this.kreatorAnkiety.usunPytanie(this);
        this.$kontenerPytania.remove();
 
    }
})
 
 
/*
Zauważ że to tylko fragment całości i do klasy KreatorAnkiety trzeba jeszcze dopisać
metodę "przenumeruj". 
W chwili obecnej dodając dwa pytania i usuwając pytanie numer 1. Po ponownym dodaniu
pytania - powstają dwa pytania o numerze '2'.
Dlatego wewnątrz klasy KreatorAnkiety znajduje się pole "pytania", które 
jest tablicą pytań. Dzięki tej tablicy będziesz w stanie przenumerować pytania po
dodaniu lub usunięciu pytania.
 
 
 
 */
[JAVASCRIPT] pobierz, plaintext 

A tu dokument HTML:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <script src="js/blbilioteki/class.js" type="text/javascript"></script>
        <script src="js/blbilioteki/jquery.js" type="text/javascript"></script>
        <script src="kreator_ankiet.js" type="text/javascript"></script>
 
    </head>
    <body>
 
 
        <div>TODO write content</div>
        <div id="kreator"></div>
 
 
 
        <script type="text/javascript">
            new KreatorAnkiety("#kreator")
 
        </script>
    </body>
</html>
 
[HTML] pobierz, plaintext 

[toaspzoo]

jquery -> .append()