Introduction

Pre-conditions

Introduction

Most websites have the following page structure:

  • Header
  • Sidebar(s)
  • Content
  • Footer

…where only few divs vary significantly.

In the next sections you’ll find out how to load the varying divs only with this plugin,

avoiding a full page refresh and the associated full round-trip and creating awesome page load time.
When ajaxifying a site, quite a few things have to be taken into account which this plugin takes care of… So it’s an entire Ajax framework!

22 thoughts on “Introduction”

  1. Hi there Admin..
    First of All, Congratulations on this awsome plugin you had created! Really great and powerfull!..
    But I believe that I’m doing something wrong, I’ve read all your plugin documentation to try to find a solution, but I belive that i’m missed in some important detail!..
    Let me try to explain my issue!
    I’m creating a simple web app in PHP with Codeigniter Framework
    and for sure i’m using the MVC design patterns for CI, no big deal at all!

    I have my website templates constructed in this way:
    $this->load->view(‘site/head’);
    $this->load->view(‘site/home_view);
    $this->load->view(site/footer);
    $this->load->view(site/scripts);

    As you can see, my scripts are different for each page, i have some scipts that are used for all website pages, and the scripts for some specifically pages are loaded in footer view page….
    My issue is…. when I’m loading my first page, dashboard, that has a lot of jascripts to create some graphs and charts for my system is everything fine and working.. and then, when I gonna to another page it’s loaded fine with ajaxify.. the page is loaded, but I see a lot of errors bug in my firebug the error message say:

    jquery-2.1.4.min.js:2
    Uncaught Error: tile data is missing. Are you missing a call to rebind or destroy? You may also be able to avoid this error by calling stop or pause

    It seems like my last page it is making a loop internally and isn’t stoped and pause correctly…

    and another issue is that my page is not loaded completely, the footer and another plugins like calendars, images carrosel, image lightbox, and everything else is missed, And it seems that the scripts for the new page aren’t loaded correctly!..
    Have you any idea how can I fix this issue?! Or even if i can verify if all content and all scripts of the next page are really loaded and then opening the page complete and with all functions were loaded correctly!!
    I’m sorry, but unfortunatelly I dont have any link to show you my project, I’m working in my localhost with WampServer.. have you an email or skype that we can talk easily

    1. Hi James,

      glad you like it – thanks for the very positive comment!
      Just some quick feedback:

      – Sure, you can contact me at arvgta@gmail.com
      – Not sure, whether Ajaxify performs the same on localhost…

      Please write me an email and we can chat in the background.
      But in a nutshell, I would suspect that you really have to upload your site to an online test environment for Ajaxify to work properly.

      Regards

  2. Hi! – Great plugin. Is it possible to have two different navigations? Like a primary one and a secondary one?

    Thanks!

  3. Do you have any tutorials for beginners? I really want start using your plugin but i don’t know how to start ? Do you have any example (step by step tutorial) ?

    1. Hi Konrud,

      thanks for your interest in the plugin!
      Of course, the documentation throughout 4nf.org is supposed to make it easy to adapt Ajaxify.

      Maybe have a look at the examples/demos and choose an easy one to learn from…

      Cheers!

    1. Hi Shahbaz,

      Thanks for using Ajaxify and both questions – I will get back to you asap…
      Just for clarification – the question about the hash in the URL – you mean a standalone “#”, right?
      Which behaviour would be desirable in that case?

      And as for the target="_blank" directive, I suppose it’s being ignored altogether in the current version and the new page being shown in the same “page”?

      I could imagine selecting out links with target="_blank" in the selector property just like those with class "no-ajaxy” are selected out?

      Cheers!

        1. Hey Shahbaz,

          that’s good news – thanks!
          What error exactly is thrown in the case of href="#" ?
          And what behaviour of Ajaxify would be desirable?
          The page should stay the same, but would you like a refresh?

          Please try out the following override, instead of placing .no-ajaxy everywhere:
          selector: "a:not(.no-ajaxy):not([target='_blank'])"

          which is enabled in this test file

          Do you think, that I should make the above selector value default?

          Thanks!

        2. thanks, Yes , by default this should be enabled, i.e open hyperlink with attribute _blank in new page. Many thanks

          1. Hi Shahbaz,

            I have made that behaviour default (open target="_blank" links in a new window).
            Please test against the newest version!

            Leaves us with the issue: href="#"
            What behaviour would you like in that case?

            Thanks!

  4. Hi,

    Your plugin is just amazing. I am facing some problems.
    Fist of all if you see my site there is an error
    TypeError: e is undefined , Can you please tell me why is it?

    Second please guide me that how I can perform error handling for 404 error code?
    I want to redirect to a 404 page, of course with ajax
    Many thanks

    1. Hi,

      glad you like it 🙂 Concerning the first error, could you please retry with this new version?

      Concerning the 404 issue, just override your default 404 page to have a content div.
      It should work then (ajaxified).

      Thanks and
      Regards,
      Arvind

      1. Hi,
        Thanks for your response, I have updated plugin as you suggested, but now Javascript do not re-execute whenever a new page is loaded, Do I have to add any option? I am using default options of plugin,
        jQuery(‘#ajaxArea’).ajaxify();
        P.S: I do not include javascript files inside head tag,

        Kindly guide me through, I will be very great full to you 🙂

        Regards

      2. Hi,
        I think there is an error in plugin, or may be Its my fault, This is what I see in the console
        TypeError: e(…).offset(…) is undefined
        I think this is the reason javascript is not not working.

        Many thanks that you are helping me out.

        Regards

        1. Hi,

          this is ideally what you should see in the console – no more, no less:
          “Ajaxify loaded…”

          Ajaxify does not re-execute on every page load!

          I think the error occurs, because you have a standalone hash in the URL, like this:
          http://xvelopers.com/html/werock-test/#

          Yes, this could be regarded as a bug in the plugin. It should obviously not react to simple hashes in the URL. I will fix that and post back!

          However, I have no idea, why the URL in the browser is not updated.

          Finally, the behaviour your example is as if “preview” is enabled?

          Thanks and
          Regards

      3. Hi,
        Many thanks, With your help now my site is ajaxified 😀 , I used “pronto.render” event
        to re-execute js code, is this right approach?
        I will post my site in your gallery list after finishing it 🙂

        Regards,

        1. Hi,

          that’s great! Yes, you can use the “pronto.render” event to re-trigger JS that should be re-fired each time around – exactly!

          Please give me a “buzz” once you’re finished…

          Regards

  5. hi,
    i’m using asp.net with Kendo ui and i’d used the text/template in script tag
    and do some server based operations via ajax and pagemethod with scriptmanager,
    and i’d linked your ajaxify.js it will show error on template rendering and server based operations

    could you please tell me the issue where i’m wrong

Leave a Reply

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

Copyright 2005-2016, 4nf.org. All rights reserved.
Latest update: 17. November 2016