Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with push.js #850

Open
Toomavic opened this issue Nov 30, 2016 · 18 comments
Open

Issue with push.js #850

Toomavic opened this issue Nov 30, 2016 · 18 comments

Comments

@Toomavic
Copy link

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
Copy link

peterel commented Dec 14, 2016

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

@Toomavic
Copy link
Author

we are shouting in a desert land :(

@Johann-S
Copy link
Member

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

@peterel
Copy link

peterel commented Dec 15, 2016

@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
Copy link
Member

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
Copy link
Author

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

@andresitodeguzman
Copy link

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

@Toomavic
Copy link
Author

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
Copy link

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

@mike-nelson
Copy link

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
Copy link
Author

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

@eradin
Copy link

eradin commented Jan 12, 2017

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
Copy link

mike-nelson commented Jan 12, 2017 via email

@Toomavic
Copy link
Author

@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
Copy link

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

@eradin
Copy link

eradin commented Jan 24, 2017

@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
Copy link

mazong1123 commented Feb 13, 2017

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
Copy link

Je veux contribuer au projet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants