Interface

jQuery interface

Pre-condition

Please make sure that the following calls are after/within the jQuery Ready event.

Simplest plugin call

Interface

Place the following code anywhere you prefer

$(document).ready(function(){
    jQuery('#content').ajaxify();
});

 

Ajaxifies the whole site, dynamically replacing the div with the ID ‘#content’ across pages

If several divs should be swapped, just specify their IDs like this:
jQuery('#nav, #content').ajaxify();

The plugin can take an arbitrary amount of IDs.  The last element in the selection, according to its order in the DOM is the main content element by default.

Setting maincontent

You can override the main content element by specifying e.g.

maincontent: "#content"

That is even obligatory, if the main content element is not the last / only element of the selection.

Options default values

{
/* basic config parameters */
    selector : "a:not(.no-ajaxy)", //Selector for elements to ajaxify - without being swapped - e.g. a selection of links
    maincontent : false, //Default main content is last element of selection, specify a value like "#content" to override
    forms : "form:not(.no-ajaxy)", // jQuery selection for ajaxifying forms - set to "false" to disable
    canonical : true, // Fetch current URL from "canonical" link if given, updating the History API.  In case of a re-direct...
    refresh : false, // Refresh the page if clicked link target current page

/* visual effects settings */
    requestDelay : 0, //in msec - Delay of Pronto request
    aniTime : 0, //in msec - must be set for animations to work
    aniParams : false, //Animation parameters - see below.  Default = off
    previewoff : true, // Plugin previews prefetched pages - set to "false" to enable or provide a jQuery selection to selectively disable
    scrolltop : "s", // Smart scroll, true = always scroll to top of page, false = no scroll
    idleTime: 0, //in msec - master switch for slideshow / carousel - default "off"
    slideTime: 0, //in msec - time between slides
    menu: false, //Selector for links in the menu
    addclass: "jqhover", //Class that gets added dynamically to the highlighted element in the slideshow
    toggleSlide: false, //Toggle slide parameters - see below.  Default = off

/* script and style handling settings, prefetch */
    deltas : true, // true = deltas loaded, false = all scripts loaded
    asyncdef : false // default async value for dynamically inserted external scripts, false = synchronous / true = asynchronous
    inline : true, // true = all inline scripts loaded, false = only specific inline scripts are loaded
    inlinehints : false, // strings - separated by ", " - if matched in any inline scripts - only these are executed - set "inline" to false beforehand
    inlineskip : "adsbygoogle", // strings - separated by ", " - if matched in any inline scripts - these are NOT are executed - set "inline" to true beforehand 
    inlineappend : true, // append scripts to the main content div, instead of "eval"-ing them
    style : true, // true = all style tags in the head loaded, false = style tags on target page ignored
    prefetch : true, // Plugin pre-fetches pages on hoverIntent

/* debugging & advanced settings*/
    verbosity : 0,  //Debugging level to console: default off.  Can be set to 10 and higher (in case of logging enabled)
    memoryoff : false, // strings - separated by ", " - if matched in any URLs - only these are NOT executed - set to "true" to disable memory completely
    cb : null, // callback handler on completion of each Ajax request - default null
    pluginon : true // Plugin set "on" or "off" (==false) manually
}

Demo of visual effects below

Animation parameters (aniParams)

Default ist false (set off).
You can turn them on, by setting aniTime and passing some parameters, that override these defaults:

These will only be applied to the main content div!

{
    opacity: 1, //no fade, set to 0 for maximum fade
    width: "100%", //in percent -  "100%" means no change
    height: "100%" //in percent -  "100%" means no change
}

Other animation parameters

You can specify any parameters that are understood by .animate()

Slideshow parameters

Please set idleTime and slideTime (in milliseconds)

Toggle slideshow parameters (toggleSlide)

Default ist false (set off).
You can turn them on, by passing some parameters, that override these defaults:

{ //defaults - if not turned off completely
    parentEl: '#content', //parent element selector, where the above image(s) will be prepended - a different value might be e.g. "article:first" 
    imgOn: 'http://4nf.org/images/pinOn.gif', 
    imgOff: 'http://4nf.org/images/pinOff.gif', 
    titleOn: 'Turn slideshow off', //title tag when on
    titleOff: 'Turn slideshow on', //title tag when off
    imgProps: { marginLeft: '85%', marginTop: '20px' } //style attributes of img
}

Public methods

Jump to an internal page programmatically:
jQuery().ajaxify(URL);
e.g.
jQuery().ajaxify("http://mysite.com/about");

Access the XHR object of the $.ajax() call
jQuery.getPage('x');

54 thoughts on “Interface”

  1. Hi there,

    I’m having a bit of a problem with your script:

    Depending on what page is loaded on my website, there could be a different header file for it. For example: some pages have a slider at the top and some don’t. I also have a music player that displays on the bottom of every page regardless of which header is loaded. I’m trying to make it so the player does not have to reload.

    Is there a way to make this work?

    Thank you.

    1. Hi Brandon,

      http://4nf.org/examples/

      there are working examples, that you can study – a working example says a thousand words:

      http://radiocomercial.iol.pt/player/player.aspx

      Please have a look at the source code of the site (search for “ajaxify” in the HTML of the player’s page)

      If you have two divs to be swapped, then you can call Ajaxify like this:

      jQuery(‘#bheader, #content’).ajaxify();

      Both divs will be swapped then.
      Make sure all “static” components, like the music player, which should not be swapped every time are outside of these divs.

      Hope that helps. Feel free to place a link here to your (test) site…

      Regards

  2. Hi Arvind,

    This is great plugin. Is it possible to use the plugin to ajaxify the url`s inside a select list or dropdown? I want to ajaxify the value-attribute of all option-tags inside a select.

    tried this but without success:
    selector : “a:not(.no-ajaxy), option”
    selector : “a:not(.no-ajaxy), select[id*=”list”]”

    i suppose that it does not work because in normal url-tags the url is inside href-attribute, in select list it is inside value-attribute. Furthermore, the binded event for a normal url is click(), but a select list works only with the event change() … Any way to do it? if not, do you see a chance to implement that functionality?

    Best regards.
    Marc

    1. Hi Marc,

      on second thoughts, this really belongs to ajaxifying a form, right?
      Have a look at: http://4nf.org/forms/ and
      see it working on: http://www.oeko-fakt.de/produkte/
      (see drop-down box)

      Isn’t that what you want to do?

      If it doesn’t work “out of the box”, I would, of course be willing to modify the form ajaxification to make it work “out of the box”.

      Regards, Arvind.

      1. Hi Arvind,

        unfortunately, forms is not a sulution. In my case the select is not like a dropdown, it is like a listbox with scrollbar, produced by asp.net. ASP.net do not let me add a classic a-tag inside this listbox construct. This listbox contains 20 and more links to internal content-pages. The normal way to do that is execute the links in that listbox by a normal javascript. Because i also need the new url shown in browser-url for bookmarking, or copying, i would prefer your solution to ajaxify this urls. I try again to give a code example although this form always eats up my code:

        (select size=10 id=list)
        (option value=url1)Text 2(End option)
        (option value=url2)Text 2(End option)

        (End select)

        This select is neither inside a form nor contains a submit-button. The urls inside this listbox are executed on listbox-Index-change.Unfortunately putting the listbox inside a form with a submit-button is not really a solution.

        The same situation you have by a dropdown which is not inside a form and which has not a submit button.

        I suppose that your script works in this scheme:
        u filter the complete page for a-tags… if a a-tag is clicked, you take the attribute href and ajaxify it.

        For a listbox it would be look like this: filter for all select-elements or a select-element named by id … if the index of that select-element is changed (not clicked), take the attribute value (inside option-tag) by this.attribute.val and ajaxify it…

        i would integrate it to you script but i still not found the place where you ajaxify things in it.

        Regards, Marc

        1. Hi Marc,

          thanks for the detailled description of your use-case.
          I won’t cover this use-case “out of the box” then.
          Well, feel free to derive from the code and make your own variant.

          If successful, please consider posting it back to me, so I can share it with others.

          Cheers and regards,
          Arvind

  3. Hi Arvind,

    i want to ajaxify the url`s inside a select control like this:

    Page 1
    Page 2
    Page 3

    for this i tried:
    selector: “a:not(.no-ajaxy),select[id=’list’]”

    i also tried:
    selector: “a:not(.no-ajaxy),option”

    and so on …

    is there any way for this ? if not is it possible to implement select and dropdown control in your script?

    Best Regards
    Marc

    Update: sorry i forgot the “"-tag

    1. Hi Marc,

      whichever way you do it, I think the selection should end with an “a”.
      It should be possible.
      Please keep in mind, that you need at least one content div to be swapped in addition to the selector.

      Could you try again – thanks!

      1. Hi, sorry again for the double post.
        Thanks for your suggestion. I will give it a try and will give you feedback again.

        Best regards
        Marc

  4. Awsome plugin!
    but I found problem with 404 page and wordpress, if you try to navigate to a 404 page, it does not go and console log a 404 error and if you force it by entering the url on the browser it get stucks (white screen) when you try to navigate on the site

    1. Hi Will,

      glad you like it 🙂 Working toward a solution, what would you propose?
      If the browser gets stuck when forcing the load of the 404 page, I’m afraid that will continue to be the case,
      as I don’t know what can be done about it.

      What would you propose to be done, if the target page returns a 404?

      I can think of two variants:

      – The body of a prepared page on 4nf.org is pulled in.
      or
      – some hardcoded HTML is loaded into a content div dynamically

      Which solution would you prefer?

      Thanks!

  5. Hi!
    Thanks a lot for all the work you put into this excellent plugin!
    I try to make use of the callback-function, but so far without any luck.

    What do I need to do to be able to use it? I thought I’d just need to set the option like:

    $(selector).ajaxify({cb: testfnc});

    and define the function like:

    function testfnc(){
    console.log('test');
    }

    But I can’t get this simplest test to work. Did I miss something?
    Would the callback be triggered the same time the event ‘pronto.render’ gets triggered?

    Thanks for your advice!

    1. Hi Woeps!

      Thanks again for testing the plugin. Yes, the callback was not being called.
      Now have implemented it again, right after triggering “pronto.render”
      It should work now (I’ve tried the simple testcase you proposed above – now works)

      Cheers

  6. Your script looks promising. I’ve one question though can i use this script for my WordPress theme which would be available for sale on themeforest.net?

    1. Hi MsTrends,

      yes, you can use it for just about anything you like, as the MIT license is a very permissive license.
      Great WordPress theme site!

      Greetings

  7. Hi Arvind,

    This is great plugin.

    I want to use this plugin with MixItUP and Google AdSense.

    Ajaxify is working well but I can’t make MixItUP and AdSense work with it.

    Please help me.

    Thanks and Regards,
    Manivannan M

    1. Hi Manivannan,

      just a quick note, please see: https://github.com/arvgta/ajaxify/issues/8

      I’ve tried using Adsense without joy. It’s not due to any issues with Ajaxify
      but more of an Adsense problem…

      As far as MixItUp is concerned, it comes to my mind, that the Pronto bits of Ajaxify are lower level. Have you tried hooking into the supplied Pronto events? Ajaxify sorts out everything regarding the HTML5 History API at a low level. Maybe, if you don’t use the Pronto events, things are being done double or in the wrong order.

      Thanks!

  8. Must say plugin is awesome

    I am using the plugin but my js files are not loaded while navigating so creates a problem

    Any solution please?

    1. Hi Murtaza,

      there was a small bug in the code at the time, that I’ve lifted in recent versions – sorry.
      Don’t know whether that pertained to your use-case.

      Feel free to try again and if you have a test site, feel free to link to it 🙂

  9. Sorry about the web address, I was trying to demonstrate the problem but that site is actually a copy and not fully configured.

    If I create a simpler demonstration of my situation I will post back here.

  10. Hi Arvind,

    I hope that my question will make sense.

    I am a programmer. I am developing mostly the back end for a new website for our customer. I rely heavily on http://www.jquery.com and http://www.google.com.au for documentation and support for writing jQuery code for our website http://webexpress.capsol.com.au/intertrading/. Please note that without logging in you cannot see “products.php” which is the page where ajaxify is actually needed. However you might see that the pages don’t load properly.

    I have added the history.js plugin to our website. I have added a call to ajaxify in a script file included in like this :
    $(“#paged-content .page-links”).ajaxify(“selector”:”a”);

    The website has several php pages. Each page has the same header and scripts. e.g. index.php, about-us.php, services.php.

    I think it is important to mention that not every page has the #paged-content. However, the script in the of each page will call ajaxify() on this empty selector.

    The problem that I am seeing is that the home page will load okay but then clicking each link will not load. The url in the browser address bar will change but the page content will not change.
    However, if I continue to click pages many times, basically every link on my home page, eventually the pages will load and the site will work.

    I think that I have fixed this issue by changing my jquery script to this :
    if ($(“#paged-content .page-links”).length > 0)
    $(“#paged-content .page-links”).ajaxify(“selector”:”a”);

    So ajaxify will only be called if the selector is valid for that page.

    Do you think that this is the best solution?

    Do you think that this issue relates to whether or not the pronto script has been successfully loaded and cached by the client browser?

    The page which uses ajaxify has a div containing results from a database query (a list of products). The list is broken down into pages e.g. page 1, page 2, page 3 depending on the amount of data. The user can select the page number to view which calls ajax to download that part of the product list. Each product can be clicked on to drill down to more details about the product. When you click back from the product detail page, ajaxify will return the user to the part of the product list (page) they were last viewing. Without ajaxify(), the site will return them to page 1.

    Thanks,

    Mr Kim Groves

    1. Hi Kim,

      Thanks for your interest in the plugin!

      In the ideal case, a website will have a homogeneous structure, where the div to be swapped is the same everywhere, on each page.

      Now that your structure is a bit different, but you would like to use the plugin nonetheless, I suppose your fix is valid, yes. You will obvioiusly not have ajaxified clicks on pages that do not have the div #paged-content.

      Can’t see your site at the moment because it is down for maintenance…

      Regards, Arvind.

Leave a Reply

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

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