Perchè duplicare elementi in un form è pesante?

[markzzz]

Salve a tutti,

ho un form nel quale, supponiamo, voglio appendere un centinaio di div clonati tramite jQuery. Potete vedere l'intero esempio da questo link . Per comodità incollo qui anche l'intero codice :

    <div style="cursor:pointer;" id="addTr">Click to Add</div>   
    
    <form action="index.php?status=add" method="POST">
        <table class="tracklistOn" cellpadding="0" cellspacing="0"></table>
        
        <table class="tracklistOff" style="display:none;">
            <tr class="trackOn"> 
                <td class="trackTime">
                    <select class="trackTimeHH" name="hours[]">
                        <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option> 
                    </select>
                </td>            
            
                <td class="trackTime">    
                    <select class="trackTimeMM" name="minuts[]">
                        <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>             
                    </select>    
                </td>            
            
                <td class="trackTime">
                    <select class="trackTimeSS" name="seconds[]">
                        <option>??</option><option value="">-</option><option value="00">00</option>  <option value="01">01</option>  <option value="02">02</option>  <option value="03">03</option>  <option value="04">04</option>  <option value="05">05</option>  <option value="06">06</option>  <option value="07">07</option>  <option value="08">08</option>  <option value="09">09</option>  <option value="10">10</option>  <option value="11">11</option>  <option value="12">12</option>  <option value="13">13</option>  <option value="14">14</option>  <option value="15">15</option>  <option value="16">16</option>  <option value="17">17</option>  <option value="18">18</option>  <option value="19">19</option>  <option value="20">20</option>  <option value="21">21</option>  <option value="22">22</option>  <option value="23">23</option>  <option value="24">24</option>  <option value="25">25</option>  <option value="26">26</option>  <option value="27">27</option>  <option value="28">28</option>  <option value="29">29</option>  <option value="30">30</option>  <option value="31">31</option>  <option value="32">32</option>  <option value="33">33</option>  <option value="34">34</option>  <option value="35">35</option>  <option value="36">36</option>  <option value="37">37</option>  <option value="38">38</option>  <option value="39">39</option>  <option value="40">40</option>  <option value="41">41</option>  <option value="42">42</option>  <option value="43">43</option>  <option value="44">44</option>  <option value="45">45</option>  <option value="46">46</option>  <option value="47">47</option>  <option value="48">48</option>  <option value="49">49</option>  <option value="50">50</option>  <option value="51">51</option>  <option value="52">52</option>  <option value="53">53</option>  <option value="54">54</option>  <option value="55">55</option>  <option value="56">56</option>  <option value="57">57</option>  <option value="58">58</option>  <option value="59">59</option>
                    </select>
                </td>            
            </tr>
        </table>        
    </form>

    $('#addTr').click(function () {
        var savedTrackOn=$('.tracklistOff').find('.trackOn');
        for(i=0; i<100; i++) {
            savedTrackOn.clone().appendTo($('.tracklistOn'));
        }
    });

ho provato anche a prendere l'html, salvarlo in una var e appenderlo. Niente. Sulla maggior parte dei browser (eccetto Firefox 6) questa operazione risulta veramente pesante.

Se provate a togliere il form la clonazione è immediata. Avete idea del perchè? O qualche workaround da consigliarmi?

Grazie a tutti per la partecipazione

[markzzz]

Nessuno ne ha idea?

[cavicchiandrea]

Ma... per pesantezza intendi fisica k sul documento o di richiesta lentezza nel generare la clonazione?

P.S. Hai provato a nominare i form univocamente f1, f2, f3, etc... non vorrei che la lentezza sia dovuta a dei controlli che fai il browser vedendosi richiedere 100 form.

[markzzz]

Intendo nel generare la clonazione (prova da Fiddle con Chrome o IE...è lentissimo). Su Firefox6 invece è immediato.

Sembra che il form dia molto fastidio...

[cavicchiandrea]

Ho aggiornato, mentre rispondevi

[markzzz]

Ma non sono 100 form...è uno unico dove all'interno "clono" degli elementi...

[cavicchiandrea]

Ma... prova comunque a nominarlo (e più logico ogni oggetto del documento deve avere un nome, e sarebbe sempre meglio univoco) non ho ma saputo che il tag form sia più "pesante" di un tag select e per logica direi no ma.... si vede che i browser non sono logici

[markzzz]

Provato con :

<form action="index.php?status=add" method="POST" name='myNameForm' id='myIDForm'>

non cambia nulla...

[wartpro]

Ciao,

E se nell'infinita attesa che si generino le select box tu fai apparire una gif di caricamento?

E sopratutto (premettendo che non conosco le tue esigenze "grafiche")...perchè invece di clonare tutto l'ambaradam non cloni solo ed esclusivamente le select (e te le aggiusti con i CSS) ?


Il carico dovrebbe alleggerirsi con la seconda ipotesi. Nella prima invece fai girare un attimino i pollici all'utente.