Pass: 0

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 with the following convenience function:

 _won('pronto.render', function(event){
    var target = event.data.target || event.data.srcElement; //intermediate data attribute
})

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

Your own events

…might need some tweaking, if they don’t work at first with Ajaxify:

  • events attached to e.g. the document might only fire once
  • attach to e.g. the body instead, if you would like them to fire each time around

That is due to the fact, that the content elements only are swapped and e.g. the document remains the same.


59 thoughts on “Events”

  1. I want to get some Data of a requested file, like the size of that file, or how much of the file has been loaded, these events get the data right? I dont really know how pronto.js works.

    1. Hi Kevin,

      the short answer is “no” – probably. If you like, you could elaborate on what you actually want to do?

      Regards, Arvind

      1. Hi, Something like a progress bar, or a loading counter in %. I dont know if getting the size of the file is the right way to do that, but it was my first idea.

          1. Hmm that would be an Idea for another feature. I somehow have to get the information of the $.ajax call. Do I have to modify the ajaxify.js document for this?

          2. I wanted to built this in by myself. But when i tried it out, I realised that it makes little/no sense when HoverIntent is active. It was only meant as a design element and I dont think its necessary anymore. Thank you anyways.

  2. Hi..
    How can i handle before request and response complated events? all i want to do is show some animations before to navigate page and after navigation hide animation that showed before navigate!

    1. Hi Denis,

      thanks for your enquiry! The simplest way would be to use the built-in animations of Ajaxify.
      Would that be alright for you, or do you need to use your own?

      Please specify that briefly and I’ll be happy to show you, how to do it…

      Thanks!

  3. Hello !

    As a student I just tried your great plugin, it’s working fine πŸ™‚ .
    I added visual effect within the plugin call, so pages are animating for 400ms.

    The problem is that if a user clicks on any link (fe: to go to another page) while a new page is loading, he will get that last page but with previous page content. Additionnaly, it is not possible to reload that page content because it already is active …

    Am I missing something here ?
    Thanks for your help and the great plugin πŸ™‚

      1. Prompt answers and problem solved, perfect assistance πŸ™‚

        For those who may encounter the same issue, we disabled the plugin pre-fetching of pages on hover, by setting prefetch to false.

        Thanks again !

  4. 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. Hi Matt,

            I think I’ve done it successfully!

            Here’s the new Ajaxify file

            Please set the parameter:

            bodyClasses: true

            …in order to enable the logic you wanted…

            Cheers,
            Arvind

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

  5. 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 πŸ™‚

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

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

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

  9. 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)

  10. 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 to DaWe Cancel reply

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

Show Buttons
Hide Buttons