We Keep Coding

Loading page with pathname when a button is clicked in javascript

I am a little bit confused here.
I have a url locahost/product-location/agro-product and want when a user clicks on a button on this page it takes the user to locahost/product/agro-product. After some research i figured out i could change the pathname this way
<script type="text/javascript">
function loadPage(){
var theURL = window.location.pathname;
return theURL.replace("/product-location/", "/product/");
}
</script>
The above works because if I add this alert(loadPage()); outside the function: it alerts the new URL path.
Now how do I write the code from here so when a user clicks the button it takes the user to the new URL?

You can use window.location.href:
function loadPage(){
var theURL = window.location.pathname;
var newURL = theURL.replace("/product-location/", "/product/");
//Set URL
window.location.href = newURL;
}

OK.got it. Just had to do a little rewriting
function loadPage(){
var theURL = window.location.href;
return window.location = theURL.replace("/product-location/", "/product/");
//Set URL
}

I'd recommend using window.open because you can choose what window it opens in (not to mention a variety of different options).
function loadPage(){
var newURL = window.location.pathname.replace("/product-location/", "/product/");
window.open(newURL);
//LOAD IN NEW WINDOW/TAB INSTEAD:
//window.open(newURL, "_blank");
}
Your button HTML would look like this:
<button onclick="loadPage();">Visit new page</button>

twitter share button quirk

Link to my in codepen: codepen.io/neel111/pen/dRBQNY?editors=1010
When the tweet button is clicked then it redirect to the page to tweet in the twitter, with a preselected text to tweet.
The JavaScript code used there is given below just for a quick look:
//-------------quotes--------
(function(){
window.addEventListener("load", makeRequest);
function makeRequest(mk){
document.getElementsByClassName("buttonQ")[0].addEventListener("click", makeRequest);
function reqListener(rl) {
if(httpR.readyState === XMLHttpRequest.DONE) {
var quote;
if(httpR.status === 200) {
quote = JSON.parse(httpR.responseText);
document.getElementsByClassName("quote")[0].innerHTML = quote[0].body;
} else {
alert("There was a problem with the request!")
}
}
}
var httpR;
httpR = new XMLHttpRequest();
httpR.onreadystatechange = reqListener
httpR.open("GET", "https://quote-api.glitch.me/pull/1", true);
httpR.send();
}
//----------------------tweet-------------------
window.addEventListener("load", function() {
document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
})
function tweetEvent(twt) {
//twt.preventDefault();
document.getElementsByClassName("quote")[0].normalize();
var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
var URLBase = document.getElementsByClassName("twitter-share-button")[0].getAttribute("href");
var URLExtended = URLBase + "?hashtags=quotes&text=" + encodeURIComponent(tweetBody);
document.getElementsByClassName("twitter-share-button")[0].setAttribute("href", URLExtended);
}
})();
Quirk:
when the tweet button is clicked for the first time after the page is loaded/refreshed then the preselected text in the redirected page to tweet is
Preselected_text(quote)_from_the_main_page #tweet
But after the first click, everytime the tweet button is click the preselected text in the redirected page to tweet is
Preselected_text(quote)_from_the_main_page?hashtags=quotes #quotes
Where i am doing wrong?

So I think the problem is that you are modifying the href of the anchor tag and inserting the modified href into the dom. What I would do instead is to get rid of the in the button and build the url like you are but instead of modifying something in the dom just call window.open(extendedUrl);
Something like this should get you started:
window.addEventListener("load", function() {
document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
})
function tweetEvent(twt) {
//twt.preventDefault();
document.getElementsByClassName("quote")[0].normalize();
var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
var url = "https://twitter.com/intent/tweet?hashtags=quote&text="+encodeURIComponent(tweetBody);
return window.open(url);
}
})
As you can see I have simplified the url building and then passed the resulting url to window.open which will open the url in a new window/tab (depending on user preference in their browser... find more on that here).

url made in jquery both redirect to and opens a new tab

$('#resultsDiv').on('click', '#seeTemplates', function () {
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
This code function well but it has a side effet that surprises me: as I click on the link a new tab opens with the good link. But the main windows also loads the good url. Why does it open a new window?
EDIT
New code as per requested:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
e.preventDefault();
alert("Clicked");
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
I'm now investigating on 2 possibilities:
Can a delegate have this kind of result?
Is it the normal behavior of a windows.location.href jquery call?

Try this, adding the function(e) and e.preventDefault() will stop the browser's default action:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
e.preventDefault();
});

I can't comment (due to being new here) so you might want to try to add e.preventDefault() there to prevent / block the default action (there are other ways too)
If you want to open a new tab with JavaScript try this;
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
// Prevent default action
e.preventDefault();
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
// Open in new tab
var win = window.open(url + "?templateName=" + ebayTemplate, "_blank");
// Focus on new tab.
win.focus();
});
I hope this helps.

Because #seeTemplates is a link (per OP comment), both the default link action and your custom event handler are running. To avoid that, you'll need to prevent the default behavior of the link:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
e.preventDefault();
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
You could also just change the element to be some other type (perhaps a <span>), and avoid the problem altogether.

How to auto-open photo in Colorbox only when it's specified in URL?

This code gives each Colorbox image an URL (domain.com/#image). This can then be copied and pasted by user to open the wanted photo automatically when entering the site with that URL.
Everything works as intended but somehow it also auto-opens the first image on the site even when there is no #image at the end of the URL. How should I change this code that it will only auto-open the image when there is #image in the URL?
Thanks!
Code:
jQuery(function (){
var id, group;
group = jQuery("a[rel='lightbox[63]']").colorbox({onComplete:function(){
// Get the image URL
with_ext = (this.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1];
// Get the image url without the extension
without_ext = with_ext.substring(0, with_ext.lastIndexOf("."));
// Redirect
window.location.hash = without_ext;
}, onClosed: function(){
location.hash = '';
}});
id = location.hash.replace(/^\#/, '')+".jpg";
group.filter('[href$="'+id+'"]').eq(0).click();
});

Ok got it working.
If anyone else needs this kind of function here it is:
jQuery(function (){
var id, group;
group = jQuery("a[rel='lightbox[63]']").colorbox({onComplete:function(){
// Get the image URL
with_ext = (this.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1];
// Get the image url without the extension
without_ext = with_ext.substring(0, with_ext.lastIndexOf("."));
// Redirect
window.location.hash = without_ext;
}, onClosed: function(){
location.hash = '';
}});
if(window.location.hash) {
id = location.hash.replace(/^\#/, '')+".jpg";
group.filter('[href$="'+id+'"]').eq(0).click();
} else {
return;
}
});

jQuery function - pass params from the URL into the function

I have following function:
It bassicly takes the value form clicked href and than load file into the #loader div with the same name.
$('.loader').click( function() {
// Check clicked element href
var ActiveTab = $(this).attr("href");
//Content
var TrimedClickedTab = $(this).attr("href").substring(1);
$('#loaderDiv').load( TrimedClickedTab +'.html', function() {
// Show New Loaded Div
});
return false;
});
How can I pass param into the function form the URL and than run it with this param?
I want the URL to set the var ActiveTab = "#form"
I'm looking to run this on the load, so it would load straight away given file. ( var #ActiveTab)

I think you're looking for something like this:
var path = document.location.toString();
var anchor = '#' + path.split('#')[1];
So, if your URL looks like "http://example.org/test#form", anchor will contain "#form"