Seiten-Callback mit $.getJSON(

[balou17]

Hallo zusammen,

ich habe eine hoffentlich einfach Verständnisfrage. Und zwar habe ich eine HTML-Seite mit integriertem css. Wenn ich auf die Seite komme, muss man sich einloggen. Im Hintergrund steht ein vert.x-Projekt.

$.getJSON('/ajax/meineKlasse', function(json) {
	writeTable(responseDate);
	});

Mit dem einloggen wird im Hintergrund ein JSON-Objekt versendet, was mit der obigen Funktion empfangen wird. Darauf hin gibt es ein Seitencallback und die Funktion writeTable(responseDate) wird aufgerufen. Mir wird auch die Tabelle angezeigt. Die Frage ist. Wie muss ich vorgehen, um die Seite so zu lassen, wie sie war und unterhalb des bisherigen Contents die Tabelle anzuzeigen.

Da ich mich auf dem Gebiet garnicht auskenne, weiß ich nicht recht wonach ich suchen soll...

Vielen Dank

 

[Timmer]

Du kannst mit .append(), .appendTo(), .prepend(), .prependTo(), .before() & .insertBefore() arbeiten, um Content vor oder hinter bereits bestehendem Content einzufügen.

Für eine bessere Antwort bitte mehr Code...

 

[balou17]

Danke. Das ist schon mal gut, funktioniert aber nicht ganz. Wenn ich lediglich einen Text als Parameter einsetzte funktioniert es. Setze ich aber die Funktion writeTable(responseDate) ein, verschwindet der alte Content und die Tabelle wird unformattiert angezeigt.

function loadProductRecommendations(fbResponse){
	$.getJSON('/ajax/recommender', function(json) {
	$('.Recommendations').append(writeTable(responseDate));
			});
}

Zur konkreteren Erklärung: Ich habe einen Header-Bereich, der immer angezeigt wird und dann einen div: "Recommendations", der erst angezeigt werden soll/kann, wenn der User eingeloggt ist.

<div class="Content" ><img src="Bilder/logo.jpg" width="995" height="79" alt="Logo" />
<div class="Login" >
<p>Logge dich hier ganz einfach mit deinen Facebookdaten ein und wir zeigen dir deine persönlichen Empfehlungen.</p>
<div id="my-fb-button"></div>
</div>
<div class ="Recommendations"><img src="Bilder/empfehlungen.jpg" width="299" height="59" alt="Empfehlungen" />
</div>

In den Recommendationsbereich soll dann, mithilfe der Funktion writeTable() eine Tabelle in Javascript eingefügt werden:

document.write("<table border='0' align='center' cellpadding='2' cellspacing='0' width='950'>");
document.write("<tr>");

....

Und diese wird jetzt aber nicht nach dem Header angezeigt sondern alleine und unformatiert..

 

[Timmer]

Ja, was macht writeTable() denn?

 

[balou17]

function writeTable(yourRecs){var responseDate = yourRecs;
document.write("<table border='0' align='center' cellpadding='2' cellspacing='0' width='950'>");
document.write("<tr>");
document.writeln("<td align='center'>" + responseDate.data[0].name + "</td>"); 
document.writeln("<td align='center'>" + responseDate.data[1].name + "</td>"); 
document.writeln("<td align='center'>" + responseDate.data[2].name + "</td>"); 
document.writeln("<td align='center'>" + responseDate.data[3].name + "</td>"); 
document.writeln("<td align='center'>" + responseDate.data[4].name + "</td>"); 
...

writeTable stellt den Inhalt eines JSON-Objekts in einer Tabelle dar. Wenn ich die Funktion "normal" in der HTML-Datei aufrufe, sieht die Tabelle auch gut aus, also die Funktion funktionert. Ich weiß nur nicht, wie ich sie erst später, nach dem Login anzeigen soll...

 

[Timmer]

Änder die Funktion mal auf folgendes:

function writeTable(yourRecs){
var responseDate = yourRecs;
var return_table = "<table border='0' align='center' cellpadding='2' cellspacing='0' width='950'>";
return_table += "<tr>";
return_table +="<td align='center'>" + responseDate.data[0].name + "</td>"; 
return_table +="<td align='center'>" + responseDate.data[1].name + "</td>"; 
return_table +="<td align='center'>" + responseDate.data[2].name + "</td>"; 
return_table +="<td align='center'>" + responseDate.data[3].name + "</td>"; 
return_table +="<td align='center'>" + responseDate.data[4].name + "</td>";
return return_table;

Die Funktion hatte direkt in den DOM geschrieben, also konnte ().append() nicht viel ausrichten. So übergibt die Funktion die erstellte Tabelle und per ().append() kann sie an den Content gehängt werden ;)