Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: AjaxForm springt

  1. #1
    Contao-Fan Avatar von Net Cube
    Registriert seit
    27.01.2012.
    Ort
    Eutin
    Beiträge
    565

    Standard 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.

  2. #2
    Contao-Fan
    Registriert seit
    27.06.2010.
    Beiträge
    539

    Standard

    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.

  3. #3

  4. #4
    Contao-Fan Avatar von Net Cube
    Registriert seit
    27.01.2012.
    Ort
    Eutin
    Beiträge
    565

    Standard

    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.

  5. #5
    Contao-Fan Avatar von Net Cube
    Registriert seit
    27.01.2012.
    Ort
    Eutin
    Beiträge
    565

    Standard

    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 -->

  6. #6
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    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
    Geändert von Bennie (14.02.2018 um 19:11 Uhr)

  7. #7
    Contao-Fan Avatar von Net Cube
    Registriert seit
    27.01.2012.
    Ort
    Eutin
    Beiträge
    565

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    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

  8. #8
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •