We Keep Coding

back button not working properly (chrome)

I have a request axios(vue):
.then(response => {
history.pushState(null, null, response.request.responseURL);
}
Standart URL - http://localhost:30/shop. With this line, I complete the URL. in the end it will look like: http://localhost:30/shop?tags[]=5
But when I go to another page (http://localhost:30/shop/parts/2123 ) and then click the back button. Then I see not the page, but the response of the request (just text).
How i can resolve this problem?
upd: with FF working fine. Only when using google chrome.

What history.pushState does is change the value of the URL in the search bar and push a new URL to browser history; it does not change anything in the DOM. The browser doesn't take "screenshots" of your current page state, so when you go back it only changes the URL on the address bar and the history, but no UI changes.
Based on your code an post, I believe you wanted to redirect the user, which is done easily with:
window.location.href = response.request.responseURL;
Edit
Based on your comment, you can use history.replaceState instead of pushState, which won't add changes to history, thus not breaking the back button:
history.replaceState(null, null, response.request.responseURL);

Is it possible to automatically open a video modal and begin playing only when the user accesses the page from a link in an email.?

I know that we can open Bootstrap modal on page load very easily. But I have a situation where the modal should open ONLY when the user accesses the page from an email link?
Is there any way to do using JavaScript or JQuery.

Yes, you can.
The most straightforward way I can think of is to use an extra query parameter in the url used in the email.
When your page loads, you can test for this query parameter and then decide to open your modal or not.
Consider this sample URL:
www.example.com
In the email version, we can add a query parameter like this :
www.example.com?email=true
and then, on your client side (on page load):
var query = window.location.href.split('?')[1];
if(query && query.indexOf('email=true') > -1){
// Url has the parameter run code to open modal
}

Yes you can do this
Just you have to pass extra parameter ( querystring) in the Link.
Suppose your Normal link is "www.xyz.com", instead of this you have to pass "www.xyx.com?bylink"
and on your page load you have to get the page Url & find the extra parameter (querystring)
If the parameter is there in the URL just open the Video Popup or else Open the page normally .
Eg:
var URL =window.location.href ;
if(URL.contains('bylink'))
{
videoModel.show();
}
else{
NoramlPage.show();
}

Add URL parameter on loading the page

I have a page where there is a form which is used to Add / Edit Addresses.
In the right section of the page, there is a saved address Which has Edit link and it gives call to the same page URL with adding a new parameter say "billingID.XXXXX".
After clicking on this link, page is re loaded with the default address data auto filled.
I need this to happen on the first time load. I tried triggering click event on this Edit link on load, but I suppose it is not allowed by jQuery.
What are the other options I have with jQuery / javascript to add this URL parameter on load of page.?

You could try the Javascript History API.
https://developer.mozilla.org/en-US/docs/Web/API/History_API

It depends on what you want to do, I didn't understand you quite clear.
If you need the page to be reloaded and show the page by url, you can get 'href' value by jquery and then call window.location = $('.mylink').attr('href') + '?billingID.XXXXX';.
If you just want to replace url in browser panel, you can use History API as Kahuna suggested. E.g. you can call
window.history.replaceState(null, document.title, window.location.path + '?helloworld=1');
but then you have to update the page contents by yourself, using JS and jQuery.

you can try this:
if(window.location.href == 'requestd page href'){//http://localhost/test/test.php
window.location.href += "?billingID.XXXXX";
}

URL change ajax call in Facebook

In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.
For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar
FROM >facebook.com/foo?bar=foobar&xxxx=
TO > >>facebook.com/foo?bar=boobar&xxxx=
and this is not hashed change also
like
FROM >facebook.com/xxxxx#xxx=xxxx
TO > >>facebook.com/xxxxx#xxx=yyyy
How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.
If using an iFrame, how to implement this ?

I use somehting similar to this
try {
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page", href);
loadPage(href);
}
catch(e) {
window.location.hash = "#!/"+href;
}
If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.

wow. I just asked it few minutes ago ... use search next time ;)
Dynamic favicon when I'm proccessing ajax data
Modify the URL without reloading the page

There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.

They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.

changing some parts of location.href using js without redirecting the browser?

hi here is the problem: my url is like this
http://somesite.com?theSearch=someword&a=b&c=d
on this page search results are displayed and on this page i have put the functionality of ajax search i.e. the results are updated without the page reload but the problem is if the user clicks on any link on the page and then presses the back button he results on the page page with the search results of "someword" not the new word typed (i mean the word for which the ajax results were updated) the client complains it and i need to fix it anyone have a solution?
i am using jQuery

You can't change the location.href without a new load. What you can do is set the hash.
Every time you make a search change the hash
function doSearch(searchword) {
location.hash = searchword;
//your search code
}
Now the hash will refer to the latest search. And then add this code to "override" the get parameter ?theSearch=.
$(document).ready(function() {
if(location.hash.length>0) {
doSearch(location.hash);
}
});
Its not a nice solution since you will load 2 search results, but it will work.

You can try Sammy. It utilizes the URL hash (#) so you can create single page applications that still respond to the back button in your browser, just like facebook. And it runs on jQuery.