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

30 thoughts on “Forms”

  1. 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?

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

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

  4. 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!

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

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