AJAX mit eID und JQuery Anleitung

AJAX mit eID und JQuery

Wird in einer Extension AJAX verlangt, so kann das etwas komplitzierter werden.
Ich möchte hier eine kleine Anleitung zeigen wie man mit eID und JQuery das hervorragend lösen kann:

Einbinden von JQuery ins constants des TS Templates
plugin.tx_testextension_pi1{
  jquery_self = EXT:testextension/jquery/jquery_selfcode.js
}
Einbinden von JQuery ins setup des TS Templates
page.includeJS.file2 = {$plugin.tx_testextension_pi1.jquery_self}
JQuery Datei steht folgendes
$(document).ready(function(){

  $('.box_two_entrie a').click(function() {
    var hrefAttr = $(this).attr('href');
  
    $.ajax({
      url: ''+hrefAttr,
       dataType: 'html',
       success: function(result) {
        $('.box_tree_entrie').html(result);
       },
       error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('ERROR:'+errorThrown);
       }
    });
    return false;
  });
});
Wenn hier drauf geklickt wird...
$('.box_two_entrie a').click(function() {...
...erfolgt hier die Ausgabe via jquery zwischen zwei divs mit der klasse "box_tree_entrie"
$('.box_tree_entrie').html(result);
Bei Datei ext_localconf folgende Zeile rein:
$TYPO3_CONF_VARS['FE']['eID_include']['doit'] = 'EXT:testextension/jquery/my_ajax.php';
Inhalt der my_ajax.php Datei:
require_once(PATH_tslib.'class.tslib_pibase.php');

class my_ajax extends tslib_pibase {

    public function main() {
        $feUserObject = tslib_eidtools::initFeUser();
        tslib_eidtools::connectDB(); 
        $ausgabe="mein Test";                                     

     return $ausgabe; 
    }
}

$output = t3lib_div::makeInstance('my_ajax');
echo $output->main();
Den HTML Code in der PHP Klasse tx_testextension_pi1.php
$content.='<div class="box_two_entrie">
                      <a href="index.php?eID=doit">
                              hier klicken damit die PHP datei ausgeführt wird
                       </a>
                </div>';

$content.="<div class='box_tree_entrie'>
                      Hier erscheint dann die Ausgabe
                </div>";    

Ein weiteres Beispiel, für ein Optionfeld mit JQueyr und eID

Das HTML
<select name="kanton" class="the_select" id="the_select">
  <option value="">Alle</option>
  <option value="2">GE</option>
  <option value="1">SG</option>
  <option value="3">ZH</option>
</select>
Das Javascript/JQuery
$(document).ready(function(){

      $("#the_select").change(function(){
        var wert_optionfeld=$(this).children('option:selected').val();
        $(".select_gemeinde").load("?eID=doit&wert_optionfeld="+wert_optionfeld,{value: wert_optionfeld});
      });
      
});
Das PHP
require_once(PATH_tslib.'class.tslib_pibase.php');

class my_ajax extends tslib_pibase {

    public function main() {
  $feUserObject = tslib_eidtools::initFeUser();
  tslib_eidtools::connectDB(); 

    $kanton_abk=$_GET['wert_optionfeld'];
    
    $objekt_string.="<div class='label_gemeinde'>W&auml;hlen Sie die Gemeinde</div>";
    $objekt_string.="<select class='gemeinden' id='gemeinden' name='gemeinden'>";  
    $objekt_string.="<option value='alle'> Alle </option>"; 
    $res=$GLOBALS['TYPO3_DB']->exec_SELECTquery(
                          'gemeinde',#select
                          'tx_plattform_objekte',#from
                                             'kanton="'.$kanton_abk.'"',
                          $groupBy='gemeinde',
                          $orderBy='',
                          $limit='');                                                                                         
     while($row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res)) {
            if($row['gemeinde']!=""){
                $objekt_string.="<option value='".$row['gemeinde']."'>".$row['gemeinde']."</option>";
             }
         }
         
     $objekt_string.="</select>";  
      
// lese Gemeinden aus nach Kanton
     return $objekt_string; 
    }
}

$output = t3lib_div::makeInstance('my_ajax');
echo $output->main();
Die Ausgabe
$fullTable.="<tr><td class='select_gemeinde leiste_five leiste'>Ausgabe</td></tr>";  
War das Ihnen eine Hilfe? ein "LIKE" wäre ein tolles "Dankeschön"