Forms

Ajaxify forms

Forms
Usually, pushing a form button will result in a full page refresh.
Ajaxifying forms is enabled by default:
forms : "form:not(.no-ajaxy)"
If you don’t want that – set to false.

Ajaxifying forms works transparently to the user.
It does not require any changes on your side.
In case of a cross-domain form, it is not ajaxified.

Event triggered

pronto.submit is fired each time a form button is pressed, passing the URL.

Selecting out a form

More complex forms may not work out of the box.
You can select them out from ajaxification like this:
forms: "form:not([name='myform'])"
OR
adding the .no-ajaxy class to the form

40 thoughts on “Forms”

  1. Question about handling form without a submit button.
    I’m looking into using your excellent plugin to use in a button-less form. I need the form to submit on changes in the selectbox, which will update the results. It works perfect when using a submit-button, but once I use document.getElementById(‘formid’).submit() to submit the form it refreshes the page.

    I’m a little confused how I can manage to make it work, tried adding an extra EventListener but was only partly successful.

    1. Hi Didou,

      thanks for your praise and interest in Ajaxify! Obviously, when you specify:

      document.getElementById(‘formid’).submit()

      …you’re sort of bypassing Ajaxify and its internal workings.
      Must admit, that I never had a similar enquiry before – that seems to be a tough one!

      Will think about it.
      What you really would need is a suitable entry point for submitting the form within Ajaxify.

      Maybe have a look at the

      "frms"

      sub-plugin. If you can think of a generic change in the existing logic, I would be happy to change Ajaxify to your needs… (especially if you have invested a lot of development work on your site already)

      At the moment, I can’t come up with a quick solution but will continue to think about it…

      Thanks and
      Regards

      1. Hi again,

        what you could definitely try is hooking into the Pronto events, most notably "pronto.render" – something like:

        $(window).on("pronto.render", ... function(){document.getElementById(‘formid’).submit()})

        The challenging part does not seem to be initiating the submit() of the form but more like intercepting the response and avoiding a full page refresh…

        1. Although I hate to admit it, my knowledge on this appears to be limited. I also don’t really understand how pronto.render would be able to trigger the form submit, since as I’ve tried to use it it’s fired after the results are rendered, not prior.

          I really appreciate you trying to educate me on this, but I will keep the form up with a button for now, that seems to work ok. Every other hack I’ve tried so far has had the same result, indeed bypassing Ajaxify, alas.

          1. Hi Didou,

            sorry that it doesn’t work on "pronto.render" – was worth a try…

            I see two possibilities:

            1) You could try deriving from Ajaxify yourself
            or
            2) You could formulate the “change request”, which I could implement for you

            In the former case and if you got it working, it would be great if you could share the solution with us…

            (I maintain, that the challenge is to intercept the reply of the form submit – with the correct timing)

            Best of luck!

        2. (Needed to reply to a level up, comments only go this deep)

          I’ve spent hours trying to find a way to catch the form submit and send data across using ajaxify/pronto submit. Every time it returns the first page, but then errors out saying it has an empty property url, since I prevent the default Event (submit) and trigger custom one which doesn’t include the state.url. I’m stuck, and probably need to brush up on my JavaScript.

          I’d love it if I was able to use something like pronto.change on the form to have it send the form data and return the page. In my case Ajaxify would really make good use this feature. It would be able to get cached results way faster than the AJAX-call I would otherwise need to create.

          1. Hi Didou,

            I’ll reply in more detail tomorrow…
            Just a quick question: You are aware of the

            pronto.submit

            event, that Ajaxify raises on form submit, right?

          2. Hi again,

            the only other room for error I can think of is if you would do something like:

            document.write()

            …in order to inject the code. Obviously, you should do so by e.g. a jQuery

            html() or replaceWith() or similar…

          3. Hi again,
            Just wanted to let you know I appreciate all your efforts, but I’m still unable to make it work the way I want it. I’ve been able to make some progress, but it still errors out on the console.

            I’ve decided to give up for now, and tracking back to a regular ajax-request that changes a fixed DOM-element.

            I’m obviously less fluent in JavaScript than I’d like and could probably really benefit from an example tailored to my request. So, if anyone is able to pull it of and is willing to share, I hope I’ll see a follow up in the future.

          4. Hi there, before abandoning Ajaxify completely you could try selecting out the form of the ajaxification process.. That way, only that form submit will create a full page refresh…

  2. Hello,
    Thanks for this ajaxify plugin very useful !!!
    I need to set some input fields just when the user submit form, (because my server need to know exactly how long the page was viewed in seconds after the loading was ending) but i haven’t found how to set an input inside pronto-submit :

    $(window).on(‘pronto.submit’, function(){

    $start = $(“#chrono”).val();
    fin = new Date();
    duree = fin.getTime() – $start;
    $(“#duev”).val(duree);
    });
    The updated value isnt sent anyway 🙁
    Is there a solution to do this ?

    1. Hi Patrick,

      thanks for your interest in the plugin!

      Just guessing – would you like to send the timing data via a synthetical POST operation?
      Not sure I’m getting, what you would like to do exactly… (It’s timing data you want to send to the server alright)

      EDIT: Maybe you can call a PHP page dynamically passing the data to your server within the pronto.submit handler as you have started doing already?

      Thanks and
      Regards,
      Arvind

    2. thanks for your answer 😉
      I would just be able to update an input field (that is in the submiting form) just before form is being submit…
      i’have tried to add this code in it:
      $(window).on(‘pronto.submit’, function(event, eventInfo){
      fin = new Date();
      document.getElementById(“duev”).value = fin.getTime();
      });
      but this dont update the input field “duev” (that is already in the submited form)…

      1. Hi Patrick,

        you’re hooking into pronto.submit nicely and your code looks okay. I suspect a timing problem, that your code is firing too late.
        Here’s my proposal:

        1) Create a PHP page on the server-side that is dedicated to capturing your timing data
        2) Within the pronto.submit handler, fire an Ajax request (maybe as a POST), communicating with that PHP page…

        Do you know, what I mean?

  3. Kind of new to this and not sure I am using Ajaxify correctly. Could you take a look and see if I am on the right path?

    —————————–

    Update Data

    $(document).ready(function(){
    jQuery(‘#myform’).ajaxify();});

    <input type="hidden" name="id" value="”>

    AD URL:
    <input name="adurl" type="text" value="”>

    Support URL:
    <input name="supporturl" type="text" value="”>

    Back

    —————————-

    Had to add “class=”no-ajaxy” to a href links to get them to function correctly.

  4. Hi, I have a question about a chat plugin in combination with Ajax. I am new to coding and I have been struggling with it for a while, but this is what happens:
    1. Without ajax switched on, everything works instantly when a visitor wants to send a message via the chat plugin.
    2. With ajax switched on, it can take 3-5 minutes before a message is submitted.. it just sticks on loading..

    I tried adding the data-class and the no-ajaxify, but without success (and I also tried a bunch of other things which are probably not even related to the issue I figured 🙁 ). I might have added it in the wrong place because I am not very experienced.. I added it in the script tag of the code below as such <script class="no-ajaxify" etc… and <script data-class= etc…

    This is the code:

    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement(“script”),s0=document.getElementsByTagName(“script”)[0];
    s1.async=true;
    s1.src=’https://embed.tawk.to//default’;
    s1.charset=’UTF-8′;
    s1.setAttribute(‘crossorigin’,’*’);
    s0.parentNode.insertBefore(s1,s0);
    })();

    My console also shows the following:
    Synchronous XMLHttpRequest on the main thread is deprecated.

    On a reload, the chat works perfectly. So I think the problem is that it needs to be reloaded every time I go to a new page or something.. but I cannot figure out how.

    I hope you can help me out. Thanks for taking the time to read.

    1. Hi Akbar,

      Thanks for pointing that out! My first impression is that there is indeed such validation missing…
      I’ll take care of it asap.
      In the meantime, do you have a URL to your (test) page?

      Thanks and
      Regards

      1. follback.me

        im working too
        there should be script like this

        $(window).on(‘pronto.submit’, function(){
        $(“:input”).each(function() {
        if($(this).val() === “”){
        alert(“Empty Fields!!”);
        ajaxify.stop; //need this
        }
        });
        });

          1. Hi Akbar,

            just to wrap this issue up. I double-checked by shutting Ajaxify off on 4nf.org and was surprised to see, that the search form fires when hitting enter, even on empty input…

            Therefore, I’m not going to change that behaviour, because it is the same, as when Ajaxify is disabled.
            It is usually desirable, that both scenarios behave the same…

            Regards

          2. in php, if(empty)
            in html, onsubmit=”if(document.getElementById(‘search’).value == ”) return false;”
            I have put it

            but does not work in html when alert (empty) done, it will redirect *home (*cek php).

            why I wanted to check in html but already there is check in php?
            because I want to prevent redirect continuously for empty search

            It can be said that
            I want to like search on facebook/youtube, when an empty search will not happen any / show an error message . i just don’t want a redirect when a search is empty **if possible

            I’m sorry if there are errors written

          3. Hi Akbar,

            Thanks for keeping in touch!

            Must admit, I have problems reading your last post…
            Obviously, Ajaxify is at a Javascript level.
            You can do, whatever you like at a PHP level, Ajaxify is just a layer on top of the HTML.

            I liked your approach earlier on, hooking into pronto.submit:

            $(window).on(‘pronto.submit’, function(){
            $(“:input”).each(function() {
            if($(this).val() === “”){
            alert(“Empty Fields!!”);
            ajaxify.stop; //need this
            }
            });
            });

            You could try implementing that, without killing Ajaxify?

            Regards

  5. Dear Admin,

    I have a problem on my site with the “contact form builder”, it does not work with ajaxify. This contact plugin is a wonderful customizable form, that could be interesting for any wordpress site. As I am a user without knowledge in programming, I am not able to help myself.

    Can you please fix this for me?

    Thank you very much!

    Daniela Sabina

    1. Dear Daniela,

      thanks for the interesting enquiry!
      Could you try overriding the forms option like this:

      forms: "form:not([name='myform'])"

      Good luck!

      1. Dear Admin,

        I integrated a new form in my website:
        http://nachhilfe.danielasabina.com/newsletter/

        Unfortunately I cannot find the line I have to override to get Ajaxify and my form working at the same time.

        Also I would be interested to know how to stop the caurousel in the plugin. I am not able to finish reading or writing before the plugin starts running.

        My third question is if there is a possibility to follow your blog automatically. I guess lots of users would like to get your news.

        I would appreciate your help!

        Sending greetings,
        Daniela

        1. Dear Daniela,

          if your form has a name, you can exclude it selectively from ajaxification, as you’ve done before here
          Stopping the carousel / slideshow is on my todo-list, but not implemented yet. At the moment, you can just alter the duration of idle time and sliding.
          Finally, great idea with the newsfeed! Is there a plugin or similar in WordPress?

          Thanks!

          1. Dear Admin,

            Yes, i am using a plugin on
            http://danielasabina.com/.
            On free wordpress sites it can be an already integrated widget.
            I can tell you the name of it later. Anyway there is certainly a choice. I installed it directly in wordpress.

            I will try to override the line like you said.

            Cu later,
            Daniela

          2. Hello again,

            here from my PC at home: the name of the plugin I choose in wordpress is “Simple Subscribe”.

            I tried to find the code where I should overwrite the line… but i dont know where the code is. Sorry, not able to catch fishes myself yet.

            cu soon,
            Daniela

          3. good evening,

            I found out that the “simple subscribe” plugin does not work on
            http://danielasabina.com/
            anymore, probably due to some other plugin I installed later…. could be that I will find something better soon, sorry…

            I tried to override the old bob.js on
            http://nachhilfe.danielasabina.com/

            with this:

            jQuery.getScript(‘https://4nf.org/ajaxify.js’, function() {
            jQuery(‘#content’).ajaxify({previewoff: false, menu: “.menu-item a”, idleTime: 220000, slideTime: 5000, aniTime: 400,
            aniParams: {
            backgroundColor: “#0F0”, color: “#FFF”, opacity: 0,
            width: 0
            },
            forms: “form:not([name=’contactform3′])”
            forms: “form:not([name=’contactform5′])”
            })});

            The result is that Ajaxify is not running… what could be the mistake I made?

            Thank you very much for your help!

  6. if click on the second link directly work, but if i click first on the link one and then the second link not work …

Leave a Reply to Ibby Cancel reply

Your email address will not be published. Required fields are marked *