Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    505

    Perchè duplicare elementi in un form è pesante?

    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 :

    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>
    codice:
        $('#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

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    505
    Nessuno ne ha idea?

  3. #3
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    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.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    505
    Intendo nel generare la clonazione (prova da Fiddle con Chrome o IE...è lentissimo). Su Firefox6 invece è immediato.

    Sembra che il form dia molto fastidio...

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Ho aggiornato, mentre rispondevi
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    505
    Ma non sono 100 form...è uno unico dove all'interno "clono" degli elementi...

  7. #7
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    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
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    505
    Provato con :

    codice:
    <form action="index.php?status=add" method="POST" name='myNameForm' id='myIDForm'>
    non cambia nulla...

  9. #9
    Utente di HTML.it
    Registrato dal
    May 2011
    Messaggi
    762
    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.