Develop Reference

How can I keep the #-part of the url on load() with jQuery?

I load an html into a div called right-body using jQuery:
$("#right-body").load( "views/" + $(this).attr("page")+ ".html");
This reloads the whole page. Consequently, I lose the hash of the url. How can I keep the hash?
I've tried resetting it after the reload by:
var hash = window.location.hash;
$("#right-body").load( "views/" + $(this).attr("page")+ ".html");
window.location.hash = hash;
but it doesn't work. window.location.hash = hash; seems to be ineffective.
Thank you!

If the page is reloading after executing .load(), your value for the hash will be reset to undefined.
Rather than storing it in a variable, you could potentially use local or session storage and retrieve the hash once the page has reloaded.

Solved it by putting window.location.hash = hash; as a callback.
. Might not be the best solution however as you can see the url flash from "#" to "#myhashparams"...
$("#right-body").load( "views/" + $(this).attr("page")+ ".html", () => {
window.location.hash = hash;
});

Try this:
if(typeof page === "undefined"){
var page = "";
}
if(page !== ""){
page = "views/" + $(this).attr("page")+ ".html";
}
$("#right-body").load(page);
Notice!
I do not recommend to use an id then, because it would repeat it again and again. So you need to change the id for your "child"-page.
Tell me if it doesn't work!

prepend to url of page using javascript

I need all blog product pages to show in a popup. In order to show in the popup their url must be in the form https://expample.com?/modal-link=blog_page_url. (I'm using the plugin and this is the requirement)
I would like to write a code in javascript that checks the URL. If the URL of the page contains the word 'product' I would like prepend to the url: https://expample.com?/modal-link= inorder to enable it to be shown in a popup.
I'm using the code below:
if(window.location.href.indexOf("product") > -1) {
var url = window.location.href;
url_new = 'https://example.com/?modal-link=' + url
} else {
}
window.location.href = url_new;
The is creating a new URL but it is causing it to be added an infinite amount of time.
How should I be doing this?
Follow on question: (should I open a new question for this?)
I would like to adapt the code so the page does not reload during the redirect.
I know there are other posts about this eg How do I modify the URL without reloading the page? or https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-pagebut could someone please help me modify my javascript code for this specific case?
Would I need to use the lines below?
document.location.hash = 'afterhash';
history.pushState('data to be passed', 'Title of the page', '/test');
I'm at a loss which part of my code need to go where in the above lines.

Your recursion is missing a stop condition. For example, if "some_product" contains "product" and you prepend anything to it, it will still contain "product", as in "really_some_product", "really_really_some_product", etc. You can see where this is going, infinite recursion.
So, you need to tell it to stop at some point, which is when the new url already starts with what you intend to prepend to the original one.
Following this, since there's a case in which we don't change anything, we should also not redirect.
var url = window.location.href,
prepend_to_url = "https://example.com/?modal-link=",
url_new = false;
if (url.indexOf(prepend_to_url) == 0) {
// url starts with what we prepend
// so do nothing
} else if(url.indexOf("product") > -1) {
url_new = prepend_to_url + url;
}
if (url_new) { // don't redirect unless we've done something above
window.location.href = url_new;
}
A more concise version of the code above could look like this:
var url = window.location.href,
prepend_to_url = "https://example.com/?modal-link=",
url_new = false;
if (url.indexOf(prepend_to_url) == -1 // url doesn't start with what we prepend
&& url.indexOf("product") > -1 // and our condition is met
) {
url_new = prepend_to_url + url;
}
url_new && (window.location.href = url_new); // equivalent to an "if" statement

What you need is to get the query parameter part of the url by using substr with index of ? to the end of the url
var url_new;
if(window.location.href.indexOf("product") > -1) {
var url = window.location.href.substr(window.location.href.indexOf("?") +1, window.location.href.length);
var newValue = 10;
url_new = 'https://example.com/?modal-link=' + newValue + "&" + url
}
console.log(url_new);

You should initilize the url_new and change it for some condition:
let url_new = window.location.href
if(window.location.href.indexOf("product") > -1) {
url_new = 'https://example.com/?modal-link=' + window.location.href;
}
window.location.href = url_new;

How to set window.location.href

I have a button on the page which reloads the page based on some value selected. The button's onclick event of calling load_newurl(param).
function load_newurl(param) {
var url = window.location.href;
var index = url.indexOf("&test=");
if (index>=0) {
url = url.substring(0, index);
}
url = url + "&testrun=" + param;
window.location.href = url;
window.location.reload();
}
Above is my function to reload the page. However, window.location.href never gets changed. Do anyone know why? Am I doing something wrong...?
Thank you in advance.

Don't call reload.
This should work, provided there's nothing else wrong with your code.
function load_newurl(param) {
var url = window.location.href;
var index = url.indexOf("&test=");
if (index>=0) {
url = url.substring(0, index);
}
url = url + "&testrun=" + param;
window.location.href = url;
}

Just remove the call to
window.location.reload();
it should work.

Your code works fine, but while the href is about to be set, the reload() refreshes the current page and its href stays the same.
Just try your code ommiting window.location.reload();.

Refresh the page after first load but not if I refresh it again?

I want to reload my html page just after it loads for the first time, but not to reload if page is refreshed. What I have done is:
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
But with this approach if I refresh the page it gets reloaded which I don't want. Are there any solutions to avoid this? Thanks in advance.

Use localStorage to achieve this.
Try:
alert("page load")
if(localStorage.getItem("reload") != "1"){
localStorage.setItem("reload","1");
window.location.href = window.location.href;
}
else{
localStorage.removeItem("reload");
}

This will do it, but how do you prevent reloading on all browsers but Firefox?
if (window.location.href.toLowerCase().indexOf("loaded") < 0) {
window.location = window.location.href + '?loaded=1'
}

Try setting the cookie and check

How to force a page to reload if all what was changed in url is hash?

I am trying to reload current page with different url hash, but it doesn't work as expected.
(Clarification how I want it to work: Reload the page and then scroll to the new hash.)
Approach #1:
window.location.hash = "#" + newhash;
Only scrolls to this anchor without reloading the page.
Approach #2:
window.location.hash = "#" + newhash;
window.location.reload(true);
Kinda works but it first scrolls to the anchor, then reloads the page, then scrolls to the anchor again.
Approach #3:
window.location.href = window.location.pathname + window.location.search + "&random=" + Math.round(Math.random()*100000) + "#" + newhash;
Works but I would rather not add random garbage to the url.
Is there a better solution?

Remove the anchor you're going to navigate to, then use approach #2? Since there's no anchor, setting the hash shouldn't scroll the page.

I had a JQuery function that fired on $(document).ready() which detected if there was a hash appended to the URL in my case, so I kept that function the same and then just used a force reload whenever a hash change was detected:
$(window).on('hashchange',function(){
window.location.reload(true);
});
Then my other function -
$(document).ready(function() {
var hash = window.location.hash;
if(hash) {
//DO STUFF I WANT TO DO WITH HASHES
}
});
In my case, it was fine for UX -- might not be good for others.

It should be expected that #foo will scroll to the anchor of the id, "foo". If you want to use approach #1 and have it reload, this approach might work.
if (Object.defineProperty && Object.getOwnPropertyDescriptor) { // ES5
var hashDescriptor = Object.getOwnPropertyDescriptor(location, "hash"),
hashSetter = hashDescriptor.set;
hashDescriptor.set = function (hash) {
hashSetter.call(location, hash);
location.reload(true);
};
Object.defineProperty(location, "hash", hashDescriptor);
} else if (location.__lookupSetter__ && location.__defineSetter__) { // JS
var hashSetter = location.__lookupSetter__("hash");
location.__defineSetter__("hash", function (hash) {
hashSetter.call(location, hash);
location.reload(true)
});
}

Another option is to remove the hash and store it in session storage to be retrieved on reload:
var newUrl = location.href + '#myHash';
var splitUrl = newUrl.split('#');
newUrl = splitUrl[0];
if (splitUrl[1]){
sessionStorage.savedHash = splitUrl[1];
}
location.href = newUrl;
and then on top of your page you can have the following code:
var savedHash = sessionStorage.savedHash;
if (savedHash){
delete sessionStorage.savedHash;
location.hash = savedHash;
}