Zitat von
Cyberlussi
Ich versuche gerade, die Suche genau so wie auf der Seite
http://contao-bootstrap.netzmacht.de mit einem modalem Fenster zu machen, bekomme aber es nicht hin. Wie geht das denn?
Was ich mir bisher zusammengereimt habe:
- Modul mit Suchformular
- Suchformular mit einem Textfeld + Absendefläche, sendet per GET an sich selbst (keine Weiterleitung)
- Ins Layout ein Modul "Modales Fenster", welches ein Modul "Suchemaschine" läd.
Aber wie verbinde ich das nun? Aus dem HTML-Quellcode der Seite hab ich jetzt nichts rauslesen können ...
Ich löse das ganze durch Javascript. Das ganze ist etwas tricky umzusetzen, da Bootstrap momentan einen Bug hat, der einem nicht die Möglichkeit bietet auf ein modales Fenster zuzugreifen, dass dynamisch geladen wird. Daher lade ich mir das Suchergebnis-Modul über ein Template (siehe Code), um hier die JavaScript-Events zu triggern. Mit den Javascript-Code leite ich die Suchanfrage + die Pagination-Links als Ajax-Request weiter. Eingebunden ist das ganze dann als Template (siehe Screenshot)
PHP-Code:
<?php
$GLOBALS['bootstrapModalForm'] = '';
echo $this->getFrontendModule(42);
$this->Template->footer = $GLOBALS['bootstrapModalForm'];
?>
<script>
$(document).ready(function() {
$('#bsSearch form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: 'SimpleAjax.php?page=40&modal=41',
data: $(this).serialize(),
success: function(data, status) {
$('#bsSearch').html(data);
}
});
return false;
});
$('#bsSearch .pagination a').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
type: 'get',
url: $(this).attr('href'),
success: function(data, status) {
$('#bsSearch').html(data);
}
});
});
});
</script>
Contao Bootstrap Problem bei der Integration von css und js Dateien
... klar - das ist am einfachsten, mal wieder nicht den Wald vor lauter Bäumen gesehen. Danke!
Modale Suche
Lesezeichen