We Keep Coding

Javascript change link destination

I am trying to make a javascript that goes makes <a> go to another link, rather than the one specified in its href. E.g. I want
<a href="http://www.example.com/some-page">
To go to instead:
http://www.newexamplesite.com/http:%252F%252Fwww.example.com%252Fsome-page
Unfortunately I don't have access to jQuery for this application. Has to be pure javascript.
I'm looking for some javascript that can be included within the actual <a> tag:
<a onclick="" href="http://www.example.com/some-page">
Note that the original link has to be detected and all / is needed
to be replaced with %252F

Try this:
<a onclick="window.location.href = 'http://newlink.com/' + encodeURIComponent(this.href); return false;" href="http://www.example.com/some-page/">Go to new link</a>

Try the following:
<a onclick="event.preventDefault();location.href='http://www.uol.com.br/'" href="http://www.example.com/some-page">Link Text</a>
The event.preventDefault should stop the anchor element's default behaivour (ie - directing the user to the site within the a href.
EDIT: forgot parentheses on function call!

You should prevent a default event (i.e. going to the link specified by href) and go to another link.
<a onclick="event.preventDefault();location.href='http://www.newexamplesite.com/'+this.href.replace(/\//g,'%252F')"
href="http://www.example.com/some-page">
test
</a>

You can replace the href URL with a function call like this:
<a href="javascript:goToLink()" />
<script>
function goToLink(){
// your link selection logic goes here
.....
// when you have selected the link you want to go to assign it to the window location.href attribute and the browser will redirect the user to the specified link
window.location.href = "..selected link...";
}
</script>

How to perform a JQuery script when the user click on a link and retrieve the link content?

I am pretty new in jQuery and I have the following problem.
In my HTML I have a link like this:
<a>SAIC831003</a>
When the link is clicked I need to perform a jQuery script when this link is clicked and into this script retrieve the content of the <a> tag.
I think that I can use an onClick() on the <a> tag (but I don't know if it is the best solution) and I don't know how retrieve the content.

This code will do the job :
$(function() {
$('a').click(function() {
alert($(this).text()); // Will alert the content of the a tag
});
});

External link with Bootstrap 3 Tabs using JQuery

I'm using tabs with Twitter Bootstrap 3 and want one of them to function as an external link that opens a new window. I removed the data-toggle="tab" and added some JQuery to accomplish this. The code below doesn't work and gives me the following error message, however if I add class="active" to the li element, it works perfectly (other than that tab having incorrect styling). Why is this the case? How can I alter my code so I don't need class="active" on the parent li?:
HTML:
<li>
<a href="https://www.google.com/" class="external-link" target="_blank">
<span class="nav-text-wrapper">Example Tab Name</span>
</a>
</li>
Javascript:
$('.external-link').click(function(){
window.open($(this).attr('href'));
});
EDIT:
I found the solution. I had the following JQuery code to allow for nested tabs, but apparently this conflicted with me using external links on tabs
var $mainTabs = $('.tab-menu a');
$mainTabs.click(function (e) {
e.preventDefault();
$(this).tab('show');
});

How about this?
$('a.external-link').on('show.bs.tab', function (e) {
e.preventDefault(); // prevents the default tab selection behavior
window.open($(this).attr('href'));
});
show.bs.tab is an event that gets raised for a tab right before it is shown. By cancelling it with e.preventDefault(), you're interrupting the tab's show() function early on and inserting your own behavior. If you don't stop the show() function early like this, it will try to select the tab panel referenced in your href in order to show it. The error you were getting was because the tab plugin was trying to find a DOM element with a selector like this: $('https://www.google.com').

How to send all clicked links to a page before going to the URL in the link

Question: How would I set up a page so that all links when clicked go to a page called query_data.cfm where a database query is triggered and once complete send the user to the url of the original link?
As of right now I am adding a class to all links on my page using javascript.
<script>
$(document).ready( function() {
$('a').addClass("tracker");
});
</script>
But what I also want to do is make it so all links with that class for example <a class="tracker" href="www.mywebsite.com/page2.cfm">Page 2</a> go to a page named www.mywebsite.com/query_data.cfm where a query is ran passing the value of href to a database and once complete redirect the user to www.mywebsite.com/page2.cfm
I hope this is enough information but if I missed anything please let me know.

One method is to simply change the links like:
<a class="tracker" href="www.mywebsite.com/query_data.cfm?destination=page2.cfm">Page 2</a>
Then all links will go to query_data.cfm which will record the #URL.destination# information and then CFLOCATION them on to #URL.destination#.

Edit: Oh, you are the same person, my bad. Reading malfunction.
I suggest that you try this: http://jsfiddle.net/xcr56gd1/.
Since you're using jquery to add to the links, you can hopefully see how you can use jquery to change the href to `/r.cfm?d= + $(this).attr('href'), properly encoding as a url.
$(document).ready(function () {
$("a").not(".norm").on("click", function(e) {
alert($(this).attr('href'));
// The alert just demonstrates that it's working and how to get href.
// You can call your ajax here.
e.preventDefault();
});
});
With this code, you can use the jquery on all links without the class "norm", so if you especially wanted a link not to track, this is how you would do it.

Reload page with anchor using Javascript or Jquery

I am using anchors in my URL as a kind of variable for JavaScript, eg:
mysite.com/itempage.html#item75
This works when I click the link on any other page, but not on the actual page in question (itempage.html).
Instead of reloading the page, clicking the link simply changes the URL. Since the page does not reload, none of my JavaScript runs again.
Does anyone know a way to reload the page with the new url?
So far I have tried:
HTML
<div id="itemmenu">
<a id="item75" href="#">Item 75</a>
<a id="item11" href="#">Item 11</a>
</div>
JQUERY
$( "#itemmenu a" ).each(function(index) {
$(this).on("click", function(){
var linkid = $(this).attr('id');
var winloc = "mysite.com/itempage#" + linkid;
window.location = winloc;
});
});

This is indeed the expected behavior: not reloading the page, and simply scrolling the page to the anchor. Also, "#..." part is purely happening on client-side, and browsers don't send this part of the URI to the server, so:
http://example.com/hello.html and:
http://example.com/hello.html#toc
are considered the same URIs for the server.
If you need to reload the page, you may do something as:
<div id="itemmenu">
<a id="item75" href="?item=75">Item 75</a>
<a id="item11" href="?item=11">Item 11</a>
</div>
If you don't need to reload the page, but just to rerun JavaScript, associate required JavaScript functions with the click event on any of the concerned links.
Additional notes:
$(this).on("click", ...) can be shortened as $(this).click(...).
You don't need your actual JavaScript code: set hrefs directly in HTML code instead of changing them through JavaScript.

You could actually trigger a page reload with window.location.reload(), but I would advise against it.
Instead trigger all necessary code required for your page rendering here.
i.e.
function setupPageLayout() {
// TODO: add any code that's supposed to run on page switch
}
$(document).on('load', setupPageLayout);
$('#itemmenu a').each(function(index) {
$(this).on("click", function(){
setupPageLayout();
});
});
Links should look like:
item