Is there anyway to stop the tabs from reloading the content on every access? Everytime I click on a tab, the AJAX request is executed again. Also, when I switch my application tabs,the work I'Ve done on my previous app tab is gone since the tab refreshes. Any ideas?
Pretty sure cache: true should work.
Also, see this post which is very similiar to yours.
There's also a cookie parameter you can use to store the selected tab.
See the documentation: http://jqueryui.com/demos/tabs/
And if none of this works for the oddest of reasons, you can always create your own JavaScript cache object such as a simple array and store the tab id and value in there and pull it every time. Further, you could serialize this array to JSON and store it in a cookie that you can check and load on $(document).ready...
Related
We have currently an order confirmation page on our website after the customer paid where information is sent to our analytics tools.
If the customer refreshes the page, the information about his order is sent again to our analytics tool and then we get wrong/duplicate information in our orders statistics.
Is there an easy way to prevent this?
The goal would be here to not trigger the custom html tag when the customer reloads the page.
It should be only fired once.
Thanks!
Best,
Victor
You can use PerformanceNavigation.type or PerformanceNavigationTiming.type respectively in a Javascript variable to find out if the page has been reloaded (the former is already marked as deprecated while the latter is still marked as experimental, so to be on the safe side you should probably check which one is supported by the browser and use that).
Then use the return value to detect reloads and block the tag depending on that.
An alternative would be to set a cookie or local storage entry with the transaction and block based on that.
We finally found another solution that seems to work: We used an additional trigger in GTM that prevent the info to be sent twice.
When calling the page for the first time, the condition is set to "false", and on each following request to that page it is set to "true".
We made some test orders and it seems to works correctly. Thanks!
I set a cookie with Javascript. I have a input type checkbox that will switch theme on the website from normal to classic version and so will the cookie name. My backend is PHP. I want to access the newly changed value when clicking the checkbox with PHP, so naturally i want to reload the page so PHP can pick up the new value. Here comes the problem, all the suggestions out there suggest this:
location.reload(true);
But my Visual Studio Code says this is deprecated and indeed, it does not work indeed.
I checked MDN - [https://developer.mozilla.org/en-US/docs/Web/API/Location/reload][1] and it says that i should not pass any params and just use
location.reload();
And yes, using this reloads the page but it seems like it doesn't reload it by requesting the page from the server because my PHP does not pick up the new value. Only when i hit the refresh button manually, it does. And MDN says "The Location.reload() method reloads the current URL, like the Refresh button." which doesn't seem true.
So what can i do here?
You can try reloading page from php using:
header("Location: *your directory*");
If you set the same page you were it will just reload.
I have problem with browser back button. Problem exists for IE and google chrome.
I'm creating autoload mechanism for search engine. Mechanism works like google search.
Procedure of building:
1) typing keywords
2) ajax search request
3) response as json
4) building results list using json
5) append list to container
If i have builded results and redirect to another page and back to the page with results, results desapear. I tried a lot solutions described by developers like hashing, history.js and many more but every one is not working.
When you go back, the original HTML of the page is loaded from the cache. Everything you added through Javascript is not stored, so you will have to restore that modification on page load.
For that you can use the popstate event. When that even is fired, you'll need to restore the information. You can do that by re-executing the AJAX request and process the result. Therefore you must save enough information in the url (or hash) to be able to execute the same request again.
That also means, you may need to do earlier requests! For example, if you execute an ajax request to get item X of a list, where X increments each time after the request (so you can get the next item on each click), you will need to make sure that you load all items again. If you don't do that, you will only get the original items on the cached page, and the latest item that was AJAXed, while the items inbetween will be missing.
But if you use pushState or replaceState to store states, you can also store additional data. You can use this to store the JSON result with the state, so you don't need an additional request. Anyway, this is an optimization and is not strictly needed, so you should start with implementing the AJAX request being fired on popstate. You'll need that anyway, because the data may not always be stored with the state, so you will always need the AJAX request as a fallback.
When I load my php page I append some data. For instance MyPage.php?value=something.
As expected, when I go back and forth using the back button, it always loads with that same data appended. I don't want that. I want that after the page loads, I should be able to change the history to store only MyPage.php WITHOUT the appended data.So now when I would use the back button it would load MyPage.php only. How can I do this - javascript, jquery, php , anything???
If there is a way to do that without touching the history object, thats also fine. I'm just assumng it'll take some history tweaking. I'm also OK if it takes tweaking on the client or server side.
As far as I know, it is not possible to tweak the history like that, nor is it a good way to deal with this.
You could use a cookie to determine when a page gets loaded more than twice, or store the data in a session variable instead, and delete it once your processing is done.
I assume the data is appended by using GET method. Using POST will not append text after MyPage.php but still can pass data to the page.
The history is the history. It's a bit of a hack to go changing that (and you will probably have other issues down the road if you do).
It is better to either have NO querystring at all, and use js or server-side logic to determine the action, or to have js or server-side logic to ignore the second request.
If you are fine with tweaking the history then you can probably look in to this.
history.replaceState({}, document.title, "MyPage.php");
This will rewrite the current window.location to "MyPage.php" without page refresh.
So I've set up a pagination system similar to Twitter's where where 20 results are shown and the user can click a link to show the next twenty or all results. The number of results shown can be controlled by a parameter at the end of the URL however, this isn't updated with AJAX so if the user clicks on one of the results and then chooses to go back they have to start back at only 20 results.
One thought I've had is if I update the URL when while I'm pulling in the results with AJAX it should—I hope—enable users to move back and forth without losing how many results are shown.
Is this actually possible or have I got things completely wrong?
Also, how would I go about changing the URL? I have a way to edit the URL with javascript and have it be a variable but I'm not sure how to apply that variable to the URL.
Any help here would be great!
A side note: I'm using jQuery's load() function to do all my AJAX.
Not mentioned in the duplicate threads, but useful nonetheless: Really Simple History (RSH).
This would be the answer I would put here:
Browser back button and dynamic elements
You can't actually change the url of the page from javascript without reloading the page.
You may wish to consider using cookies instead. By setting a client cookie you could "remember" how many results that user likes to see.
A good page on javascript cookies.
The answer for this question will be more or less the same as my answers for these questions:
How to show Ajax requests in URL?
How does Gmail handle back/forward in rich JavaScript?
In summary, two projects that you'll probably want to look at which explain the whole hashchange process and using it with ajax are:
jQuery History (using hashes to manage your pages state and bind to changes to update your page).
jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).
First 3 results google returns:
first
second
third
I'll eat my shorts if none of them are useful. ^^
And yeah - you can't change URL through JS.