jquery/js : appendere file html

**markzzz** · 08-06-2010, 15:11

salve,

mi trovo costretto a dover appendere, dopo un determinato evento, del codice html all'interno di un div.
il codice in questione ha sulle 200 righe, e all'interno devono essere assegnate delle var.

ese.

codice:

for(i=0; i<10; i++) {
    $('#divcontent').append(" QUI DOVREBBE ANDARE IL FILE ");
}

il codice da includere è questo :

codice:

<div class="trackon" id="trackline0"> 
	<div class="trackcounter">'+i+'</div> 
	
	<div class="tracktime1">			
		<select id="inputhh0"  name="hours[]" class="inputTL1"> 
			<option>hh</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> 
        </select> 
	</div> 
	
	<div class="tracktime2">			
		<select id="inputmm0"  name="minuts[]" class="inputTL1"> 
			<option>mm</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>	
	</div> 
	
	<div class="tracktime3">							
		<select id="inputss0"  name="seconds[]" class="inputTL1"> 
			<option>ss</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> 
	</div> 
	
	<div class="trackatl">					
		<input type="text"  id="inputatl'+i+'"  value="'+i+'aaaaaaa"  name="atl[]" class="inputTL2" /> 
	</div> 
	
	<div class="trackbotton1"> 
		<select id="inputside'+i+'" onchange="addS(\''+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="addT(\''+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"> 
		Remove 
	</div>												
</div>

ora, trovo più comodo salvare questo in un file e "appenderlo", anche perchè append vuole tutto su una riga, e sarebbe davvero scomodo creare una mega-stringa con tutto questo codice html. qualche idea?

**Senamion** · 08-06-2010, 16:16

Devi usare una load: http://api.jquery.com/load/

**markzzz** · 08-06-2010, 16:19

eh ma con la load fà una chiamata al server, quindi il tempo di chiamata (anche se minimo) per quello che devo fare è scocciate... vorrei una cosa più immediata solo lato client...

quello che a me interessa forse non è esattamente includere un file (ho espresso male la mia domanda), ma appendere l'intero contenuto di un file html (al momento che genero lo script lato server, anche se non viene eseguito lì).

**markzzz** · 08-06-2010, 17:15

mi sà proprio che devo usare il load...caricare tutto quel codice in javascript è un suicidio (anche perchè ho molto altro da aggiungere).

ho provato quindi :

codice:

$(".tlcontent").append(load('./asynch/trackline.php'));

ma non ha dato buoni risultati...

**Senamion** · 08-06-2010, 17:20

Non si usa così...
Ma se ti serve lato server nel momento della generazione della pagaina (php?) non ti basta un include?

**markzzz** · 08-06-2010, 17:23

no, diciamo che devo inserire quel codice lì (che mi genera un div con delle select e input type text) da aggiungere in maniera dinamica lato client quando necessito tale inserimento!

per farti un esempio : quando carico la pagina ne genero 10 di quelli. poi tipo se ho bisogno di aggiungerne altri 10, scateno un evento che (tramite appunto load) me li fornisce (e li appunto dovrei aggiungerli con append).

come potrei fare per load+append?

**manurat** · 08-06-2010, 20:58

Il load è ben documentato al link che ti ha fornito Senamion:

codice:

$(selettore).load(url_da_chiamare, dati_da_inviare, callback)

e ti caricherà il contenuto dell'url direttamente all'interno dell'elemento che risponde al selettore indicato, classe o id che sia.

Un alternativa potrebbe essere quella di clonare all'occorrenza i contenuti del dom che ti servono e appenderli in coda al contenitore destinato..

**markzzz** · 09-06-2010, 14:37

si avevo trovato la soluzione con il clone(). ho notato però che aggiungere (per esempio) un 50 div tramite ajax ci mette qualche secondo, e vorrei una cosa immediata.

a tal proposito, tornando al punto principale, ho scoperto che è possibile usare il multi-line in JS, inserendo il tag \ alla fine di una nuova riga. questo mi permette di inserire il codice html formattato come meglio desidero, e non su una riga sola (che è davvero ingestibile).

Discussione: jquery/js : appendere file html

Strumenti discussione

Ricerca discussione

Visualizza

jquery/js : appendere file html

Permessi di invio