[gelöst] [ajaxform] Nach Absenden das Formulars wieder anzeigen

Hallo,

mit ajaxform wird nach Absenden des Formulares eine Bestätigung angezeigt und das Formular verschwindet, ich möchte gerne die Bestätigung wegklicken können und das Formular soll wieder sichtbar sein bzw. gar nicht verschwinden (nur reseten).

In der ajaxform_confirm.html5 hab ich folgendes eingefügt damit die Bestätigung verschwindet, dies funktioniert auch soweit nur ist die Seite danach leer.

Code:

---

<script>
  (function($){
    $(".ajaxconfirm a").on("click", function(e) {
      e.preventDefault();
      $(this).closest(".ajaxconfirm").fadeOut(function(e){
        $(this).remove();
      });
    });
  })(jQuery);
</script>

---

Habe eine frische Contao 3.5.6 Installation mit folgenden Extensions:

• ajaxform
• haste
• NamespaceClassLoader

Kann mir jemand Helfen? :)

Vielen Dank

->

PHP-Code:

---


<script>
(function($) {
"use strict";
    $(document).ready(function() {
        var form = $('#f1');
        form.submit(function(event) {
            $.ajax({
                type: 'POST',
                data: form.serialize(),
                cache: false,
                success: function(data) {
                    if (data == 'true') {
                        form.off('submit').submit();
                        return;
                    }
                    form.animate({'opacity':0}, 200, 'swing', function() {
                        form.html(data);
                        form.animate({'opacity':1}, 200);

                        try {
                            form.find('input,textarea').each(function (el) {
                                el.cleardefault();
                            });
                        } catch (err) {}

                        form.trigger('ajax_change');
                        $(window).trigger('ajax_change');
                    });
                }
            });

            return false;
        });
    });
})(jQuery);
</script> 


---

Deswegen verschwindet das Formular:

PHP-Code:

---

form.html(data); 


---

Der Inhalt deines Formulares wird mit dem Response des Servers ersetzt. Der Response des Servers ist:

PHP-Code:

---

<!-- indexer::stop -->
<div class=" tableform block">

<div class="message ajaxconfirm">
<p>Vielen Dank</p>
<p><a class="close">OK</a></p></div>

<script>
  (function($){
    $(".ajaxconfirm a").on("click", function(e) {
      e.preventDefault();
      $(this).closest(".ajaxconfirm").fadeOut(function(e){
        $(this).remove();
      });
    });
  })(jQuery);
</script>

</div> 


---

Hallo Spooky, danke für deine Antwort, hat mir geholfen.


Ich habe folgendes gemacht, falls es jemand auch gebrauchen kann:

In dem ajaxform.html5 Template diese Zeile:

Code:

---

form.html(data);

---

durch folgendes Ersetzt:

Code:

---

$("#confirm").html(data);

---

In diesem Fall habe ich ein zusätzlich div mit der ID "confirm" angelegt. Dadurch wird die Bestätigung von ajaxform im "confirm" div gerendert anstatt das Formular zu ersetzten, wie Spooky schon beschrieben hat.

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