Firstly, I didn't know how to give a short description of the problem in the title, let me explain it here.
I'm creating social site, with all common features like/comments etc. Imagine Twitter/Instagram. I do have main/home page where all posts are displayed. Every post has a like button, so when it is clicked it triggers a AJAX function to send request to Django server to update the database with new like. This JS function also changes the style of the button, so user can know that he liked it. So far so good. Now when he decides that he want to comment this post, he clicks it and is redirected to the new page - the detail page. Here when the page is loading with data from server his like he gave earlier is visible(the div is red). All right, he commented, but know when pressing back button, in order to go to the home page, his like under the post is not more visible without reloading the page. I will demonstrate it using images.
Now I'm using JS function to reload whole page, to get from Django server all new data, but I don't think it is good idea.
<script>
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
window.location.reload(); // reload whole page
}
</script>
Is there a better way of doing this?
Related
I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.
So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.
I have a scenario where I want to return to a specific page after I navigate to different pages. The scenario is that a user makes a search, gets the results in the same page. He can then make updates on the a specific result on a different page. I would like to create a link that can bring the user back to the search result page. I am trying to user history.go(specificnumber), but how can I get the variable specificnumber from when the user make its first search to the number of page visited or loaded after the search. Or am I in the wrong direction for the implementation?
Maybe I misunderstood your question but if you just want to go to a previous page you can use window.history.back();
Otherwise if you want to save all input data from user (to user) and use it to navigate next you can just use document.cookies or localStorage.
I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.
I have seen history.js, it seems just work on current page:
such as:
www.mysite.com
www.mysite.com/?state=1
www.mysite.com/?state=2
www.mysite.com/?state=3
www.mysite.com/?state=4
www.mysite.com/?state=3
It can make back button back follow state from large to small only on the same page.
What I want is:
www.mysite.com/center/?state=1
www.mysite.com/product-list/?state=2
www.mysite.com/product-detail-manage-form/?state=3
center can not return to product-list, and product-list can not return to product-detail-manage-form.
Because a user can edit or delete a product at product-detail-manage-form page, and server will redirect he to product-list page after form submit.
I don't want he return to product-detail-manage-form by clicking back button on product-list page.
Is there any easy way to achieve my purpose?
Try using javascript to manipulate the browser history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
This way you can control the history stack and which pages the users can get to using the back button
I'm building a site in CakePHP, and I'd like to give a 'Preview' option for pages as they're being added or edited.
In the 'Add Page' view, for instance, I have the usual form which the user uses to create their page. There is a 'Save' button, to save the data. Next to that, I'd like to have a 'Preview' button, which opens the page in a new window.
So, either I need the controller to open a new window (and I don't think this is possible), or it needs to be a link (targetting a new window) instead of a button - but in that case, how do I POST the data so that it can be shown? Do I need to use ajax or something? I'm a total newbie in ajax, but I do have a reasonable grasp of javascript.
Thanks for any help!
If the data that you are previewing is already saved on your database, then you can have an action in your controller (maybe preview()) action that references the saved data and loads the preview. And then to use it, you can just use a regular link that targets a new page and opens it there.
This would require saving the data the user is typing to your server every few seconds, though.
If you want to use the data that is still on the page, then you can use a JavaScript function to load a lightbox and populate the contents of that lightbox with data from the fields that the user is working on. You can probably use fancybox for that.