Pass: 0

Interface

Jump straight to options

Preface

Interface

  1. Please choose and implement a method of installation first
  2. Then choose and implement a method for calling Ajaxify as indicated below

Full body swap

let ajaxify = new Ajaxify();

When no value for elements is specified, ajaxifies the whole site, dynamically replacing the whole body across pages.
(Might be a good starting point)

ID selection

(Allows you to specify the elements that you would like to be swapped only)

let ajaxify = new Ajaxify({elements: '#content'});

Ajaxifies the whole site, dynamically replacing the element with the ID “content” across pages

If several elements should be swapped, just specify their IDs like this:
let ajaxify = new Ajaxify({elements: '#sidebar, #content'});

The plugin can take an arbitrary amount of IDs

Options default values

{
//	basic config parameters
	elements: "body", //selector for element IDs that are going to be swapped (e.g. "#el1, #el2, #el3")
	selector : "a:not(.no-ajaxy)", //selector for links to trigger swapping - not elements to be swapped - i.e. a selection of links
	forms : "form:not(.no-ajaxy)", // selector for ajaxifying forms - set to "false" to disable
	canonical : false, // Fetch current URL from "canonical" link if given, updating the History API.  In case of a re-direct...
	refresh : false, // Refresh the page even if link clicked is current page
 
// visual effects settings
	requestDelay : 0, //in msec - Delay of Pronto request
	scrolltop : "s", // Smart scroll, true = always scroll to top of page, false = no scroll
	scrollDelay : false, // Minimal delay on all scroll effects in milliseconds, useful in case of e.g. smooth scroll
	bodyClasses : true, // Copy body attributes from target page, set to "false" to disable
 
// script and style handling settings, prefetch
	deltas : true, // true = deltas loaded, false = all scripts loaded
	asyncdef : true, // default async value for dynamically inserted external scripts, false = synchronous / true = asynchronous
	alwayshints : false, // strings, - separated by ", " - if matched in any external script URL - these are always loaded on every page load
	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 element, instead of "eval"-ing them
	intevents: true, // intercept events that are fired only on classic page load and simulate their trigger on ajax page load ("DOMContentLoaded")
	style : true, // true = all style tags in the head loaded, false = style tags on target page ignored
	prefetchoff : false, // Plugin pre-fetches pages on hoverIntent - true = set off completely // strings - separated by ", " - hints to select out
 
// 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 : 0, // callback handler on completion of each Ajax request - default 0
	pluginon : true, // Plugin set "on" or "off" (==false) manually
	passCount: false // Show number of pass for debugging
};

Precautions

  • When calling Ajaxify from within an inline script, please make sure, it is the only statement and definitely contains the following string:
    "new Ajaxify("which avoids unwanted recursion
  • When calling Ajaxify from within an existing script, please make sure it has the identical path across pages

Setting alwayshints

You must specify any files to be loaded each time around by setting alwayshints or data-class=”always”

Optional visual effects

…then…

Public methods

Principally, you can access any subclass directly, if you know what you’re doing – the following are but a few examples:

Jump to an internal page programmatically:
ajaxify.pronto(0, URL);

e.g.

  • ajaxify.pronto(0, "https://mysite.com/about");

Access the XHR object of the central fetch()

  • ajaxify.getPage("x");

154 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,

      https://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: https://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!

      Thanks – glad you like 🙂

      Give us a link to your test site and I’ll have a look…

      Regards

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

Show Buttons
Hide Buttons