JavaScript jQuery HTML Code in div einfügen

[Falc410]

Ich bin ein absoluter jQuery Anfänger und komme gerade nicht weiter.

Ich benutze ein Django Template um Nachrichten auf meiner Webseite anzuzeigen. Allerdings werden diese von Django direkt in den HTML Code eingebunden wenn die Seite ausgeliefert wird. Ich will das nun dynamisch mit jQuery machen. Dazu habe ich mir eine View geschrieben die mir die Nachrichten in JSON ausliefert. Soweit passt das alles auch schon. Das Problem ist, dass das Template ziemlich komplizierten HTML Code benutzt um eine Nachricht korrekt zu formatieren.
Hier der Ausschnitt aus dem Template:

            {% if messages %}
            <div class="container" id="messages">
                <p></p>
                {% for message in messages %}
                <div class="12u">
                    <div class="alert alert-{{ message.tags }}" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        {{ message }}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}

Meine Idee war jetzt nur den div mit der id="messages" zu haben und den Rest mit jQuery zu erstellen, falls Nachrichten vorliegen.

function getMessages() {
        $.getJSON('messages', function(result) {
            var messageList = $.map(result, function(msg, i) {
                var listItem = $('<div></div>').addClass('12u').append('<div role="alert"></div>').addClass('alert alert-'+msg.level);
                $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>').appendTo(listItem);
                $('<span aria-hidden="true">&times;</span>').appendTo(listItem);
                $('<p>'+msg.body+'</p>').appendTo(listItem); // eigentlich ohne <p> aber nur den content kann ich nicht appendTo machen
                return listItem;
            });
            $('#messages').append('<p></p>').html(messageList);
        });

Nur kommt da nicht der korrekte Code raus. Es ist komplettes Chaos Bei jeder Nachricht habe ich ja einen grossen Batzen statischen HTML Code und nur ganz wenig dynamisch was wirklich vom JSON kommt. Hier mal der Output wie er derzeit aussieht.

<div class="container" id="dynamic-messages">
<div class="12u alert alert-info"><div role="alert"></div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
<span aria-hidden="true">×</span>
<p>You have been promoted to the rank "Beginner"! Congratulations!</p>
</div>
<div class="12u alert alert-success"><div role="alert"></div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
<span aria-hidden="true">×</span><p>Test Nachricht 2</p>
<p></p></div></div>

Wie geht man denn in jQuery am besten vor wenn man einfach ein Stück HTML Code erzeugen will und das in einen div einfügen möchte? Das mit appendTo scheint nicht unbedingt die beste Lösung zu sein. Habe auch schon versucht .html() zu benutzen aber das war auch nicht das Wahre - für einzelne Nachrichten funktioniert das aber nicht für mehrere.

 

[Fireball89]

Warum möchtest du denn unbedingt JSON vom Server holen und das Templating auf Client-Seite machen? Mit jQuery ist das sehr fummelig. Würde dir eher empfehlen das Templating auf Server-Seite zu machen. Dann musst du den Kram nur mit $.get() anfragen und kannst dann direkt das fertige HTML in das DOM bringen.

 

[Falc410]

Mhm, auch keine dumme Idee. Du hast Recht, das könnte es in dem Fall einfacher machen. Ich fände JSON zwar schöner, da dann der Code besser getrennt ist da das Backend eigentlich nicht für die Darstellung verantwortlich sein sollte (z.B. falls jemand die Template austauscht muss dann auch der Backend Code angepasst werden). Aber in dem Fall wäre es wohl wirklich einfacher.

 

[Yuuri]

Dann musst du den Kram nur mit $.get() anfragen und kannst dann direkt das fertige HTML in das DOM bringen.

Ja und dann hat er zwei (oder gar mehr) Templates an den unterschiedlichsten Stellen, die er evtl. ständig synchronisieren muss. Wartungstechnisch der größte Mist.

@ TE: Bleib doch bei JSON und machs ordentlich.

Server:

<?php
echo json_encode( [
	[
		"id" => "1",
		"name" => "asdf",
		"test" => "8273164"
	],
	[
		"id" => "2",
		"name" => "qwertz",
		"test" => "293874"
	]
	// ...
] );

HTML:

<script type="text/html" id="template-foo">
	<div>
		<span class="id">#id#</span>
		<span class="name">#name#</span>
		<span class="test">#test#</span>
	</div>
</script>

JS:

var $foo = $("#template-foo").html();
for( var i in d )
{
	var $t_foo = ("" + $foo)
		.replace( /#id#/g, d[i].id )
		.replace( /#name#/g, d[i].name )
		.replace( /#test#/g, d[i].test )
	$("body").append( $($t_foo) );
}

Du könntest auch direkt HTML-Code als jQuery Selektor schreiben, dann erzeugt er das Konstrukt auch inline. Ist aber Mist, da es in JS immer noch nicht möglich ist Multiline Strings zu nutzen. Man könnte auch solche Tricksereien nutzen, ist aber imho nur Spielerei, wenn auch ne sehr kluge.

 

[Falc410]

Danke, das werde ich ausprobieren.
Also ich beschreibe mein HTML Template in einem Script Tag. Das sollte einfach sein.