Ajax
Ajax in eigener Extension einbinden.
Ajax mit JSON Rückgabe
HTML
<div class="tx-rsysquiz">
<img id="ajaxloader" style="display:none;" src="/typo3conf/ext/rsysquiz/Resources/Public/Img/ajax-loader.gif">
<div class="question">
<h2>Titel A</h2>
<p>Frage A</p>
</div>
<div class="answers">
<span class="negative_answer"><a href="#">Antwort 1</a></span>
<span class="positive_answer"><a href="#">ANtwort 2</a></span>
</div>
<div style="display:none;" class="positive_results">
<h2>Richtig!</h2>
<div class="results"><p>Info</p></div>
</div>
<div style="display:none;" class="negative_results">
<h2>Leider ist ihre Antwort falsch.</h2>
<div class="results"><p>Info</p></div>
</div>
<div style="display:none;" class="next">
<span class="next" style="display: none;"><a href="#">nächste Frage</a></span>
</div>
</div>
Javascript
// next question
$(".next").click(function(e) {
$("#ajaxloader").show();
$.getJSON('index.php', {id:136,type:77769},function(data) {
$('.question h2').html(data.title);
$('.question p').html(data.question);
$('.negative_answer a').text(data.answerNegative);
$('.positive_answer a').text(data.answerPositive);
$('.positive_results h2').html(data.resultPositiveTitle);
$('.positive_results div.results').html(data.resultPositiveText);
$('.negative_results h2').html(data.resultNegativeTitle);
$('.negative_results div.results').html(data.resultNegativeText);
// status
$("#ajaxloader").hide();
});
e.preventDefault();
return false;
});
Typoscript
ajax = PAGE
ajax {
typeNum = 77769
10 < tt_content.list.20.rsysquiz_quiz
10.persistence.storagePid = {$plugin.tx_rsysquiz.persistence.storagePid}
config {
disableAllHeaderCode = 1
additionalHeaders = Content-type:application/json;charset=utf-8
xhtml_cleaning = 0
admPanel = 0
}
}
Controller Action
foreach ($randomQuestion as $question) {
$questionUid = $question->getUid();
$jsonData['title'] = $question->getTitle();
$jsonData['question'] = $question->getQuestion();
$jsonData['answerNegative'] = $question->getAnswerNegative();
$jsonData['answerPositive'] = $question->getAnswerPositive();
$jsonData['resultPositiveTitle'] = $question->getResultPositiveTitle();
$jsonData['resultPositiveText'] = $parseObj->TS_links_rte($question->getResultPositiveText());
$jsonData['resultNegativeTitle'] = $question->getResultNegativeTitle();
$jsonData['resultNegativeText'] = $parseObj->TS_links_rte($question->getResultNegativeText());
}
if ($GLOBALS['TSFE']->type == 77769) {
// json return
return json_encode($jsonData);
} else {
// show view
$this->view->assign('mains', $randomQuestion);
}
Ajax mit HTML Rückgabe
HTML
siehe oben...
Javascript
// next question
$(".next").click(function(e) {
$.get('developer/rsysquiz.html?type=77769', function(data) {
$('.tx-rsysquiz').html(data);
});
e.preventDefault();
return false;
});
Typoscript
ajax = PAGE
ajax {
typeNum = 77769
10 < tt_content.list.20.rsysquiz_quiz
10.persistence.storagePid = {$plugin.tx_rsysquiz.persistence.storagePid}
config {
disableAllHeaderCode = 1
additionalHeaders = Content-Type:text/html;charset=utf-8
xhtml_cleaning = 0
admPanel = 0
}
}