Ausführen der toolbar.js nach $.ajax Aufruf

[Liath]

Hallo zusammen, ich bin noch relativ neu in der Welt von JS und jQuery...

ich benötige für die toolbar.js von Paul Kinzett eine Möglichkeit, wie ich die dafür benötigte Funktion nach einem $.ajax Aufruf ausführen kann.

Der Haken an der Geschichte ist, das ich mich leider nicht an das success anhängen kann, da ausserhalb des Ajax-Aufrufs ein Warenkorb erstellt wird, wo alle Produkte eine solche Toolbar bekommen sollen, die eindeutige Zuordnung wird mittels einer ID festgelegt.

Hier mal das Gesamte Template, wie ich mir die Artikel samt toolbar gerne erstellen lassen würde...

while (!$check->EOF) {
    
    $cid = $check->fields['cart_id'];
    $return .= '
        <div id="button'.$cid.'" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-gear"> </i></div>
        <div class="ProdQty">'.$check->fields['product_quantity'].'</div>
        <div class="ProdName" title="'.$check->fields['product_name'].'">'.$this->trunc($check->fields['product_name'],15).'</div>
        <div class="ProdPrice">'.number_format($check->fields['product_price'],2).' '.$currency.'</div>

        <div id="toolbar'.$cid.'" class="hidden">
           <a href="#" title="Produkt löschen"><i class="fa fa-trash"></i></a>
           <a href="#" title="Produkt bearbeiten"><i class="fa fa-edit"></i></a>
           <a href="#" title="Stückzahl erhöhen"><i class="fa fa-plus-circle"></i></a>
           <a href="#" title="Stückzahl verringern"><i class="fa fa-minus.circle"></i></a>
        </div>
        
        <script>                      
            $("#button'.$cid.'").toolbar({
                content: "#toolbar'.$cid.'",
                position: "left",
                event: "click"                               
            });
        </script>
    ';
    
    $check->MoveNext();        
}
return $return;

Mir wird zwar beim klick auf den Button die Klasse entsprechend auf class="pressed" gesetzt, jedoch wird die Toolbar nicht angezeigt, auch der dafür benötigte Container class="tool-container" der die eigentliche Toolbar enthält, wird nicht erstellt.

da die Seite per $.ajax aufgerufen wird, wird die Funktion der toolbar.js leider nicht aufgerufen, hat jemand eine Idee wie ich das lösen kann?

 

[dertypdernixkan]

wie schaut denn die toolbar.js aus?

 

[kkapsner]

Hast du einen Link, wo wir uns das live ansehen können?

 

[Liath]

Nabend

Es handelte sich dabei um dieses jQuery Plugin: Toolbar.js - jQuery plugin to create tooltip style toobars

ich hab die Idee damit allerdings mittlerweile verworfen und mir ein entsprechend ähnliches Menü mittels CSS erstellt.

Einen Demolink kann ich leider nicht liefern, da das ganze System noch in der Entwicklung und nicht öffentlich zugänglich ist.

Interessant wäre dennoch zu wissen, wie ich ausserhalb des success nach einem $.ajax call weitere Scripte in einem <script> ausführen kann, hat da jemand vielleicht einen Masterplan oder so? xD

Danke trotzdem für Euren Versuch

 

[kkapsner]

Interessant wäre dennoch zu wissen, wie ich ausserhalb des success nach einem $.ajax call weitere Scripte in einem <script> ausführen kann

Eigentlich gar nicht, da du ja sonst nicht weißt, wann das AJAX fertig ist.

 

[Liath]

Sorry, hab mich wohl verformuliert...

$(document).on("submit", "form#ajax", function(event){
                    
    event.preventDefault();
                        
    var form = $(this);
    var action = form.attr("action"),
        method = form.attr("method"),
        data   = form.serialize();
    
    $.ajax({
        type: method,
        url: action,
        data: data,
        success: function(data){
            $("#content").html(data);
            $('.modal').modal('hide');
            $('.modal-backdrop').remove();
            $("html, body").animate({ scrollTop: 0 }, 500);
        }            
    })
});

Das hier ist mein Ajax-Aufruf, ich würde gerne wissen, wie ich in der Datei die er nach dem success über das action aufgerufen hat, weitere <script> Blocks ausführen kann, da die ja scheinbar durch den Ajax-Aufruf nicht mehr funktionieren.

Im Fall der toolbar.js war es ja so, dass die Funktion .toolbar({ ... })nicht mehr aufgerufen werden konnte, die in einer normal geladenen Datei noch funktioniert

<script>                       
    $("#button'.$cid.'").toolbar({ 
        content: "#toolbar'.$cid.'", 
        position: "left", 
        event: "click"                                
    }); 
</script>

Wie gesagt, bin ziemlich neu in diesen Angelegenheiten und weiss nicht ob das überhaupt alles so richtig ist

 

[kkapsner]

Eigentlich sollte das schon ausgeführt werden. Zeig' doch mal, wie das HTML in der Variable data genau aussieht.