Events

…at a Pronto level

Pronto events exposed by the plugin:

  • pronto.request – Fired before new Pronto request is made
  • pronto.beforeload – Fired before new Pronto request is loaded
  • pronto.load – Fired after new Pronto request is loaded
  • pronto.render – Fired after new Pronto request is rendered
  • pronto.submit – Fired when a “form” button is pressed
  • pronto.error – Fired when $.ajax() fails
  • pronto.idle – Fired on specified interval of user inactivity
  • pronto.active – Fired when user becomes active (again)

Events passed to the client from Pronto

The originary event is passed back from Pronto to the client in the first four cases.
You can access it like this:

 $(window).on('pronto.request', function(event, eventInfo){
     var target = eventInfo.target || eventInfo.srcElement;
     console.debug(target) //target holds originary event info
 })

In case of a pronto.error:
The error value of the failed $.ajax() call is passed back to the client.

35 thoughts on “Events”

  1. Hi, This looks like a great plugin that I’d like to try adding to a WordPress theme. The theme relies on changes to the body tag classes for styling though.

    Can you tell me if the plugin handles things like the reading and swapping of body classes and page titles etc.?

    Thanks

    1. Hi Matt,

      Thanks for your interest in the plugin.

      Page titles etc. yes – body classes no, I’m afraid.
      I would love to implement the enhancement, but don’t know how at the moment.

      Maybe you could inject the body classes dynamically and manually while hooking into the Pronto events?

      Thanks and
      Regards

      1. Thanks for the swift reply and also the headsup for using the pronto events.

        Up until now, I have used another ajaixify type of script:
        https://github.com/browserstate/ajaxify. I’m sure you’ve come across this one before.

        Their method of doing the body classes is something like this:

        $dataBody = $data.find(‘#document-body:first ‘ + contentSelector),
        bodyClasses = $data.find(‘#document-body:first’).attr(‘class’);
        $(‘body’).attr(‘class’, bodyClasses);

        That’s obv jQuery though. :/

        Thanks again for your reply though and I’m sure you’ll be hearing a bit more from me soon with any questions I may have whilst trying to integrate it. Keep up the good work and active support.

        Cheers
        Matt

          1. Thanks for pointing me in the right direction and the code excerpt!

            Their approach is only a bit different to Baluptons, in that they use IDs for the different elements of the document instead of classes.
            At a first glance, I’m surprised, that that works at all.

            I obviously use a variant of Baluptons Ajaxify for loading the target page, that employs classes (such as ajy-body).

            Yes, it is definitely feasible to extract the body classes in a similar fashion.

            (I’m taking a break for a couple of hours)

            Don’t know, when I’ll get around to actually coding the new feature!

            Cheers,
            Arvind

        1. One quick question already… πŸ™‚

          Each time I try and turn deltas off by ‘deltas: false’, I get the following error in my console:

          SyntaxError: expected expression, got ‘<' in jquery.js

          Is this somethingnthat other people have come across before and managed to fix. Only a local install at the mo so also unable to supply a link to the site, sorry.

          1. OK, Only reason I needed to turn delta loading is because my overall goal is to get this working with the WordPress Woocommerce plugin. The checkout page loads in pagen specfic script which needs to be attached after the dom content has loaded.

            Your script is successfully adding and removing that script on an as needed basis but the click event handlers for slidetoggles on the page seem to be bubbling up so I wanted to attempt to hard reload of all head / footer scripts on each ajax call instead of relying on the delta loading to handle the process.

            Is there any way to leave delta loading on but specify certain scripts that should be reloaded on a per page basis?

          2. Hi Matt,

            In order to get the “body classes logic” going, I would need to re-arrange the code a bit, assigning an ID to the body of the target page etc. instead of classes.

            Please let me know, if you’re interested in the new logic? (it’s not that difficult to do, I think)

            It’s basically this line of code:

            if(bodyClasses) { $('body').attr('class', fn('body').attr('class')); }

            …and prior to that escaping the body tag with a div with the respective ID – not class

            Cheers,
            Arvind

          3. Yeah, I certainly would be interested in getting the body classes thing working as then this script would be far more compatible with the bulk of WordPress themes out there.

            Look forward to hearing back from you on this matter. Cheers

            Matt

        2. Wow, that works really well.

          Well done and thankyou for looking into this so quickly. Will test it furthe this evening and get back to you with any issues that I doubt will arise.

          Thanks again. First class support on this!

          1. Good morning, Matt!

            How did the tests go?
            Thanks once more for pointing me to this file.

            There are other goodies in there, such as excluding the WP-Admin from ajaxification.
            Do you reckon, I should code them into the next release?

            Thanks and
            Regards,
            Arvind

  2. Hello,
    I’m trying ajaxify and it’s works. Correct me if i’m wrong. What I understood is the page we request is called from the server for the first time, right? But when we request the same page again it will be called from browser cache?
    Is there a way to force a link to make new request to server and not from cache everytime? Just like when we request it for the first time. But still in ‘ajaxify’ way without reloading.

    Thank you

    1. Hi Jarvis,

      thanks for using Ajaxify. Sure, what you could try very quickly is setting

      memoryoff: true

      in your call of Ajaxify…

      1. Hello again. Thanks for fast response. I’m a little bit lost here. Where exactly i put or set this “memoryoff: true” setting? Can you give me example. Thanks again

          1. Ah.. I see. Now it’s works the way I need it..Thanks again for this great plugin. Cheers πŸ™‚

  3. Hello,
    Thanks for this plugin. Works very well. But how to disable ajaxify on specific link and force full refresh?
    Thanks you

  4. Hello
    I’m just using this ajaxify plugin. Works very well. But there are a link that i need to full refresh a new page. How to disable ajaxify on just this link?
    Thanks

  5. how can exclude from ajaxify the links tath open sub-menu?

    with the selector not work for me …

    can you suggest me any solution?

    thanks

  6. Hi!
    I have a problem: I have a multi-profile website, and I have an switch menu on the page, example:

    Profiles:
    $lt;a href=”example.com/profile/1?do=switch”> Profile 1</a>
    $lt;a href=”example.com/profile/2?do=switch”> Profile 2</a>

    When i open example.com/profile/id?do=switch, my session id will be changed.
    When I hover the mouse over an url, the page begin loading (or I don’t know), and the profile id will be changed, when I don’t click on the link.
    How do I disable auto loading on this links?
    Thanks, DaWe (sorry for my english)

  7. Hi, I am working on animating my ajax-enabled site. I am having one small problem. I can’t seem to get the exit animation to work. The site I am working on is available at https://darkrealmgaming.com/home/. I think the problem is that ajax is not waiting for the old animation to finish animating before loading and animating the new page. I am using Animate.css for animations.

    1. Hi Colton,

      Just guessing – could you use $.stop() before starting the new animation to kill the old animation somehow?

      Thanks!

      1. That’s not the problem. The problem is that ajax is loading the new page before the exit animation finishes, and that is triggering the entrance animation. This would be easy to work around, because I could just wait for the old animation to finish, then start the new one, but it would not be desirable, because the page would change in the middle of the animation. I want the old page’s exit animation to finish completely before ajax loads the new page.

Leave a Reply

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

Copyright 2005-2017, 4nf.org. All rights reserved.
Latest update: 4. December 2017