Zum Inhalt springen

Inhalt als JSON

Erstellt am 16. April 2013 · 4 Antworten · letzte Antwort am 1. August 2013

Tags: Formhandler, JavaScript & AJAX, Frage

chillm ·

Hallo zusammen,

ich habe seit einigen Tagen folgendes Problem und komme einfach nicht weiter #angry#.

Ich möchte den Inhalt einer Seite als JSON zurückgeben, wenn ?json=1 an die URL angehängt wird.
Das klappt auch ganz gut, bis auf die Kontaktseite auf der Formhandler eingebunden ist. Dort wird der Content nur zur Hälfte escaped und somit bekomme ich einen Parse Error.

Hier mein Code: Vielen Dank an http://antwerpes.it/tutorial-typo3-als-ajax-seite/2011/11/ !

[globalString = GP:json=1]
lib.header >

# include jsonProcessor.php
includeLibs.jsonTools = fileadmin/user_jsonTools.php

config.disableAllHeaderCode = 1
config.doctype = none

# set json header
config.additionalHeaders = Content-type:application/json

# keep typo3 from "tidying up" -> perfectly valid json
config.xhtml_cleaning = 0

# json encoder
page.stdWrap.postUserFunc = user_jsonTools->pageToJson
[global]

Meine user_jsonTools.php:

<?php
include_once(PATH_site.'typo3/sysext/cms/tslib/class.tslib_content.php');
class user_jsonTools {
	function pageToJson ($content = '' , $conf = array()) {
		global $TSFE;
                //entferne überflüssigen HTML-Container
		$content = substr($content, 62);
		$content = substr($content, 0, -65);
 		
 		$cObj = t3lib_div::makeInstance('tslib_cObj');
 		$arrReturn = array();
 		$arrReturn['title'] = $TSFE->page['title'];
		$arrReturn['id'] = $TSFE->page['uid'];
		$arrReturn['content'] = $content;
		return json_encode($arrReturn);
	}
}
?>

Hier die JSON-Ausgabe der Kontaktseite:

{"title":"Kontakt","id":"9","content":"\n\t\t\r\n\r\n <div class=\"story\" data-type=\"background\" data-speed=\"10\" style=\"background-image: url(uploads\/tx_templavoila\/test_01.jpg); background-position: 50% 0;background-repeat: no-repeat;background-attachment: fixed;\"><\/div> \r\n \r\n\n\t\n\t\t\n\t\n\t\t\r\n \r\n <section class=\"content\">\r\n <div class=\"width\">\n\t\n\t\t\n\t\t\n\t\t\t<div class=\"csc-header csc-header-n1\"><h1 class=\"csc-firstHeader\">Lorem Ipsum<\/h1><\/div>\n\t\t\n\t\t\t\n\t\n\t\t\n\t\n\t\t\r\n <div class=\"two-column kontakt\">\r\n <div style=\"width:25%\" class=\"leftborder\"><\/div>\r\n <div style=\"width:60%\" class=\"rightborder\">\n\t\n\t\t\n\t\t\n\t\t\t<p class=\"bodytext\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <\/p>\n\t\t\n\t\t\t\n\t\n\t\t<\/div>\r\n <div class=\"clearfix\"><\/div>\r\n <\/div>\r\n\n\t\n\t\t\n\t\n\t\t\n\t\t\n\t\t\t <div class="Tx-Formhandler"><form class="form" id="contactForm" name="contactForm" method="post" action="kontakt/?json=1" enctype="multipart/form-data"><fieldset style="display: none;"><input type="hidden" name="id" value="9" /><input type="hidden" name="formhandler[submitted]" value="1" /><input type="hidden" name="formhandler[randomID]" value="e33aa8674b6620467072de46ceeaf69d" /><input type="hidden" id="removeFile-e33aa8674b6620467072de46ceeaf69d" name="formhandler[removeFile]" value="" /><input type="hidden" id="removeFileField-e33aa8674b6620467072de46ceeaf69d" name="formhandler[removeFileField]" value="" /><input type="hidden" id="submitField-e33aa8674b6620467072de46ceeaf69d" name="formhandler[submitField]" value="" /><input type="hidden" name="formhandler[step-2-next]" id="ieHiddenField-e33aa8674b6620467072de46ceeaf69d" value="1" /></fieldset><input type="hidden" name="formhandler[submitted]" value="1" /><div class="form-left"><label for="form_name">Name<span>*</span></label><input type="text" value="" class="mf-input" id="form_name" name="formhandler[name]"></div><div class="form-right"><label for="form_email">E-Mail<span>*</span></label><input type="email" value="" class="mf-input" id="form_email" name="formhandler[​email]"></div><div class="clearfix"></div><div style="margin-bottom: 0;"><label for="form_nachricht">Nachricht<span>*</span></label> <textarea class="mf-text" id="form_nachricht" name="formhandler[nachricht]"></textarea></div><div><input type="submit" class="mf-submit" value="Senden" name="formhandler[step-2-next]" /></div></form><div class="clearfix"></div></div> \n\t\t\n\t\t\t\n\t\n\t\t<\/div>\r\n <\/section> \r\n \r\n\n\t\n\t"}

Was ich daran nicht verstehe:
Wieso wird der Quelltext der Extension an der richtigen Stelle eingefügt, aber nicht von json_encode "bearbeitet"?

Ich hoffe ihr könnt mir helfen 🙂
Vielen Dank!

PS: Im Frontend pushe ich mit history.js (jQuery-Plugin) die URL und rufe erst dann den AJAX-Request auf. Falls interesse besteht kann ich den Code gerne hier posten 😉

chillm ·

Hat denn wirklich niemand eine Idee?

Ich habe jetzt mal verschiedene Extensions eingesetzt. Immer bleibt der Code der Extension unangetastet. Dafür muss es doch eine Einstellmöglichkeit geben?

Ich bin für jeden Ratschlag bzw. Schlagwort dankbar. Habe schon ewig rumgesucht aber finde einfach nichts, was meinem Problem annähernd entspricht.

Vielen Dank,
chillm

Unbekannter Benutzer ·

Das sind wahrscheinlich USER_INT Extensions, diese werden später reingerendert, anscheinend nach
page.stdWrap.postUserFunc
Deshalb sind die nicht jsonified.

Ich denke das musst du anders lösen, ich halte das Vorgehen nicht wirklich für Ideal. Entweder Du guckst dir mal an wie ja_replacer das macht (der ändert den HTML Code auch vor der Ausgabe noch, ähnlich müsstest Du es auch machen) oder du setzt noch höher an und benutzt einen eigenen Pagerenderer indem Du den Standardrenderer aufrufst und dann json_encode auf das resultat machst, das sollte auch gehen.

chillm ·

Vielen Dank für deine Antwort 🙂

Ich habe mir die Extension ja_replacer mal angeschaut. Dort wird das ganze mit einem Hook realsiert.

$TYPO3_CONF_VARS['SC_OPTIONS']['tslib/class.tslib_fe.php']['pageIndexing'][] = 'tx_jareplacer';

Mein Problem habe ich aber jetzt anders gelöst und zwar mit XML.
XML ist zur Datenübertragung zwar nicht so hipp wie JSON, aber es leistet einen guten Dienst im zusammenspiel mit AJAX. Da eine XML-Datei innerhalb von <![CDATA[ ]]> auch HTML-Code beinhalten darf, ist mein Problem, dass ich mit dem JSON hatte somit hinfällig.

Hier mein Code:

xml = PAGE
xml {
  typeNum = 39
  
  config {
    
    # disable all Headers
    disableAllHeaderCode = 1
    
    # keep typo3 from "tidying up"
    xhtml_cleaning = none
    
    admPanel = 0
    
    #setting Header & charset
    #metaCharset = utf-8
    additionalHeaders = Content-Type:text/xml;charset=utf-8
  }
  
 
  #XML
  20 = COA
  20 {
    wrap = <?xml version="1.0" encoding="UTF-8" standalone="yes" ?><xmlrequest>|</xmlrequest>
   
    10 = TEXT
    10 {
      data = TSFE:id
      insertData = 1
      wrap = <id>|</id>
    }
    
    20 = TEXT
    20 {
      data = page:title
      insertData = 1
      wrap = <pagetitle><![CDATA[ | ]]></pagetitle>
    }
    
    30 = USER
    30 {
      userFunc = tx_templavoila_pi1->main_page
      disableExplosivePreview = 1
      stdWrap.wrap = <content><![CDATA[ | ]]></content>
    }
  }
}

Ich habe jetzt alles mit TypoScript realisiert und bekomme beim Aufruf ?type=39 eine wohlgeformte XML geliefert. Weiterhin bleibt meine Seite ohne JavaScript genauso nutzbar, da der Parameter erst beim Klick angehängt wird.

Da das ganze mit JSON und ohne unnötiges HTML (Navigation, Footer usw.) allerdings schöner wäre, werde ich bei Zeit wohl eine kleine Extension dafür schreiben.

Trotzdem nochmals vielen Dank für deine Hilfe 😉