Issue with push.js

[Toomavic]

when I move among pages using push.js , I found that the actual JavaScript of every page is not loaded again.

Is there is any way to solve it ?

[peterel]

Im facing the same issue. Any tips would be appreciated.

[Toomavic]

we are shouting in a desert land :(

[Johann-S]

We cannot help you if you don't share any code in a CodePen or JSFiddle

[peterel]

@Johann-S This is not a matter of showing code to solve a specific problem. The problem description is clear. I think this is more the matter of if this repo is maintained anymore or not? Last commit was 9 months...

[Johann-S]

The description is clear but I cannot find a bug in a text sorry, so when you post an issue which report a bug you have to demonstrate the bug.

Maybe this repo isn't maintained anymore but maybe we can help @Toomavic to find a solution

[Toomavic]

I have no problem in coding, My issue is clear , so Is there any way to solve it !! please

[andresitodeguzman]

Don't use push. It messes up the whole thing.

[Toomavic]

The only reason I am using ratchet that, because push.js it makes user feeling like native app
but now I removed it from my project

[andresitodeguzman]

It messes up the entire thing as it doesn't show all the changes in the next page.

[mike-nelson]

I bastardised PUSH to just transition between DIVs already existing on the page. Why would you want to load pages (basically synchronously as you wait for it to load after tapping the button) in an app? What if it's already loaded, what if there are scripts, it's all a lot simpler if you just use it to swap content and use the nice slide transition.

[Toomavic]

No , I need more explanation about that! please :D

[eradin]

I just built a prototype of my existing web app using ratchet. At first I thought it rather spartan but I have gotten it to work with a little design planning and I really like it's leanness compared to Jquery Mobile.

You are correct that that header files don't reload on push. In most cases that is not a problem. The secret is to create one js file (e.g. site.js) that contains all of the code for the site. This will load on the index page and stay resident in the dom. You than need to listen on the push event and do the following:

1. On the content tag of each page, I added an attribute like data-page=""
2. In your push event handler, get the data-page for the new page and call a specific function that processes the init code for that page (you could use a switch or if-then-else or whatever else works). In that function you would set up ajax handlers or anything else you would normally do for that page.
3. The reason you want a function for each page is you will also want to call that function when the first page loads (e.g. index.htm) since push events are only invoked on touchend events. If other pages can be landing pages, you should make sure all header tags are included in those as well. There is no harm in copying the index.htm headers to all files.

The file can grow but the "web site" runs very fast, much like a native app. If you structure your site.js file well, it's very maintainable. When testing, just make sure you do ctl-refresh if you change the js file otherwise the changes may not make it into the dom and your frustration level will rise.

Sorry for not being able to codepen this but I just don't have the time. Perhaps I will throw something together in a couple weeks. I hope this helps.

[mike-nelson]

Yes this is a good approach and very similar to mine, its something you need to add yourself that ratchet doesn't cover - being more a visual framework than a structure framework. Cheers Mike Mike Nelson // CEO (and Developer) beweb // P 09 3077042 // M 027 4403757 Listen to email safely while driving with www.speaking.email

…

On 13/01/2017, at 9:32 AM, eradin ***@***.***> wrote: code

[Toomavic]

@eradin thanks for your explanation , and by the way we don't need any code to explain, we just discussing how to do structure.
for me I find your solution is closer to mine (in concept only),
let's say I have index.html, home.html and profile.html, and each page contains individual js file for it
index.js, home.js and profile.js.
then I started to listen to push event in the 3 pages
after I put the content of the js page itself again in the callback function of listening , so that I make sure that they will be invoked at time of push event take place.
but I didn't find that helpful, there should be a good way of maintaining this issue like ionic for example
they use the concept of push and pop pages, they consider the view as a stack of pages so I can navigate easily to any page
so I give up the idea of adding ratchet to my project

[xprogrammerx]

i give up the idea of adding ratchet to my project too bro.. same issues

[eradin]

@Toomavic I understand your concern. My current implementation is with jquery mobile and I used your approach for that implementation (the typical separate js files for separate pages). It uses a similar ajax caching scheme as ratchet (that you can turn off) and this made it difficult to debug code. I solved the problem by putting my independent js files in the body of the page as opposed to the header section. This way it gets loaded and run each time an ajax load is done. I suspect you could do the same with ratchet, put your js reference in the content part, that way it would load and run on a push event. I'm just concerned with the jquery mobile bloat and it's lack of ongoing development. I really like ratchets light weight and android/ios look. But it is really designed for a single page web app and that takes a little getting familiar with. For larger projects, the single js file can get rather large. Perhaps break them into separate files and merge them with a build tool.

[mazong1123]

Actually, I resolved the page transition management issue of Ratchet.js in my forked project https://github.com/mazong1123/ratchet-pro

The basic idea is similar to @eradin besides I've integrated it into RatchetPro framework. I've added cache for page transition so that you won't worry about performance. Below is a simple example:

Your html would like:

<body>
    <div class="content" data-page="index">
    Put page content here.
    </div>
    <script src="scripts/app-index.js"></script>
</body>

And this is your js:

(function () {
    // Change the settings here if you want.
    //window.RATCHET.Class.PageManager.settings.pageEntryScriptPath = 'scripts'
    //window.RATCHET.Class.PageManager.settings.pageEntryScriptPrefix = 'app-'

    var rachetPageManager = new window.RATCHET.Class.PageManager();
    rachetPageManager.ready(function () {
      // Put your code here.
    });
})();

A quick live example is at (Mouse support is enabled ): http://mazong1123.github.io/

[Tresor-Kasenda]

Je veux contribuer au projet