Ajax Form based on "onedrop/ajaxform"

Community Newcomer's Corner
1

Hey,

I got the regular Form-Package runing on my Site. Then I had to realize that it supports no Ajax. Now I’ve tried the package “onedrop/ajaxform”. But I don’t get it to work. I followed the instuctions on this link but I’m a little confused about what I have to do exactly:

https://github.com/1drop/Onedrop.AjaxForm

I think it has to do something with the wrong Filepath. Maybe someone can help me where I have to do some changes to get it running. At the moment I didn’t change something from the default TYPO3.Form I insert by following this How To:

http://neos.readthedocs.io/en/stable/HowTos/AddingSimpleContactForm.html

Here’s a link to my test page:

http://p366539.mittwaldserver.info/

Greetings David

2

Hey David,
did you found a solution for this problem? i’m now in the same situation :confused:
greets

3

Hey @DavidLang,

what’s the actual problem you have? Maybe @hhoechtl could also help out :slight_smile:

4

Hey guys, I just tested it on your Mittwald server and the currentPage value from the send button is not being transmitted, that causes the form just the reload itself.

Are you using version 2.0 of the package? Because it has a workaround built in for that, see handling of the _submitter in https://github.com/1drop/Onedrop.AjaxForm/blob/master/Resources/Private/TypeScript/form.ts

Btw: I’m glad you are using Discuss, so the answers are permanent and searchable in Google, but if you have an issue with a package, it’s probably easier to write an issue on GitHub or just directly contact the author. Without @stolle mentioning me, I would not have seen this issue.

1 Like
5

I am using version 2.0. Submitting the form reloads the Page and no ajax message is being transmited. Any suggestions or how to solve or debug?

thanks

6

Did you override the javascript output of the TYPO3.Neos:Page or don’t you use that at all?
Sounds like the included JavaScript is not outputted properly in your footer. See https://github.com/1drop/Onedrop.AjaxForm/blob/master/Resources/Private/TypoScript/Root.ts2 how it is included.
If that javascript is not present, it just behaves like a regular form.

7

The form.js ist correctly loaded in the footer an corre

<script src="http://systemum.neos/_Resources/Static/Packages/Onedrop.AjaxForm/JavaScript/form.js"></script>

the html tags also looks like working ajax:

<div data-ajax="ajax-form" data-identifier="contact-form" data-presetname="default" data-locale="">
    <form enctype="multipart/form-data" method="post" id="contact-form" action="http://systemum.neos/#contact-form">
        ...
        <fieldset>
            ....
        </fieldset>
        <div class="actions">
            <nav class="form-navigation">
                <ul>
                    <li class="next submit">
                        <button class="btn btn-primary" type="submit" name="--contact-form[__currentPage]" value="1">
                            Senden
                        </button>
                    </li>
                </ul>
            </nav>
        </div>
    </form>
</div>
8

Could you check if the form handling is correctly executed and the form is found, by adding some console.log into the form.js where the forms are instantiated (bottom of the file). Maybe your DOMContentLoaded is not fired or something else.

9

ok it looks like AjaxForm.prototype.onFormSubmit = function (e){ console.log() ... } is not in action.

but
AjaxForm.prototype.bindFormSubmitListener = function () { ... this._form.addEventListener('submit', function (e) { return _this.onFormSubmit(e); }); ... }
is working.

10

Strange, we use this in multiple projects. Maybe you have a dev-URL where I can check it out?

11

Just to document it: The issue has been caused by bootstrap popover which copies the content of the DOM and therefore the form uses its event bindings.