☰

» »

jQuery, HTML in dodajanje oseb v div

jQuery, HTML in dodajanje oseb v div

marjan_h ::

Imam del HTML kode:
<div id="levo">
                 <div class="sporocilo"><span class="ime"></span><span class="tekst">Sporocila</span></div><hr/> 
</div>


Del jQuery:
$("#levo").empty();


Kako bi v for zanki pravilno dodajal sporočila? HTML-ja NE smem spreminjati.

Jaz če bi tole delal, bi kar uporabil append za div levo. Pa dodajal tage.
Samo potem nima smisla imeti tiste span-e znotraj div-a levo.

Pri teh se uporablja atribut class, ker jih bo več.

Sporočilo je celo število 1,2,3... in se ne sme prikazati.
Ime se mora prikazati, ter tekst prav tako.

Recimo da beremo z tekstovne datoteke, katera je vsebina takšna:
"1" "Andrej" "Danes me ne bo na kosilo"
"2" "Marko" "Predstava je bila dobra"
"3" "Anja" "Vsi ste vabljeni na piknik v soboto"
...



Zanima me samo tisti del jQuery kode, ki pravilno doda sporočilo in ga prikaže.

Hvala za pomoč.

urosz ::

$("#levo").html("Andrej");

marjan_h ::

aha potem dodam takole:
$("#levo").html("<div class="sporocilo"><span class="ime">Andrej</span></div><hr/>");


Si tako mislil?

In to izvedem v for zanki, toliko da prebere vse.
Se potem to generira v .html datoteki, ali je to samo trenutno?

urosz ::

narekovaje bo treba popravit 

$("#levo").html('<div class="sporocilo"><span class="ime">Andrej</span></div><hr/>');


kako pa misliš ti to brat z datoteke z javascript? ker to se namreč izvaja na klientovem računalniku, ki nima te datoteke lokalno ;)

kako to misliš, če se "generira v .html datoteki"? zdaj če boš šel gledat izvorno kodo, tega ne boš videl, ker tega ni bilo v fajlu, ki ti ga je posredoval strežnik. bo pa vidno na spletni strani, ker je brskalnik naknadno dodal to.

illion ::

če hočeš dodajat brez brisanja, uporabi append()/prepend() namest html()

radiokills ::

Jaz bi se na tvojem mestu (in na mestu vseh ostalih) izogibal takemu lepljenju stringov. Saj v konkretni situaciji še nekako gre, če boš pa dobil malo kompleksnejšo strukturo pa bo stvar postala nepregledna in zoprna za vzdrževanje. Jaz bi se tega lotil takole:

function addMessage(personName, message, target){
	//ustvari nove elemente
	var newdiv = $("<div>");
	var nameSpan = $("<span>");
	var messageSpan = $("<span>");

	//zapisi ime v span
	nameSpan.html(personName);
	//zapisi sporocilo v span
	messageSpan.html(message);

	//poskrbi za css classe
	newdiv.addClass("sporocilo");
	nameSpan.addClass("ime");
	messageSpan.addClass("tekst");

	//dodaj sporocilo in ime v div
	newdiv.html(nameSpan);
	newdiv.append(messageSpan);
	//dodaj crto
	newdiv.append("<hr />");

	//Tako, sedaj imas vse sestavljeno, preostane nam le se, da dodamo novonarejeni element elementu na strani
	$(target).prepend(newdiv);

}


Funkcijo potem enostavno klices:

addMessage("Janez Novak", "Janezovo sporocilo", "#levo");


Sicer se tale koda izvaja nekoliko počasneje, kot če bi injectal direktno stringe, a v zameno dobiš veliko bolj pregledno pregledno kodo, ki jo je lažje vzdrževat.

marjan_h ::

Hvala.

Zraven imam še obrazec, in ko klikneš na ime bi se moralo ime na katerega klikneš prenesti v vnosno polje.

	$(".ime").click(function(){
	      $("#vnos").val(this);
	});


Zelo preprosto, vendar ne dela.


Ali to zato ker se tisto generira na spletno stran naknadno in dejansko ni zapisano v html-ju?

illion ::

ja, ti bindaš click event še preden obstajajo vnosi, zato se nima kam bindat.
uporabi to:

http://api.jquery.com/on/

$('#levo').on('click', '.ime', function () {
  $("#vnos").val($this).html());
});

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1297335616 (59765) htmltroubles
»

javascript - gnezdenje - konkretno na mojem primeru

Oddelek: Programiranje		162489 (1937) geca
»

JAVA skripta za Prestashop modul

Oddelek: Programiranje		51226 (1164) steev
»

Kontakt obrazec

Oddelek: Izdelava spletišč		61979 (1824) betmen
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč		8710733 (9471) lisjak

Več podobnih tem