Jquery - Load dynamically many module box for some input (with many parameters on select option)

Question

Hi. I think title explain what i have to do (or, i hope so) :) As fist thing, I'll ask patience to everybody for my english!

So... I have to do this : I've some "modules" with : - some select option (in fact, one for hours with 12 value, one for minuts for 60 values and one for seconds with other 60 values); - some input box; - some check box;

I have to load some of these modules dynamically (e.g. i've 10 modules. If i click on "Add new modules" the Jquery function must add a new module).

Now, there aren't problems if i add 1-10 new modules. But if i add more modules, the browser becomes too slow. In fact it add somethings like 200-250 lines for click.

You can see the code added here :

function addTracklines() {
for(i=indice; i<maxline; i++) {
    $('#trackline'+(i-1)).after(' 
        <div class="sideoff" id="sideline'+i+'"> 
            <div class="sidespace1">&nbsp;</div> 

            <div class="sidelabel1"> 
                Side/Part Name 
            </div> 

            <div class="sidelabel2"> 
                <input type="text" disabled="disabled" id="inputrealside'+i+'" name="sides[]" class="inputTLS" maxlength="50" /> 
                <input type="hidden" disabled="disabled" id="inputrealsideindex'+i+'" name="sidesindex[]" value="'+i+'" /> 
            </div> 

            <div class="sidelabel3"> 
                <a class="lblueb" href="javascript:void(0)" onClick="remSide(\''+i+'\')">Remove</a> 
            </div> 

            <div class="sidespace2">&nbsp;</div> 
        </div> 

        <div class="trackon" id="trackline'+i+'"> 

            <div class="trackcounter" id="inputcounter'+i+'"> 
                '+(i+1)+' 
            </div>  

            <div class="tracktime1"> 
                <select id="inputhh'+i+'" name="hours[]" class="inputTL1"> 
                    <option>??</option> 
                    <option value="">-</option> 
                    <option value="00">00</option> 
                    // ... from 00 to 12....
                    <option value="12">12</option> 
                </select> 
            </div> 

            <div class="tracktime2"> 
                <select id="inputmm'+i+'" name="minuts[]" class="inputTL1"> 
                    <option>??</option> 
                    <option value="">-</option> 
                    <option value="00">00</option> 
                    // ... from 00 to 59....
                    <option value="59">59</option> 
                </select> 
            </div> 

            <div class="tracktime3"> 
                <select id="inputss'+i+'" name="seconds[]" class="inputTL1"> 
                    <option>??</option> 
                    <option value="">-</option> 
                    <option value="00">00</option> 
                    <option value="01">01</option> 
                    // ... from 00 to 59.... 
                    <option value="59">59</option> 
                </select> 
            </div> 

            <div class="trackatl"> 
                <input type="text" id="inputatl'+i+'" name="atl[]" class="inputTL2" /> 
            </div> 

            <div class="trackbotton1"> 
                <select id="inputside'+i+'" onchange="addSide(\''+i+'\');" class="inputTL3"> 
                    <option>+ Side</option> 
                    <option value="">------</option> 
                    <option value="1">Before</option> 
                    <option value="2">After</option> 
                </select> 
            </div> 

            <div class="trackbotton2"> 
                <select id="inputtadd'+i+'" onchange="addTrack(\'2\', \''+i+'\');" class="inputTL3"> 
                    <option>+ Tracks</option> 
                    <option value="">------</option> 
                    <option value="11">+1 Before</option> 
                    <option value="12">+2 Before</option> 
                    <option value="13">+3 Before</option> 
                    <option value="14">+4 Before</option> 
                    <option value="15">+5 Before</option> 
                    <option value="">------</option> 
                    <option value="21">+1 After</option> 
                    <option value="22">+2 After</option> 
                    <option value="23">+3 After</option> 
                    <option value="24">+4 After</option> 
                    <option value="25">+5 After</option> 
                </select> 
            </div> 

            <div class="trackbotton3"> 
                <a class="lblueb" href="javascript:void(0)" onClick="remTrack(\''+i+'\')">Remove</a> 
                <input type="hidden" name="trackpos[]" value="#" /> 
            </div>
        </div>');
}

}

Is the question clear? Have you some suggestion? Maybe using JS class...or somethings others! let me know, and have a nice time!!!

Answer 1

fast version : http://www.gabbatracklistworld.com/index.php?general=example slow version : http://www.gabbatracklistworld.com/index.php?general=example2 (try to click quickly "Add 10 Tracks)

the code added in the one posted in the first post. this is the code for example and example2 (in fact, the only diffence is the tag)

example

<div class="title">
    <div class="titlelabel">
        Add Tracklist
    </div>
</div>

<div class="space">&nbsp;</div>

<div class="wideinfo">
    <div class="spacesmall">&nbsp;</div>

    <div class="content">

        <div class="trackheader">
            <div class="trackheader1">
                <a class="lblueb" href="javascript:void(0)" onClick="addTrack('1', '0')">Add 10 Tracks</a>
            </div>

            <div class="trackheader2">
                &nbsp;
            </div>

            <div class="trackheader3">
                &nbsp;
            </div>              
        </div>

        <div class="tlcontent">
        <?
        $maxline=10;
        for($nrt=0; $nrt<$maxline; $nrt++) {
            if($nrt==0) {
            ?>
                <div class="sideon" id="<?="sideline".$nrt?>">
                    <div class="sidespace1">&nbsp;</div>

                    <div class="sidelabel1">
                        Side/Part Name
                    </div>

                    <div class="sidelabel2">
                        <input type="text" id="<?="inputrealside".$nrt?>" name="sides[]" class="inputTLS" maxlength="50" />
                        <input type="hidden" id="<?="inputrealsideindex".$nrt?>" name="sidesindex[]" value="<?=$nrt?>" />               
                    </div>

                    <div class="sidelabel3">
                        &nbsp;
                    </div>          


                    <div class="sidespace2">&nbsp;</div>            
                </div>
            <?
            } else {
            ?>
                <div class="sideoff" id="<?="sideline".$nrt?>">
                    <div class="sidespace1">&nbsp;</div>    

                    <div class="sidelabel1">    
                        Side/Part Name 
                    </div>

                    <div class="sidelabel2">                
                        <input type="text" disabled="disabled" id="<?="inputrealside".$nrt?>" name="sides[]" class="inputTLS" maxlength="50" />
                        <input type="hidden" disabled="disabled" id="<?="inputrealsideindex".$nrt?>" name="sidesindex[]" value="<?=$nrt?>" />   
                    </div>

                    <div class="sidelabel3">                
                        <a class="lblueb" href="javascript:void(0)" onClick="remSide('<?=$nrt?>')">Remove</a>           
                    </div>          

                    <div class="sidespace2">&nbsp;</div>            
                </div>
            <?
            }
            ?>

            <div class="trackon" id="<?="trackline".$nrt?>">        
                <div class="trackcounter" id="<?="inputcounter".$nrt?>">
                    <?=$nrt+1?>
                </div>

                <div class="tracktime1">            
                    <select id="<?="inputhh".$nrt?>" name="hours[]" class="inputTL1">
                        <option>??</option>
                        <option value="">-</option>
                        <?
                        $i=0;
                        while ($i<=12) {
                            if ($i<10) $i="0".$i;                       
                            ?>
                            <option value="<?=$i?>"><?=$i++?></option>
                            <?
                        }
                        ?>
                    </select>
                </div>

                <div class="tracktime2">            
                    <select id="<?="inputmm".$nrt?>" name="minuts[]" class="inputTL1">
                        <option>??</option>
                        <option value="">-</option>
                        <?            
                            $i=0;
                            while ($i<60) {
                                if ($i<10) $i="0".$i;
                                ?>
                                <option value="<?=$i?>"><?=$i++?></option>
                                <?
                            }
                        ?>
                    </select>   
                </div>

                <div class="tracktime3">                            
                    <select id="<?="inputss".$nrt?>" name="seconds[]" class="inputTL1">
                        <option>??</option>
                        <option value="">-</option>
                        <?          
                            $i=0;
                            while ($i<60) {
                                if ($i<10) $i="0".$i;                               
                                ?>
                                <option value="<?=$i?>"><?=$i++?></option>
                                <?
                            }
                        ?>
                    </select>
                </div>

                <div class="trackatl">                  
                    <input type="text" id="<?="inputatl".$nrt?>" name="atl[]" class="inputTL2" />
                </div>

                <div class="trackbotton1">
                    <select id="<?="inputside".$nrt?>" onchange="addSide('<?=$nrt?>');" class="inputTL3">
                        <option>+ Side</option>
                        <option value="">------</option>
                        <option value="1">Before</option>
                        <option value="2">After</option>                        
                    </select>
                </div>

                <div class="trackbotton2">
                    <select id="<?="inputtadd".$nrt?>" onchange="addTrack('2', '<?=$nrt?>');" class="inputTL3">
                        <option>+ Tracks</option>
                        <option value="">------</option>
                        <?          
                            $i=1;
                            while ($i<6) {
                                ?>
                                <option value="1<?=$i?>">+<?=$i++?> Before</option>
                                <?
                            }
                        ?>
                        <option value="">------</option>
                        <?          
                            $i=1;
                            while ($i<6) {                          
                                ?>
                                <option value="2<?=$i?>">+<?=$i++?> After</option>
                                <?
                            }
                        ?>
                    </select>
                </div>

                <div class="trackbotton3">
                    <a class="lblueb" href="javascript:void(0)" onClick="remTrack('<?=$nrt?>')">Remove</a>
                    <input type="hidden" name="trackpos[]" value="<?=$nrt?>" />
                </div>                                              
            </div>      
        <?
        }

        ?>
        </div>
    </div>
</div>

<div class="space">&nbsp;</div>

<div class="under">&nbsp;</div> 

example2

<form onSubmit="return checkTL();" method='POST' action='./index.php?status=add' name='addtl' >
    <div class="title">
        <div class="titlelabel">
            Add Tracklist
        </div>
    </div>

    <div class="space">&nbsp;</div>

    <div class="wideinfo">
        <div class="spacesmall">&nbsp;</div>

        <div class="content">

            <div class="trackheader">
                <div class="trackheader1">
                    <a class="lblueb" href="javascript:void(0)" onClick="addTrack('1', '0')">Add 10 Tracks</a>
                </div>

                <div class="trackheader2">
                    &nbsp;
                </div>

                <div class="trackheader3">
                    &nbsp;
                </div>              
            </div>

            <div class="tlcontent">
            <?
            $maxline=10;
            for($nrt=0; $nrt<$maxline; $nrt++) {
                if($nrt==0) {
                ?>
                    <div class="sideon" id="<?="sideline".$nrt?>">
                        <div class="sidespace1">&nbsp;</div>

                        <div class="sidelabel1">
                            Side/Part Name
                        </div>

                        <div class="sidelabel2">
                            <input type="text" id="<?="inputrealside".$nrt?>" name="sides[]" class="inputTLS" maxlength="50" />
                            <input type="hidden" id="<?="inputrealsideindex".$nrt?>" name="sidesindex[]" value="<?=$nrt?>" />               
                        </div>

                        <div class="sidelabel3">
                            &nbsp;
                        </div>          


                        <div class="sidespace2">&nbsp;</div>            
                    </div>
                <?
                } else {
                ?>
                    <div class="sideoff" id="<?="sideline".$nrt?>">
                        <div class="sidespace1">&nbsp;</div>    

                        <div class="sidelabel1">    
                            Side/Part Name 
                        </div>

                        <div class="sidelabel2">                
                            <input type="text" disabled="disabled" id="<?="inputrealside".$nrt?>" name="sides[]" class="inputTLS" maxlength="50" />
                            <input type="hidden" disabled="disabled" id="<?="inputrealsideindex".$nrt?>" name="sidesindex[]" value="<?=$nrt?>" />   
                        </div>

                        <div class="sidelabel3">                
                            <a class="lblueb" href="javascript:void(0)" onClick="remSide('<?=$nrt?>')">Remove</a>           
                        </div>          

                        <div class="sidespace2">&nbsp;</div>            
                    </div>
                <?
                }
                ?>

                <div class="trackon" id="<?="trackline".$nrt?>">        
                    <div class="trackcounter" id="<?="inputcounter".$nrt?>">
                        <?=$nrt+1?>
                    </div>

                    <div class="tracktime1">            
                        <select id="<?="inputhh".$nrt?>" name="hours[]" class="inputTL1">
                            <option>??</option>
                            <option value="">-</option>
                            <?
                            $i=0;
                            while ($i<=12) {
                                if ($i<10) $i="0".$i;                       
                                ?>
                                <option value="<?=$i?>"><?=$i++?></option>
                                <?
                            }
                            ?>
                        </select>
                    </div>

                    <div class="tracktime2">            
                        <select id="<?="inputmm".$nrt?>" name="minuts[]" class="inputTL1">
                            <option>??</option>
                            <option value="">-</option>
                            <?            
                                $i=0;
                                while ($i<60) {
                                    if ($i<10) $i="0".$i;
                                    ?>
                                    <option value="<?=$i?>"><?=$i++?></option>
                                    <?
                                }
                            ?>
                        </select>   
                    </div>

                    <div class="tracktime3">                            
                        <select id="<?="inputss".$nrt?>" name="seconds[]" class="inputTL1">
                            <option>??</option>
                            <option value="">-</option>
                            <?          
                                $i=0;
                                while ($i<60) {
                                    if ($i<10) $i="0".$i;                               
                                    ?>
                                    <option value="<?=$i?>"><?=$i++?></option>
                                    <?
                                }
                            ?>
                        </select>
                    </div>

                    <div class="trackatl">                  
                        <input type="text" id="<?="inputatl".$nrt?>" name="atl[]" class="inputTL2" />
                    </div>

                    <div class="trackbotton1">
                        <select id="<?="inputside".$nrt?>" onchange="addSide('<?=$nrt?>');" class="inputTL3">
                            <option>+ Side</option>
                            <option value="">------</option>
                            <option value="1">Before</option>
                            <option value="2">After</option>                        
                        </select>
                    </div>

                    <div class="trackbotton2">
                        <select id="<?="inputtadd".$nrt?>" onchange="addTrack('2', '<?=$nrt?>');" class="inputTL3">
                            <option>+ Tracks</option>
                            <option value="">------</option>
                            <?          
                                $i=1;
                                while ($i<6) {
                                    ?>
                                    <option value="1<?=$i?>">+<?=$i++?> Before</option>
                                    <?
                                }
                            ?>
                            <option value="">------</option>
                            <?          
                                $i=1;
                                while ($i<6) {                          
                                    ?>
                                    <option value="2<?=$i?>">+<?=$i++?> After</option>
                                    <?
                                }
                            ?>
                        </select>
                    </div>

                    <div class="trackbotton3">
                        <a class="lblueb" href="javascript:void(0)" onClick="remTrack('<?=$nrt?>')">Remove</a>
                        <input type="hidden" name="trackpos[]" value="<?=$nrt?>" />
                    </div>                                              
                </div>      
            <?
            }

            ?>
            </div>
        </div>
    </div>

    <div class="space">&nbsp;</div>

    <div class="under">&nbsp;</div> 
</form>

why that form tag make the script so low? there are other way to do this? cheers