[AJAX] Komplette Seite als Resultat

K-Dawg · 12.05.2011

Hi,

ich hab mit Ajax nicht so viel Erfahrung, aber ich komme direkt zur Sache.

Ich habe vor in einem <div> Informationen per Ajax zu laden.

Also kurze Beschreibung.
Als Beispiel:
Auf einer Seite solle eine Art News sein. Die News wird komplett aus der DB geladen und gekürzt auf einer Übersicht angezeigt. Um die ganze News sehen zu können wird per klick auf einem Link die ganze Seite neu geladen und die News im Detail angezeigt.

So weit so gut. Funktioniert.

Dies sollte auch das Standardverhalten sein wenn kein JS aktiviert ist.

Sollte JS aktiviert sein, sollte per klick auf dem gleichen Link, die News im Detail geladen werden (per ajax) und in dem Div zu dem die News gehört ersetzt werden.

Soweit funktioniert das mit jQuery auch. Das Problem welches ich dabei habe ist jedoch, in dem <div> wird die komplette Seite geladen.

Kurze Einführung in die Problematik.

der Link zu Newsdetail sieht in etwa so aus:

PHP:

<a href="news-detail-34.html"></a>

Mit diesem Link kann wie gesagt ohne JS auf die Detail geladen werden.

Als Ergebnis bekomme dann im Endeffekt so was wie:

PHP:

<html>
 <head>
 <title>Ajax</title>
 </head>
 <body>
  <div id="news">
  {inhalt der news}
  </div>
 </body>
</html>

Damit habe ich also die komplette Seite nochmals in der Seite jedoch im News <div>.

Wie kann ich die Abfrage beibehalten, jedoch das Resultat von Ajax auf die benötigten Informationen reduzieren?

Zur Info.
Der Link mit news-detail-34.html ist ein url_rewrite angabe und wird auf index.php?module=news&action=details&id=34 weiter geleitet.

Der Grund ist damit ich nicht noch eine Datei erstellen muss um redundanten Code bzw. mehrere Dateien bearbeiten brauche.

Gruß

mfgleo · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Könntest Du bitte noch den Teil des AJAX-Aufrufs und deines PHP-Scripts posten, damit man sieht, wie Du die Infos anforderst bzw. zurück gibst.

Ist diese Seite mit dem Problem öffentlich erreichbar?

K-Dawg · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Nein Online ist nichts zu meinem Problem zu sehen. Aber letztendlich kannst du dir das so vorstellen, dass zb in diesem Bereich statt meines Posts die ganze PSD Seite geladen werden würde zusätzlich zum schon vorhandene Layout.

Der PHP Code der mit diesem Link aufgerufen wird sieht in etwa so aus:

PHP:

index.php?module=news&action=detail&id=34
<?php
session_start();

include_once('tpl/tpl_top.php'); // Ladet HTML bis zum content <div>

[...] // Fallunterscheidung welches Modul geladen werden soll. Nicht sehr relevant hier da  folgender Code ausgeführt wird

if((isset($_GET['action']) && $_GET['action'] == 'detail') && isset($_GET['id'])) { // wird im PHP Script den Aufruf des Links wiedergeben
	$id = $_GET['id'];
	$data = $news->getDetails($id);  // ist eine PHP Klasse welches die Daten aus der DB holt und zurückgibt

	include 'news/details.phtml'; // Template für Darstellung der Daten wird geladen
}

include_once('tpl/tpl_bottom.php'); // ladet HTML angefangen vom content schließen <div> bis zu </html>

Das jetzt im Groben wie es vereinfacht vom PHP aussehen würde.

Fallunterscheidung ist nicht relevant da der darauf folgende Code vom Fallunterscheidung geladen und ausgeführt wird.

mfgleo · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Meiner Meinung nach liegt das Problem darin, das Du eine komplette Seite zusammenbaust und diese zurück gibst. Du müsstest, wenn Du AJAX verwendest, nur den Teil zurück liefern, den Du neu laden möchtest.

Ablauflogik:
1. per Ajax ein PHP-Script aufrufen das Dir die Details liefert (Übergabeparameter: ID des Newseintrags)
2. das PHP-Script liefert Dir die Details als echo zurück (im echo befinden sich die html-Tags usw.)
3. das Ajax-Script ersetzt Dir den Inhalt von <dir id="news">

Achtung: In der Rückgabe von PHP-Script dürfen die Umlaute nur in der Form ü, usw. enthalten sein, sonst ist die Rückgabe fehlerhaft oder wird gar nicht erst angezeigt.

K-Dawg · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Genau. Das ist was passiert. Mir ist dies bewusst und den Lösungsvorschlag von dir habe ich auch schon gemacht, jedoch ist das zu aufwändig und inakzeptabel wenn ich da etwas am Script ändere. Dann muss ich dies 2x erledigen und vor allem, beim aufzurufenden PHP script muss ich auch alle Includes, Berechtigungen (authorization), pfade usw einfügen bzw. anpassen.

Ich wollte diesen extra Aufwand ja verhindern. und vor allem wollte ich somit die Pfade vom Server bzw. Scripts nicht unbedingt preisgeben.

Gibt es da keine Möglichkeit den zurückgelieferten Datensatz vom Ajax auf das wesentliche zu bereinigen bzw. bereinigen und als Json zurückgeben?

Ich habe den gleichen "Problem" in einem ZendFramework Video gesehen der genau das gleiche tut und auch den gleichen Fehler bekommt, dieser wird jedoch mit dem ZendFramework bereinigt und als Json zurückgegeben.
ich dachte mir, wenn das damit geht muss es doch eine nicht ZendFramework Möglichkeit geben dies zu bewerkstelligen. Dazu reicht aber meine Ajax Erfahrung nicht aus.

Gruß

Duddle · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Bitte zeig mal den AJAX-Aufruf.

Duddle

mfgleo · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Ganz ehrlich, ich würde solch ein Vorgehen, wie in diesem Video, mit einer 6 benoten. Das ist das schlechteste was man überhaupt machen kann. Das wäre so, als würde ich ein ganzes Rind kaufen und dann schlachten, nur weil ich ein Rinderfilet haben will.

Du muss eigentlich in dem AJAX-Script so etwas wie www.meine-seite.de/detail/35 oder detail.php?id=35 aufrufen. In dieser PHP-Datei liest Du die entsprechenden Daten aus der Datenbank. Die müssen dann entsprechend formatiert und per echo zurückgegeben werden. In meinen Augen ist dies der einfachste Weg. Keiner sieht was Du in diesem Script machst, geschweige den, welche Dateien und Serverpfade Du verwendest.

K-Dawg · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Ich denke du meinst den JavaScript code bzw. jQuery Code.

Also das sieht folgendermaßen aus:

PHP:

$(function() {
	function ajaxify(file, div) {
		$.ajax({
			url: file,
			type: "POST",
			data: "format=json",
			async: false,
			success: function(response){
				$(div).html(response);
			}
		});
	}

	$("div.newsBox a").click(function() {
		ajaxify($(this).attr('href'), $(this).parent());
		return false;
	});
});

Gruß

edit:
@mfgleo
Sorry hab dein Beitrag übersehen.

Dies ist das Video mit Lösung per ZendFramework.
http://www.youtube.com/watch?v=Xrw8TP62-XU

Anfangs hat der Tutorialersteller das gleiche Problem und bekommt die komplette Seite geladen. Er benutzt ein ZendFramwork Modul um dies zu beheben.

Da das ZendFramework auch PHP ist, dachte ich mir es gäbe vielleicht einen weg dies auch so zu machen wie der, nur eben ohne ZendFramework.

Wäre schön wenn es eine Lösung gäbe ohne extra Dateien erstellen zu müssen. Notfalls muss ich in den sauren Apfel beißen oder irgendwann doch auf ZF umsteigen.

Gruß

Chriss1987 · 12.05.2011

AW: [AJAX] Komplette Seite als Resultat

Hi,

was du auch machen könntest, wäre im AJAX-Request die URI mit einem weiteren Parameter versehen, der im ausgebenden Script ausgewertet wird und im Bedarfsfall das Template unterdrückt.

Zu finden ist das z.B. bei CMSMS, da kann ein Parameter übergeben werden, der das Template unterdrückt. Natürlich musst du da auch die Dateien anpacken und verändern, müsstest du aber so oder so, egal, ob es eine Lösung per ZF o.ä. gäbe.

HTH
Schöne Grüße aus dem Sauerland!
Chriss

mfgleo · 13.05.2011

AW: [AJAX] Komplette Seite als Resultat

Da stimme ich Chriss1987 zu, dies könntest Du auch tun.

Es ist aber wirklich zu überlegen, ob der Aufwand sich lohnt bei jedem generierten Code (Template) dieser Parameter abzufragen.

Wie groß ist eigentlich jetzt diese index.php Datei?

K-Dawg · 13.05.2011

AW: [AJAX] Komplette Seite als Resultat

@Chriss1987
Thx für den Hinweis. Werde ich recherchieren müssen.

@mfgleo
Die index hat inklusive Kommentare 31 Zeilen. Ich muss aber dazu sagen, dass ich das Routing und Strapping ala ZF nicht hin bekomme und ein sehr primitives View Controller nutze.... und zwar einfache Includes. Jedoch kann ich nicht alle Inclues für Templates Ausgrenzen da die Modulscripte im Haupttemplate per OOP includet werden.

Werde mit meiner Entwicklung auf dem jetzigen Stand wohl nicht über spezielle Ajax Scripts herumkommen.

Ne Frage nebenbei. Hat einer von euch ne Idee (Tutorial) wie ich ein Viewcontroller per OOP schreiben kann ohne einen einizigen Include für Templates nutzen zu müssen...ähnlich wie es beim ZF funktioniert?

Gruß

Duddle · 13.05.2011

AW: [AJAX] Komplette Seite als Resultat

Du kannst mit load() ein Fragment im Zieldokument ansprechen. Dann würdest du z.B. so was machen können:

PHP:

$("#newscontainer").load(file+" #news");

Ich weiß aber nicht, ob man das mit POST kombinieren kann.

Duddle

K-Dawg · 13.05.2011

AW: [AJAX] Komplette Seite als Resultat

@Duddle
Thx, werde ich mal rein schauen. Habe das jetzt wie oben gelöst zumal es mehrere Divs mit gleicher class gibt und ich noch nicht ganz in jQuery durchblicke.

@all
Danke für eure nette Hilfe. Habe das jetzt so gelöst wie mfgleo erwähnt hatte und den Weg den ich kenne, nur nicht ganz meine Vorstellungen entsprochen hatte.

Jedenfalls habe ich daran etwas gearbeitet und bin zu einem zufriedenstellende Ergebnis gekommen. Anstatt alles jetzt im Prinzip in einem Schritt zu erledigen muss ich zwar 3 gehen, diese fallen jedoch nicht so sehr in Gewicht.

Kurze Erklärung wie ich das jetzt mache.
Im Prinzip schon wie oben erklärt.

Ich hab meine HTML Ausgabe:

PHP:

<html>
 <head>
 <title>Ajax</title>
 </head>
 <body>
  <div id="newsBox">
  {inhalt der news 1}
  </div>

  <div id="newsBox">
  {inhalt der news 2}
  </div>

  <div id="newsBox">
  {inhalt der news 34}
  </div>
 </body>
</html>

Dann den Ajax Code:

PHP:

$(function() {
	function newsDetails(id, div) {
		$.ajax({
			url: 'ajax/news/details/' + id,
			type: "get",
			data: "format=html",
			async: false,
			success: function(response){
				$(div).html(response);
			}
		});
	};

	$("div.newsBox h3 a").click(function() {
		newsDetails($(this).attr('name'), $(this).parent().parent());
		return false;
	});
});

Da ich mit dem attr('name) auf den name Attribute vom anchor zugreife sieht mein Link so aus:

PHP:

<a href="news-detail-34.html" name="34" title="Titel von der News"></a>

Dieser Link passt sich natürlich der jeweilige News an.

Somit habe ich was ich wollte zudem SEO- und vor allem Benutzerfreundlich und Barriere frei.

Bei aktiviertem JS läuft das wie es soll und der relevante newsBox wird ausgetauscht, wenn JS aber deaktiviert ist, läuft das Standard weiter ohne Einschränkung, nur eben komplette Seite neu laden halt.

Gruß und danke für die Anregungen.