Pajax: Ajax page loading plugin

[5wooley4]

Pajax you the ability to load content via ajax. It's still in beta and I do plan to add a few more features, such as a whitelist / blacklist. But this is what I have so far.

DEMO
http://pajax-stable.ericwooley.com/

Edit: Link to extend hosting - http://get-simple.info/extend/plugin/pajax/412/

[mikeh]

I just wrote a new plugin which gives you the ability to load content through ajax instead of clicking. It's still in beta and I do plan to add a few more features, such as history. But this is what I have so far.

http://ericwooley.com/projects/pajax/

I have it setup on my site as a demo, however, I don't really want that functionality on my site so eventually I will be making a demo site, but for now you can see how it works on my site.

Great! Thanks for your contribution.

[ccagle8]

agreed... very nice!

[5wooley4]

I just released a major update to this, and I have developed it a lot more than I thought I would have.

It has grown to be quite complicated, and while it seems to work for me, I am the author and know exactly how everything works. If anyone out there could try it out and let me know if any part of it is unclear or doesn't work like they think it should, I would appreciate it very much.

However, school is taking up much of my time, so i probably won't be able to do a whole lot more development unless there are any bugs or minor tweaks that need attending.

Good luck with your websites!

[datiswous]

Hi,

I checked the demo: http://pajax-stable.ericwooley.com/

When I click on the links on top the pages get loaded... I didn't think it page loading looks different than most websites. What is it I should see that is different because of the use of Ajax?

[5wooley4]

Hi,

I checked the demo: http://pajax-stable.ericwooley.com/

When I click on the links on top the pages get loaded... I didn't think it page loading looks different than most websites. What is it I should see that is different because of the use of Ajax?

Sorry I disabled it temporarily and forgot to turn it back on. Thanks for the alert!

[datiswous]

Cool!

I was thinking... If Ajax would be used in GS-admin the page doesn't have to reload after edit (or is this a false assumption?). Would also be handy for the theme editor, since reloading moves the cursor to the top.

[5wooley4]

Cool!

I was thinking... If Ajax would be used in GS-admin the page doesn't have to reload after edit (or is this a false assumption?). Would also be handy for the theme editor, since reloading moves the cursor to the top.

That is not a false assumption, and making the settings use ajax would be in the correct spirit of the whole plugin. I will add it to the queue of things to do for pajax.

I'm not a big fan of the theme editor either. I was thinking a making a plugin for that too. The plugin would use ajax and would utitilize ace cloud9 editor http://ace.ajax.org/ . It may take me a while to get to that though. Its getting close to the end of the semester for me and all the teachers seem to think its a good idea to save all the work/projects until the end of the semester.

EDIT: I didn't remember the theme editor being so nice. So I will go ahead and create an ajax saving mechanism.

[5wooley4]

My class was canceled this morning so I went ahead and added the ajax thing. Let me know what you think!

Also I created the other plugin you were hoping for. Its a replacement theme editor based heavily on the original. It basically just added ajax functionality. And i need some beta testers if you are interested.

http://ericwooley.com/thajax-beta/ or http://get-simple.info/forum/post/25683/#p25683

[soy]

Very nice plugin But it does not work for me...

My structure is like

Code:

Blablabla

<header>
   <blabla ... /blabla>
   <nav>
       <ul id="navigation">
             <?php get_i18n_navigation(return_page_slug(),0,0) ?>
        </ul>
     </nav>
     <div style="clear: both;"></div>
</header>

<section id="pagecontent">
        
               <h1><a href="<?php get_page_url(); ?>" title="<?php get_page_clean_title(); ?>"><?php get_page_clean_title(); ?></a></h1>
            <?php get_page_content(); ?>
          </section>

blablabla

So I've added in the settings:
Jquery object which contains all of your links: #navigation
Jquery object which contains the page title: header
Jquery object which the new content should be loaded into: #pagecontent

As you may guess I am using the i18N plugin for multiple languages!

[5wooley4]

Navigation should be `#navigation a` without the tics.

Unfortunatly, the page title needs to have an id to load the title into, so if you modify your page to the following:

Code:

<section id="pagecontentWrapper">
        
               <h1 id="PageTitle"><a href="<?php get_page_url(); ?>" title="<?php get_page_clean_title(); ?>"><?php get_page_clean_title(); ?></a></h1>

            <span id="pageContent"><?php get_page_content(); ?></span>

</section>

Then use #PageTitle for the page title

and #pageContent for the content.

Im not sure if it will work with i18n navigation, I will check it out and get back to you.

[5wooley4]

i18n navigation does work with pajax, so that probably isn't the problem.

[soy]

Hey, thanks for the fast reply!

Now my settings are these (screenshot). I've updated my code as you recommended (sorry, totally missunderstood the workprogress of your plugin)

Code:

<header>
            <nav>
                <ul id="navigation">
                    <?php get_i18n_navigation(return_page_slug(),0,0) ?>
                </ul>
            </nav>
        </header>

<section id="pagecontent">
               <h1 id="pagetitle"><a href="<?php get_page_url(); ?>" title="<?php get_page_clean_title(); ?>"><?php get_page_clean_title(); ?></a></h1>
            <span id="realcontent">
               <?php get_page_content(); ?>
                       <div class="breadcrumbs">
                            <a href="<?php echo find_url('index',null); ?>">home</a>
                             <?php get_i18n_breadcrumbs(return_page_slug()); ?>
                       </div> <!-- .breadcrumbs -->
             </span> <!-- realcontent -->
          </section>

and it still does not work :/ where is my mistake?

[5wooley4]

Those settings seem to be ok. did you include jQuery? If you did try turning it off. If not try turning it on. have you ever used firebug before?

Could you paste what the head off your document looks like? IM thinking jQuery may be getting loaded twice out not at all.

Sorry for any spelling or grammar errors, I'm topping this from my phone.

Edit: If you loaded jQuery your self, make sure it's included before you call the get simple headers

[5wooley4]

Tomorrow I will see if i can create the 'theme installer' feature which would take care of this for you. Ill pm you when i get it working. I've got it all planned out, so it shouldn't take too long.

[soy]

Thanks once again for your support. Of course I use firebug
Actually, I try to keep my site as fast as possible! And one big helper is to put javascript at the button, so did I. But even if I check "include jquery", so that it starts with my other <head>-scripts, it does not work for me!

Code:

<meta charset="utf-8">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<meta content="index, follow" name="robots">
<link href="http://soyludico.de/gs/theme/get-theme/css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js">
<script src="http://soyludico.de/gs/theme/get-theme/js/libs/modernizr-2.5.3.min.js">
<link href="http://soyludico.de/gs/de/leistungen/" rel="canonical">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script src="http://soyludico.de/gs//plugins/pajax/js/jquery.ba-hashchange.min.js">

I send you a message with my pagelink. Although it may be interesting for your plugin to be speed optimized as well, so for example include a minified js version (:

Keep up your awesome work (as long you have fun with it)

[ccagle8]

bug found: when installing in a subfolder, the animation images do not show. I believe it's because you need to specify global $SITEURL in the function pajaxSettings()

[5wooley4]

bug found: when installing in a subfolder, the animation images do not show. I believe it's because you need to specify global $SITEURL in the function pajaxSettings()

Thanks, Ill fix that right now.

Thanks once again for your support. Of course I use firebug
Actually, I try to keep my site as fast as possible! And one big helper is to put javascript at the button, so did I. But even if I check "include jquery", so that it starts with my other <head>-scripts, it does not work for me!

Code:

<meta charset="utf-8">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<meta content="index, follow" name="robots">
<link href="http://soyludico.de/gs/theme/get-theme/css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js">
<script src="http://soyludico.de/gs/theme/get-theme/js/libs/modernizr-2.5.3.min.js">
<link href="http://soyludico.de/gs/de/leistungen/" rel="canonical">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script src="http://soyludico.de/gs//plugins/pajax/js/jquery.ba-hashchange.min.js">

I send you a message with my pagelink. Although it may be interesting for your plugin to be speed optimized as well, so for example include a minified js version (:

Keep up your awesome work (as long you have fun with it)

Ill push out an update real quick and change where it puts the script and fix the animation problem. your right in that it should be at the bottom, I've just had my scripts at the since i started, kind of a bad habit.

[5wooley4]

bug found: when installing in a subfolder, the animation images do not show. I believe it's because you need to specify global $SITEURL in the function pajaxSettings()

global $SITEURL was already defined,

did you mean putting the whole site in another folder, eg 'www.yoursite.com/getSimpleInstall'? or putting pajax in a folder, eg: 'getSimpleInstall/plugins/somethingElse/pajax'?

Are you using 1.3.2? It works when I drop the site in a folder, however, it was adding an extra '/' in the url which may be screwing it up depending on your server configuration. I fixed that. Ill upload the update in few minutes.

[alienee2]

Hi - i tried the plugin and I think it could be used on a template conversion i'm currently doing; the only issue now is that for some reason the scripts load after the closing html tag...not sure why this is;

thanks for your help!

-marc

Edit: i'm looking at your demo site and it is doing the same thing... shouldn't the scripts load before the closing body tag?

or is there a way we can get this code and add it somewhere else, in the functions of the theme or in a js file...

-ma

[5wooley4]

Hi - i tried the plugin and I think it could be used on a template conversion i'm currently doing; the only issue now is that for some reason the scripts load after the closing html tag...not sure why this is;

thanks for your help!

-marc

Edit: i'm looking at your demo site and it is doing the same thing... shouldn't the scripts load before the closing body tag?

or is there a way we can get this code and add it somewhere else, in the functions of the theme or in a js file...

-ma

It loads after the </html> because I chose to put it there, so that your content would load as quickly as possible. Then the pajax code would kick in after everything was loaded.

I'll push an update to allow you to choose between the head or the end of the document. But it may take a few days, I am swamped with projects for classes.

[Ad_Ok]

Hi! I've found the bug: it doesn't working in IE! The cause of this is in the line #275: console.log("Page should be loading... "+href);
Comment this line - it's enought!

[twobob]

How do you include updates to a sidebar?
<?php echo '<span class=" something "><?php include('sidebar.php');echo '</span>'; ?>

sorta thing?

[b3n.ji]

Hey there,

first of all: nice plugin, thanks for that!

But I have a few questions / issues:

- I'm using some other plugins, eg I18N gallery and with

Code:

(% gallery name=galleryname %)

it's not loading the gallery but just showing the same line on the page
- Is there any way to get the page title displayed correctly as it was working without the plugin? Currently it stays showing the main page title, eg 'Main Page < Page'
- Is there any way to get the page slug instead of the page title being added to the URL? http://test.com/#page-slug instead of http://test.com/#Page|-|Name

I would really appreciate if someone has some ideas

Thanks in advance!

[5wooley4]

I wrote this during summer and since school started, I have not had time to update it as i should.

I made it open source, in case anyone wants to update it or anything.

https://github.com/5wooley4/Pajax