Force Framework7 to Not Remove DOM Elements of Previous Pages - javascript

It seems that Framework7 remove DOM elements of previous pages and only keep the previous one. This is problematic since the state is loss as not all interactions are stored in the backend. For example:
Page A > Page B ---> Nothing is removed
Page B > Page C ---> Page A is removed
Then when user click back twice, Page A only shows up only if Page A was fully loaded before addView() function is called. If Page A is loaded afterwards, user will not be taken back to Page A.
Is there any suggestion on how to solve this issue? I looked at the API document and didn't see any option to make sure this doesn't happen.
Update
I managed to get it to go back to Page A by making sure div[data-page] exists before the view is loaded. However, it completely lost the state when returns back to Page A, which is completely useless. Without being able to disable this behavior, I will have a lot of extra code to store every interactions taken by user whether it's done in UI or backend. Let me know if you have any suggestions.
Update 2
I also reported the issue on GitHub. The framework should cache final state of the page rather than original state.
https://github.com/framework7io/Framework7/issues/1985

Related

How does Vue.js render page happens?

It really scares me that I might want to know this thing so much. That's the whole essence of SPA (Single-Page Application). I am curious about Vue.js rendering pages. I will list some of my knowledge and If I'm wrong, please correct me. Things I think I know:
There's a which might be a tree-structure parsed from html.
Then, DOM RENDER TREE IS constructoted from css and that DOM-TREE
After that, rendering page means data is shown on the screen.
What about Vue.js? I know it has virtual DOM. If I change something with Javascript in Vue.js, the real change happens in virtual DOM because it's faster and then syncing with the real template happens. If all that is right(if wrong, please tell me) then my question is the following:
When I use Vue Router and click some link to change the page, When new page gets shown, beforeMount() is called, then if i click back button to go the previous page, beforeMount() is called also. When using Vue Router and back button, does page rendering happens again or it's saved somewhere and to make it faster, it gets all the html from cache? So If I go to some page, then click back or Vue Router link, and page rendering starts from scratch, why would it be fast?
In my opinion, page rendering happens when there's some data changed or it's the first time I am accessing that specific URL. For the second time accessing, if data has not changed, it doesn't render the page from scratch. What do you think ? Thank you.

JS/Jquery: Initiate window resize without actually resizing

So I have a very specific problem that presented itself recently (right before our planned launch day tomorrow) and I am not completely sure how to solve it. I have built our website of an HTML-template with my modest front-end skills and we are very pleased with it. However, I can't seem to solve this.
The problem:
I have a filter system that allows a user to filter articles that are presented on a page. A user can even fill in this filter on the home page, direct to the page with the articles and have the filter applied. However, if then the filter is broadened (less strict) and new articles present itself, the pictures do not show up. Found out this is the case because the flexslider behind it has to be initialized again which happens on a window load (e.g. when the window is resized). The function that controls the initialization of the flexslider is in an external js file and I am not sure whether I can call on it from my own custom.js file, so I am thinking of just calling a resize/reload window function to active it.
The question:
Can I run a resize window function (or something that activates the flexslider) without hindering user experience (more specifically, without ACTUALLY resizing/reloading the window)? I will run this on a change in the filter.
I know this is a very specific question but hopefully somebody can help me out.
Take care!
p.s. it would be ideal if I could run the actual function that loads the flexslider but this is located in an external js file.
EDIT:
Briefly some additional info. If I go straight to the article page, it has no filter active and thus shows all articles, if I then start flipping through the filter, all is good. It is however only if I arrive from the homepage with a set filter that the problems arise. You then arrive on the article page which shows only the articles that are within the boundaries, and when the filter is taken away it has problems loading the images of the new articles showing up. As if it had not loaded these because they were not open on window load the first time.
You can trigger a resize event by creating a new event and passing it into the dispatchEvent command on window. There's a nice guide here. You'll want the type of event to be resize, since that's what it's listening for.
window.dispatchEvent(new Event('resize'))
This will work for events that were added via jQuery as well as events added via addEventListener.
I managed to solve it after all by delaying the function that drops the filter values into my inputs so it loads in all images initially before applying the filter. It happens at such speed it's hardly noticeable.
Also, I did try to initiate a window resize function, it did work without actually resizing anything, but unfortunately the images did not load in properly (overlap and such).
Anyway, it has been solved. Thanks for all the input!

Javascript state is saved when using back button to get to page

I am using Firefox, and I have noticed something interesting while working on my website. One page has a table of information, but also maintains Javascript variables indicating the table's contents so it can look up information more easily.
When I navigate away from the page by typing in a URL, then hit the back button to return, I have noticed that the page seems to retain its state. The table still has the same contents as when I left, and further interactions with the page indicate that the Javascript variables have maintained their values as well.
I had assumed that my $(document).ready(); functions would run again when the back button was hit, but this is clearly not the case as I wrote those functions to ensure the page is its initial state, regardless of the page's current content.
I think it is perfectly acceptable for the page to be restored this way as long as I can depend on the page being restored properly. If instead, the page is restored to its initial state, that would be acceptable as well.
Is it safe to rely on this behavior? Would I be better off using something like onunload to ensure that the page's state is not saved? Should I just assume the browser will do things properly?
I would say that my website's state is defined by the HTML on the page and the contents of Javascript variables. It uses AJAX (or I guess technically AJAJ) to interact with PHP pages, but all interactions are discrete transactions. The only state/session needed by the server are login authentication cookies, which should be unaffected by this.

what happens when i refresh a jquery mobile page

What happens when a JQUERY MOBILE page is refreshed?
I use ajax to fetch data in a variable called "json" on page1, when user clicks a particular dynamically generated element, i store the id of clicked element in a session variable and changePage() to a new JQM page2 where i use json.thepropertyiwant to generate a list, everything works fine, even back and forward buttons work perfectly however if i refresh page2
then json.thepropertyiwant becomes undefined here is the error i get:
Uncaught TypeError: Cannot read property 'responseData' of undefined
i am using a multipage in a single html5 page model
edit:
I have used variable name json and not JSON i just typed it like
that to emphasize, however now i think that was foolish!
I have also figured my problem. My mistake was that i was assuming
page refresh would call pageinit for the page i am on but it works
no differently than a normal html page refresh and triggers
document.ready each time and then pageinit for the page i am on.
Is there a way to listen to a
pagerefresh event and override its normal functionality?
I believe that you generate the dynamic content of page2 in some event.
I believe that the event is pageinit or pagecreate. Those events fire only once (if you have ajax page load set to true).
What happens is that you request the data when you load page1 (something like pageinit?)
When you refresh page2, the data is not there because the event that you request your data in, is not firing, which is completely normal, because when you refresh page2, page1 has nothing to do with it. Post the section of your code where you request your data, and the section where you generate the dynamic content for page2 for more.
Hmm... there's a few issues going on here.
For starters, don't use a variable called 'JSON'. That's no good - there's already a global object called JSON which is used for parsing and encoding JSON! You could accidentally overwrite it.
As you discovered, if you store data in a variable in javascript - that variable is only in memory for the current page. If you refresh the page, then that variable will no longer be in memory.
But that's not really anything to do with jQuery Mobile. That's just how web browsers work - javascript structures created in-memory are not persisted between page refreshes.
Generally you need to save the data yourself using localStorage or cookies for it to persist between page refreshes.
Typically you don't refresh a jQuery Mobile app anyway. So the previous point is generally not too much of an issue. A user refreshing the page is like rebooting the app.
The app should when it starts reload any data that it needs, i.e.
from localStorage, from cookies, or make some new ajax calls to
reload. You would have to program that logic in.

How can I update a webpage when a change occurs on the server?

Is there a way to push pages on change rather than putting a timer on a web page to refresh every x mins? I guess what Im trying to do is not refresh an entire page when only a portion of it may have changed. I have seen on FB when an update happens, it has message saying new content available.
Perhaps you could MD5 a page then when an update happens the MD5 changes and the page could be checking this. Not exactly push but it would reduce the traffic of an entire page.
How can I update a webpage when a change occurs on the server?
a good practice to "reduce the traffic" is to load content through AJAX requests.
the "timer" you mentioned above is my preferred method with my previous comment and a bit of extra logic. This is know as long-polling.
One way is to watch for specific keyboard events and/or mouse events and update the page if certain criteria is met within those events.

Categories

Resources