AjaxForm springt

Hallo,

ich habe mir das AjaxForm installiert und es funktioniert soweit auch.
Nach dem Absenden bleibe ich auf der Seite und es wird eine Bestätigung angezeigt.

Das Problem ist nur, dass nach dem Absenden die Seite doch irgendwie neu geladen wird und ich zum Anfang der Seite gelange.
Da das Formular aber weiter unten ist sehe ich nun nach dem Absenden gar nicht, dass das Formular abgesendet worden ist.

In einer Contao 3 Installation bleibe ich genau an der Stelle vom Formular und nur der Inhalt vom Formular wird neu geladen und mir wird die Bestätigung angezeigt.

Sprichst du von der Erweiterung ajax_reload_element?

Wenn ja, dann öffne die Entwickler-Konsole im Browser und mache einen Breakpoint bei dieser Zeile:
https://github.com/richardhj/contao-...ad-form.js#L42
So wird beim Neuladen gestoppt und du kannst gucken, ob in der Ajax Response ein Fehler vorgefallen ist.

Ich habe das hier installiert

https://packagist.org/packages/termi...ontao-ajaxform

Code:

---

<script>(function($){"use strict";$(document).ready(function(){var form=$('#');form.submit(function(){$.ajax({type:'POST',data:window.FormData?new FormData(this):form.serialize(),cache:!1,contentType:!1,processData:!1,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!1})})})(jQuery)</script>

---

Das steht im Code und wie ich sehe ist in "var form=$('#')" keine ID hinterlegt

Da sollte doch sicherlich eine stehen.

Das steht im Template "var form = $('#<?php echo $this->formId; ?>');"
Aber damit kommt wohl keine.

Ich habe es nun umgeschrieben da es mit <?php echo $this->formId; ?> nicht geht

Ich nutze nun <?php echo $this->formID; ?> GROßES D

Dafür muss aber im Formulargenerator dem Form eine ID gegeben werden nicht Form-ID

Auch habe ich den Eintrag <?php echo $this->attributes; ?> raus genommen. Dafür kann dann aber keine Klasse mehr vergeben werden. Finde ich hier aber nicht so schlimm.

Hier der ganze geänderte Code

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; ?>" id="<?php echo $this->formID; ?>" method="<?php echo $this->method; ?>" enctype="<?php echo $this->enctype; ?>"<?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>

<?php if ($this->jquery): ?>
<script>
(function($) {
"use strict";
    $(document).ready(function() {
        var form = $('#<?= $this->formID; ?>');
        form.submit(function() {
            $.ajax({
                type: '<?php echo strtoupper($this->method); ?>',
                data: window.FormData ? new FormData(this) : form.serialize(),
                cache: false,
                contentType: false,
                processData: 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>
<?php elseif ($this->mootools): ?>
<script>
<?php if ($this->hasError): ?>
try {
  window.scrollTo(null, (document.getElement('#<?php echo $this->formId; ?> p.error').getPosition().y - 20));
} catch(e) {}
<?php endif; ?>
window.addEvent('domready', function() {
    document.id('<?php echo $this->formId; ?>').addEvent('submit', function(event) {
        event.target.set('send', {
            onComplete: function(txt, xml) {
                if (txt == 'true') {
                    event.target.removeEvent('submit');
                    event.target.submit();
                    return;
                }
                new Fx.Tween(event.target, {property: 'opacity', duration: 200}).start(1,0).chain(function() {
                    this.element.set('html', txt);
                    this.start(0,1);

                    try {
                        this.element.getElements('input,textarea').cleardefault();
                    } catch (err) {}

                    this.element.fireEvent('ajax_change');
                    window.fireEvent('ajax_change');

                    this.callChain();
                });
            }
        });
        event.target.send('<?php echo \Environment::get('request'); ?>');
        return false;
    });
});
</script>
<?php endif; ?>

</div>
<!-- indexer::continue -->

---

Ich hatte diese Erweiterung auch schon im Einsatz und habe heute mal in einer Testinstallation versucht das von Dir beschriebene Verhalten zu reproduzieren.
Bei mir springt da nichts - funktioniert genau wie erwartet.
Ich habe extra die Seite verlängert und das Formular ganz unten, also so dass man dorthin scrollen muss, eingebaut.
Die Bestätigung wird eingeblendet und die Seite bleibt an der Stelle stehen - also so wie genwüscht.
Ich habe beim Formulargenerator weder 'ne CSS ID noch Formular ID eingetragen.
Ich weiß nicht was bei Dir anders sein könnte .

LG
Bennie

Zitat:

---

Zitat von Bennie

Ich hatte diese Erweiterung auch schon im Einsatz und habe heute mal in einer Testinstallation versucht das von Dir beschriebene Verhalten zu reproduzieren.
Bei mir springt da nichts - funktioniert genau wie erwartet.
Ich habe extra die Seite verlängert und das Formular ganz unten, also so dass man dorthin scrollen muss, eingebaut.
Die Bestätigung wird eingeblendet und die Seite bleibt an der Stelle stehen - also so wie genwüscht.
Ich habe beim Formulargenerator weder 'ne CSS ID noch Formular ID eingetragen.
Ich weiß nicht was bei Dir anders sein könnte .

LG
Bennie

---

Welche Versin von Conata hast du?
In der 3.5 kommt es bei mir auch nicht vor

Stimmt ich habe es in 3.5 getestet, da ist es ok, aber in 4.4.x springt es.
Gibt dazu schon eine Meldung bei Github ;)