jQuery

  • Joomla-Komponenten erzeugen einen Konflikt zwischen MooTools und jQuery (modal.js / SqueezeBox)

    Problembeschreibung

    Manche Komponenten in Joomla nutzen MooTools, andere und mittlerweile das Joomla selbst verwenden jQuery. Es kann passieren, dass beide JavaScript-Frameworks geladen werden. Das führt jedoch häufig zu Konflikten, weil beide Frameworks den Kurzbezeichner $ verwenden um angesprochen zu werden. Grundsätzlich ist das in Joomla längst kein Problem mehr, selbst dann wenn man beide Frameworks gleichzeitig nutzen will. Zum einen ist gebräuchlich eine jQuery-Methode namen noConflict() einzubinden und zu nutzen. Zum anderene ist es notwendig diese dazu in der korrekten Reihenfolge zu laden. Dies verhindert Konflikte im gleichen Namensraum.

    Aber darum muss sich nicht jede Komponente oder der Webmaster der Seite mehr selbst kümmern. Dafür hat Joomla schon diverse Methoden zur Verfügung gestellt, die das korrekte Handling sicherstellen. Wichtig ist nur, dass die Komponte, die z.B. jQuery verwenden will, zur Sicherheit diese Joomla-Methoden verwendet - zum einen das Einbinden der Frameworks über die Klasse JHtml::_(...) und zum anderen die evtl. notw. Reihenfolge und Konfliktvermeidung JHtml::_('behavior.framework', true);.

  • Scripte von nachgeladenen dyn. Ajax-Inhalten ausführen

     

    ... z.B. um jQuery-Events an neu geladene Elemente zu binden.

     

    Quelle siehe: http://stackoverflow.com/questions/510779/calling-a-javascript-function-returned-from-an-ajax-response

     

    PHP side code Name of file class.sendCode.php

     

    <?php
    class sendCode {

    function __construct($dateini,$datefin){ echo $this->printCode($dateini,$datefin); } function printCode($dateini,$datefin){ $code =" alert ('code Coming from AJAX {$this->dateini} and {$this->datefin}');";//Insert all the code you want to execute, //only javascript or jQuery code, don't incluce <script> tags return $code ; }
    }
    new sendCode($_POST['dateini'],$_POST['datefin']);
    ...
    ?>

    Now from your Html page you must trigger the ajax function to send the data.

    ...  <script src="/http://code.jquery.com/jquery-1.9.1.js"></script>....Datebegin:<input type="text" id="startdate"><br>Dateend:<input type="text" id="enddate"><br><input type="button" value="validate'" onclick="triggerAjax()"/>

    Now at our local script.js we will define the ajax

    function triggerAjax(){
        $.ajax({
                type:"POST",
                url:'class.sendCode.php',
                dataType:"HTML",
                data :{
    
                    dateini : $('#startdate').val(),
                    datefin : $('#enddate').val()},
    
                      success:function(data){
                          $.globalEval(data);// here is where the magic is made by executing the data that comes from// the php class.  That is our javascript code to be executed
                      }
    
            });}
    add javascript code to be executed
    } });
    }