Ajax

Ajax in eigener Extension einbinden.

Erstellt: 10/2015| Geändert: 10/2015

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);
}

Erstellt: 09/2012| Geändert: 10/2015

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
   }
}

Erstellt: 09/2012| Geändert: 10/2015