Hallo ,
Ich suche aktuell nach der gleichen Lösung für Contao 4.
Das ajaxform Template hat sich ja grundlegend verändert.
HTML-Code:
<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> <?php echo $this->tableless ? 'tableless' : 'tableform'; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<form action="<?php echo $this->action; ?>"<?php if ($this->formId): ?> id="<?php echo $this->formId; ?>"<?php endif; ?> method="<?php echo $this->method; ?>" enctype="<?php echo $this->enctype; ?>"<?php echo $this->attributes; ?><?php echo $this->novalidate; ?>>
<div class="formbody">
<?php if ($this->method != 'get'): ?>
<input type="hidden" name="FORM_SUBMIT" value="<?php echo $this->formSubmit; ?>">
<input type="hidden" name="REQUEST_TOKEN" value="{{request_token}}">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $this->maxFileSize; ?>">
<?php endif; ?>
<?php echo $this->hidden; ?>
<?php if (!$this->tableless): ?>
<table>
<?php echo $this->fields; ?>
</table>
<?php else: echo $this->fields; endif; ?>
</div>
</form>
<script>
(function() {
var form = document.querySelector('input[name="FORM_SUBMIT"][value="<?= $this->formSubmit; ?>"]').form;
if (!form) {
return;
}
var triggeredButton = null;
function request(method, uri, body, callback) {
var body = body || null;
var request = new XMLHttpRequest();
request.open(method, uri, true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.setRequestHeader('Contao-Ajax-Form', '<?= $this->formSubmit; ?>');
form.classList.add('ajax-loading');
request.onload = function() {
form.classList.remove('ajax-loading');
callback.apply(this);
var event = new Event('ajax_change');
form.dispatchEvent(event);
window.dispatchEvent(event);
};
request.send(body)
}
function addButtonEvents(form) {
var buttons = form.querySelectorAll('input[type="submit"],button[type="submit"]');
for (var i=0;i<buttons.length;i++) {
buttons[i].addEventListener('click', function (e) {
triggeredButton = e.currentTarget;
});
}
}
function updateContent(form, data, action) {
var action = action || form.action;
if ('true' === data) {
return;
}
form.action = action;
form.innerHTML = data;
addButtonEvents(form);
}
form.addEventListener('submit', function(e) {
e.preventDefault();
var formData = new FormData(form);
if (triggeredButton) {
formData.append(triggeredButton.name, triggeredButton.value);
}
request('POST', form.action, formData, function () {
var location = this.getResponseHeader('X-Ajax-Location');
if (!location) {
updateContent(form, this.responseText);
return;
}
request('GET', location, null, function() {
updateContent(form, this.responseText, location);
});
});
});
addButtonEvents(form);
})();
</script>
</div>
<!-- indexer::continue -->
Viele Grüße
Lukas
Lesezeichen