How to use

Recommend this page to a friend!

      JS AJAXify PushState  >  All threads  >  How to use  >  (Un) Subscribe thread alerts  
Subject:How to use
Summary:where to place in page
Messages:10
Author:Terry Woody
Date:2017-01-16 12:17:53
 

  1. How to use   Reply   Report abuse  
Picture of Terry Woody Terry Woody - 2017-01-16 12:17:53
This looks like a very useful class.

I guess it is obvious to most, but how do you use? Where to place js file?

Does it need jQuery?

Thanks!

  2. Re: How to use   Reply   Report abuse  
Picture of Martin Barker Martin Barker - 2017-01-16 19:59:08 - In reply to message 1 from Terry Woody
Hi So you need to download the class ajaxify.js from https://www.jsclasses.org/browse/file/16115.html you then put it in your websites public directory normally in a JS or script folder.
E.G
/public_html/index.html <-this is the path to your index on your FTP server.

you would put it in /public_html/js/ajaxify.js if the js directory does not exist create it.

then in your pages you would add the followng code to inside the <head> tags of all your pages
<script type="text/javascript" src="/js/ajaxify.js"></script>

then on all of your pages again inside the <head> tag add the following
<script type="text/javascript">
var state = new AjaxifyPushState();
</script>

And thats it it does the rest. it does not require any anything like jQuery or MooTools it's all native Javascript.

  3. Re: How to use   Reply   Report abuse  
Picture of Terry Woody Terry Woody - 2017-01-16 20:50:07 - In reply to message 2 from Martin Barker
Thank you Martin. Got all the other down, was just not sure about the dependencies and usage on page.

  4. Re: How to use   Reply   Report abuse  
Picture of Niek Mollers Niek Mollers - 2017-02-07 01:03:24 - In reply to message 2 from Martin Barker
Hi Martin,

I suppose that there is something wrong in your code:

I have a SPA site. After entering the code as you explained, i get the message:
Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined
at new AjaxifyPushState (ajaxify.js:27)
at new AjaxifyPushState (ajaxify.js:17)
at index.html:17

After changing
var state = new AjaxifyPushState()
in for example
var state = new AjaxifyPushState({"Ajaxify": true})
the message does not appear anymore.

After changing the code to:

inSettings = typeof inSettings !== 'undefined' ? inSettings : '';
if (inSettings !== '') {
for (var key in self.settings) {
if (inSettings.hasOwnProperty(key)) {
self.settings[key] = inSettings[key];
}
}
}

The message does not appear, even not with
var state = new AjaxifyPushState()

  5. Re: How to use   Reply   Report abuse  
Picture of Edilberto Edilberto - 2017-02-07 13:27:29 - In reply to message 1 from Terry Woody
Hola me parece muy interesante este paquete AJAXify PushState, lo he incluido en el <header>
pero no se como usarlo en el <BODY>.
Por favor podrķas crear un ejemplo ???

Gracias,

  6. Re: How to use   Reply   Report abuse  
Picture of Terry Woody Terry Woody - 2017-02-07 14:28:29 - In reply to message 4 from Niek Mollers
I never got it working either.

Setup, saw all error message in dev console and gave up.

  7. Re: How to use   Reply   Report abuse  
Picture of Niek Mollers Niek Mollers - 2017-02-07 17:44:29 - In reply to message 6 from Terry Woody
Hi Terry,

It's not working with me either. I have two more questions for Martin:

1. at line 13 : this.output = function(content)

I don't see how the class can get thye content. I suppose it is meant to be the HTML-code to import in the "element", but don't see how to do that.

2. Martin explained the lines to enter into the header, but I am not sure what to do in the body.

The functionality is promessing, so I am still very interested in getting it in work.

  8. Re: How to use   Reply   Report abuse  
Picture of Martin Barker Martin Barker - 2017-02-28 13:08:37 - In reply to message 7 from Niek Mollers
Hi, It gets the content from the links in your page it sends AJAX request to the URLS to get the page content.

E.G

<a href="/blog"></a> The javascript interfers with the click event and stops it navigating it then uses ajax to download the page content on /blog and then updated the DOM and URL accordingly.

the this.output function go though the given element selector and removes all child elements from that item. and adds the content it is passed as a variable from the ajax request.

the output function is then like `this.output(this.responseText);` from inside the `this.downloadPage` method, `this.downloadPage` method is called from `this.linkClick` method that does some checking to make sure it does not try and download an external site's content. this is attached the `<a>` elements in a page inside `this.prepairLinks` which is automatically called by the new instance of AjaxifyPushState being created

  9. Re: How to use   Reply   Report abuse  
Picture of Terry Woody Terry Woody - 2017-02-28 13:20:51 - In reply to message 8 from Martin Barker
Thank you again for explaining Martin.

I will give it another go in few days. Like to see it working on my end, would be a great feature to use!

  10. Re: How to use   Reply   Report abuse  
Picture of Martin Barker Martin Barker - 2017-02-28 19:14:14 - In reply to message 9 from Terry Woody
Just to inform you all i have done some testing and updates to this system to make the implementation better and quicker on the browser, added some self executing code to help the implementation going faster i have also implemented your Fixes from this forum post so thanks for that they are added.