naja-js/naja

Stand alone nette forms

sabzstudio opened this issue · 2 comments

Good afternoon,
I hope that you and your family are well and safe.

First and foremost, thank you for your amazing creation.
Secondly, I am trying to implement Naja in a stand alone netter/form. Everything worked out of the box, but I have an issue with handling the response.

I went over the documentation, and I could not figure out how to handle success/error events.
Right now, affter netteForms.js validates the inputs, Naja submits the values using an Ajax call, but I just cannot figure out how to handle the response and present it onto the page.

Using the provided extension example, I could hide the entire form after Naja successfully submits, but could you please help me figure out how to get the response and prepend it to the form's div container?
`

function LoaderExtension(naja, loaderSelector) {
    naja.addEventListener('init', function (event) {
        this.loader = document.querySelector(loaderSelector);
    }.bind(this));

    naja.addEventListener('start', showLoader.bind(this));
    naja.addEventListener('complete', hideLoader.bind(this));
    // naja.addEventListener('complete', displayLoader.bind(this));


    function showLoader() {
      this.loader.style.display = 'block';
    }

    function hideLoader() {
        // this.loader.style.display = 'none';
         // window.alert(event);
         ;
         console.log(this);

         // var myJSON = JSON.stringify(event);
         // console.log(myJSON);
         // console.log(event.MessageEvent.data);
    }

    function displayLoader() {
        // this.loader.innerHTML = this;
        // console.log(this);
    }

    return this;
}

LoaderExtension(naja,"#myForm");`

Hello, the success event (and complete event if the request has been successful) has the response property which holds the parsed response payload. Note that Naja expects the response to be JSON.

Hello, I hope your question has been answered. If not, feel free to reopen the issue, or open a new one if you have further questions.