Zum Inhalt springen

Nach AJAX-Request wird nur das JSON-Objekt ausgegeben

Erstellt am 30. April 2017 · 6 Antworten · letzte Antwort am 9. Oktober 2018

Tags: Extbase, JavaScript & AJAX, TYPO3 7, Frage

getit ·

Nach meinem Ajax-Request wird nur das JSON-Response-Objekt ausgeben.
Ansonsten funktioniert alles.

Wenn ich am Ende der Methode 'commentViaAjaxAction' einen Breakpoint setze, sehe ich das die Ergebnisseite korrekt geladen wird. Und erst wenn der Breakpoint komplett abgearbeite ist, wird plötzlich das JSON-Objekt ausgegeben.

Hier mal mein Code:
setup.ts

...
ajax = PAGE
ajax {
  typeNum = 99
  config {
    disableAllHeaderCode = 1
    additionalHeaders = Content-type:application/json
    admPanel = 0
    debug = 0
  }
  10 < tt_content.list.20.simpleblog_bloglisting
}
...

Die commentViaAjaxAction() des PostController

/**
 * @param Post $post
 * @param Comment|null $comment
 */
public function commentViaAjaxAction(Post $post, Comment $comment = null) {
  if ($comment->getComment() == '') {
    return false;
  }

  $comment->setCommentdate(new \DateTime());
  $post->addComment($comment);
  $this->postRepository->update($post);
  $this->objectManager->get('TYPO3\\CMS\\Extbase\\Persistence\\Generic\\PersistenceManager')->persistAll();

  $comments = $post->getComments();
  foreach ($comments as $comment) {
    $json[$comment->getUid()] = [
      'comment' => $comment->getComment(),
      'commentdate' => $comment->getCommentdate()
    ];
  }
  return json_encode($json);
}

Und die ajax.js

$().ready(function() {
  $('#commentsubmit').on('click', function() {
    var ajaxUrl = '<f:uri.action action="commentViaAjax" controller="Post" pageType="99" arguments="{post:post}"/>';
    var form = $('#commentform');
    $.ajax({
      url: ajaxUrl,
      type: 'POST',
      data: form.serialize(),
      success: function(response) {
        var items = [];
        $.each(response, function(key, val) {
          items.push('<li class="list-group-item">' + val.comment + ' <span class="text-muted">(' + val.commentdate + ')</span></li>');
        });
        $('#comments').html(items.reverse().join(''));
        $('#commentfield').val();
        return false;
      }
    });
  });
});
toifel ·

Im success-callback deiner ajax.js ist "response" ein String und noch kein JavaScript Objekt. Dem entsprechend wird auch nur ein String ausgegeben.

Du musst "response" noch parsen, damit du im JS damit weiterarbeiten kannst.. JSON.parse(response).

getit ·

@toifel

Vielen Dank für Deine Hilfe. Aber leider gehts trotzdem net - bnekomme weiter nach dem Ajax-Request lediglich das JSON zurück.
Oder habe ich deinen Hinweis falsch umgesetzt? Anbei mein (geändertes - nur der success-Callback) JS

success: function(response) {
        var items = [];
        $.each(JSON.parse(response), function(key, val) {
          items.push('<li class="list-group-item">' + val.comment + ' <span class="text-muted">(' + val.commentdate + ')</span></li>');
        });
        $('#comments').html(items.reverse().join(''));
        $('#commentfield').val();
        return false;
      }
toifel ·

Ich tippe mal, dass der oberste Index in deiner response alle Daten beinhaltet. Teste es mal mit JSON.parse(response)[0]:

success: function(response) {
        var items = [];
        $.each(JSON.parse(response)[0], function(key, val) {
          items.push('<li class="list-group-item">' + val.comment + ' <span class="text-muted">(' + val.commentdate + ')</span></li>');
        });
        $('#comments').html(items.reverse().join(''));
        $('#commentfield').val();
        return false;
      }

Ansonsten lass dir das geparste response Objekt mal in der Browser-console ausgeben und schau dir die Struktur an bzw. poste sie bei Bedarf noch mal hier. Also console.log(JSON.parse(response)) 😉

getit ·

@toifel
Hallo,

das

console.log(JSON.parse(response))

hab ich als erstes probiert.
Aber komischerweise wird mir in der Console gar nichts ausgegeben.

Im Tab 'Netzwerk' der Entwicklerkonsole sehe ich das der AJAX-Request erfolgreich beendet wurde und die Seite mit der Ausgabe des response-Objekts wird mir angezeigt.
Aber der Tab 'Console' ist leer.

Teisinger ·

bei sowas kannst du mit try catch blöcken herrausfinden welcher codeabschnitt noch ausgeführt wird. Damit könntest du den fehler bzw. die stelle an der es hackt näher kommen. 🙂

satan_jim_knopf ·

Hallo getit,

hast du eine Lösung zu deinem Problem gefunden? Ich habe nämlich das gleich Problem und verstehe einfach nicht woran es liegt. Kannst du mir weiterhelfen?

Gruß
JimK