[JQuery] Wytłumaczcie mi dlaczego to działa w ten sposób. Opcje

[korro]

Witam.
Robię dynamiczny formularz z użyciem JQuery.
Kod wygląda tak:
Szablon HTML:

[PHP] pobierz, plaintext 
<textarea style="display:none" id="departments">
    <tr id="departments_tr_{0}">
        <td>{0}
            <select name="departments_{0}">
                <option value="">[choose department]</option>
                <?php
                $depts = $db->getDepartments();
                foreach ($depts as $depts_row) {
                    echo '<option value="'.$depts_row[0].'">'.$depts_row[1].'</option>'."\n";
                }
                ?>
           </select>
        </td>
        <td>
            <a href="#" ><img id="deleteDepartmentLine_{0}" border="0" src="images/minus.png"></a>
        </td>
   </tr>
</textarea>
[PHP] pobierz, plaintext 

Niedziałający kod JS:

[PHP] pobierz, plaintext 
<?php
var templateDepartments = jQuery.format($("#departments").val());
        var depts_id = 1;
        function addDepartment() {
            depts_id++;
            $(templateDepartments(depts_id)).appendTo("#approvalLine tbody");
            $("#deleteDepartmentLine_" + depts_id).click(function(){
                $("#departments_tr_" +  depts_id).remove();
            });
           
        }
        $("#addDepartmentLine").click(addDepartment);
?>
[PHP] pobierz, plaintext 

Działający kod JS:

[PHP] pobierz, plaintext 
<?php
var templateDepartments = jQuery.format($("#departments").val());
        var depts_id = 1;
        function addDepartment() {
            var r = depts_id++;
            $(templateDepartments(r)).appendTo("#approvalLine tbody");
            $("#deleteDepartmentLine_" + r).click(function(){
                $("#departments_tr_" +  r).remove();
            });
           
        }
        $("#addDepartmentLine").click(addDepartment);
?>
[PHP] pobierz, plaintext 

Różnica polega na tym, że przepisuję zmienną i do zdarzeń używam przepisanej.
Pisząc 'nie działa' mam na myśli to, że wartość depts_id nie jest doklejana do nazwy elementu w momencie deklaracji, tylko w momencie zdarzenia.
Czyli: klikając na dowolny guzik minus usunie się tylko ostatnio wstawiony wiersz.

Z góry dzięki za pomysły.

Ten post edytował korro 17.03.2009, 18:27:15

[erix]

Zmienna utworzona z var wewnątrz funkcji, to zmienna lokalna.

Kod

$("#deleteDepartmentLine_" + r).click(function(){

Funkcja wywoływana z kontekstu click nie widzi zmiennej lokalnej dla funkcji; tylko globalne.

[korro]

Niezupełnie.
Ten przykład z var r działa w oczekiwany sposób.

W pierwszym przykładzie tak jak napisałem wcześniej.
Wygląda na to, że dla każdego

[PHP] pobierz, plaintext 
<?php
$("#departments_tr_" +  depts_id).remove();
?>
[PHP] pobierz, plaintext 

selektor jest równy maksymalnej wartości depts_id.

Ten post edytował korro 17.03.2009, 19:41:45

[erix]

O masz, zagapilem się:

Kod

depts_id = 1;
var r = depts_id++; //r = 1
depts_id //2

Postinkrementacja - najpierw jest zwracana wartość zmiennej, potem zwiększana. Gdybyś zrobił:

Kod

var r = ++depts_id;

wszystko będzie tak, jak chcesz.

[korro]

I znowu nie zupełnie.
Ta inkrementacja jest oczekiwana.
Indeks 1 przypada dla wiersza który jest jest już w tabeli approvalLine.

[PHP] pobierz, plaintext 
<table id="approvalLine">
                        <thead>
                            <tr>
                                <td>
                                    <select name="departments_1">
                                        <option value="">[choose department]</option>
                                        <?php
                                        $depts = $db->getDepartments();
                                        foreach ($depts as $depts_row) {
                                            echo '<option value="'.$depts_row[0].'">'.$depts_row[1].'</option>'."\n";
                                        }
                                        ?>
                                   </select>
                               </td>
                               <td>
                                    <a href="#" id="addDepartmentLine"><img border="0" src="images/plus.png"></a>
                               </td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
[PHP] pobierz, plaintext 

Różni się od szablonu.

Przeanalizuj proszę całość.

Ten post edytował korro 17.03.2009, 20:03:47

[dr_bonzo]

Niezupełnie.
Ten przykład z var r działa w oczekiwany sposób.

W pierwszym przykładzie tak jak napisałem wcześniej.
Wygląda na to, że dla każdego

[PHP] pobierz, plaintext 
<?php
$("#departments_tr_" +  depts_id).remove();
?>
[PHP] pobierz, plaintext 

selektor jest równy maksymalnej wartości depts_id.

1. powcinaj kod prawidlowo - nie wprowadza wtedy tyle zamieszania
2.

[PHP] pobierz, plaintext 
<?php
var templateDepartments = jQuery.format($("#departments").val());
var depts_id = 1; // zmienna globalna
function addDepartment() { 
   depts_id++; // zmienna globalna
   $(templateDepartments(depts_id)).appendTo("#approvalLine tbody");
   $("#deleteDepartmentLine_" + depts_id).click(function(){
// tworzysz fukcje == tworzy sie domkniecie, tzn 'depts_id' to to samo co zmienna globalna..
       $("#departments_tr_" +  depts_id).remove(); // ... wartosc depts_id jest wczytywana w momencie wykonywania tej linijki
// czyli dodasz kilka departametnow => depts_id bedzie powiedzmy 5, i depts_id wewnatrz tej funkcji odwoluje sie do tej samej zmiennej czyli tez ma wartosc 5
// zrobienie: var r = depts_id wewnatrz addDepartment() tworzy zmienna lokalna, dalej: handler click() laczy sie znowu z ta zmienna, ale tym 
// razem ona jest lokalna i zostanie usunieta (wewnatrz handlera pozostanie nietknieta) wraz z koncem funkcji addDepartment(), jako ze nie 
// jest globalna i nigdzie indziej jej nie modyfikujesz to wszytko jest ok
   });
  
}
$("#addDepartmentLine").click(addDepartment);
?>
[PHP] pobierz, plaintext 

[korro]

Kod jest powcinany prawidłowo, forum zniekształca.

To jest odpowiedź.
Zdaje się, że to sposób myślenia z języków kompilowanych.
Dzięki.

[dr_bonzo]

Kod jest powcinany prawidłowo, forum zniekształca.

Mozliwe..

To jest odpowiedź.
Zdaje się, że to sposób myślenia z języków kompilowanych.
Dzięki.

No wlasnie dynamicznych, niekompilowanych, chociaz java i c# chyba maja wkrotce to miec - javascript, ruby, hmmm nie znam innych.

I ciekawy link: uratowal mi skore kilka razy: http://bitstructures.com/2007/11/javascript-method-callbacks
I google: "closures javascript"

[korro]

No wlasnie dynamicznych, niekompilowanych.

Chodziło mi o mój sposób myślenia.

I ciekawy link: uratowal mi skore kilka razy: http://bitstructures.com/2007/11/javascript-method-callbacks
I google: "closures javascript"

Wielkie dzięki.