Change hyperlinks dynamically using jquery - javascript

I want to change the param of link dynamically.
For e.g.
Link1
Link2
Link3
by default their url is ?item=text i.e. for link1(href="?item=link1") etc..
but when i click link1 the url of link2 and link3 should be
link2(?item=link2&item=link1)
link3(?item=link3&item=link1)
any idea how to acheive this?
Thanks,

Assuming all the links have a class of superspeciallink, this should work:
$('a.superspeciallink').bind('click', function(){
var querystring = this.search; // The search property of links gives you the querystring section of their href
var originalhref = this.href;
$('a.superspeciallink').each(function(){
if(this.href != originalhref) {
this.href = this.href + '&' + querystring.slice(1);
}
});
return false;
});
This would mean that these links never get followed though — I assume some other JavaScript would be reading out these query string values eventually.

Invoke jQuery something like the following:
$("my#links").attr("href", "new/href/value");
You'll need to write a function to calculate the new value of href for each link, of course.

Related

Javascript. How to get the link on page and redirect it?

Good afternoon.
The site has a link element with http://word.site.com/disfhjsdfl
It should be using JS to find this link and perform a redirect to it. It is interested in the option to redirect.
I tried something like this, but it did not work.
window.onload = function () {
var links = document.querySelector ( 'a [href * = "word"]').href;
window.location.replace ( "links");
break
}
You were close, need to get href of the element.
var links = document.querySelector('a[href*="word"]').href;
window.location.replace(links); //As link is varible use it directly
Try
window.onload = function () {
var links = document.querySelector('a[href*="word"]').href;
window.location.href = links;
}
Hope your html may look like instead make it like <a class="link" href="http://word.site.com/disfhjsdfl"></a>
And your js will be
var links = $(".link").attr('href');
window.location.replace ( "links");
You can also achieve the above just by editing a line
var links = document.querySelector('a[href*="word"]').href;

Replace part of href with jQuery

I've read the other questions about this same topic, and I feel like I understand what to do, but it's not working.
I have two domains, out of necessity. On one specific page, I'm trying to update the links so that they point to the second domain. It functions if I just loop through every 'a' element, but not if I try to match specific links. I left my first attempt commented out, I'm not sure which method is better.
This function gets called if one is on that particular page, but are from a different country. I can't see what I'm doing wrong.
I thought that this.href should get the full, qualified URL but it doesn't seem to be doing so.
function updateLinksToUSAstore() {
$('a[href*="manitobahdev.myshopify.com"]').each(function() {
// $(this).attr('href', $(this).attr('href').replace('manitobahdev.myshopify.com', 'manitobahdev-us.myshopify.com'));
this.href = this.href.replace('manitobahdev', 'manitobahdev-us');
});
var CountryName = localStorage.getItem('CountryName');
// Change currently selected country text
$('#country-label, #country-label-mobile').text(CountryName);
}
Try it like this:
var href = null;
$("a").each(function()
{
href = $(this).attr("href");
if(href.contains("manitobahdev.myshopify.com"))
{
$(this).attr("href", href.replace("manitobahdev.myshopify.com", "manitobahdev-us.myshopify.com"));
}
});
I'm on mobile right now, so i was not able to test this. Sorry if it doesn't work.
Plus, i don't really understand why you'd want to edit only the manitobahdev part to manitobahdev-us, since both end with myshopify.com
May be it will help you.
//get all selector
var celem=jQuery('a[href*="manitobahdev.myshopify.com"]');
for(var i=0;i<celem.length;i++){
console.log('====== BEFORE ====');
//get each href of selector
var ele=jQuery(celem[i]).prop('href');
console.log(ele);
jQuery(celem[i]).prop('href',ele.replace('manitobahdev','manitobahdev-us'));
console.log('====== AFTER ===');
ele=jQuery(celem[i]).prop('href');
console.log(ele);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id='test1' href="manitobahdev.myshopify.com/ABC">Test 1</a>
<a id='test2' href="http://manitobahdev.myshopify.com/ZAXC">Test 2</a>
<a id='test3' href="manitobahdev.myshopify.com/USER/1">Test 3</a>

Anchor Tag for sharing URL on Facebook, Twitter etc

I am trying to find a way (JQuery etc.) of auto updating the URL for sharing on Facebook, Twitter etc.
For example:
<img src="../img/facebook.png">
Except I want to replace "http//xxxxxxxxx.co.uk" with something so that if the URL of that page were to change, it would grab that URL and insert it into the tag, without me having to update it manually?
Do you just mean that you want to dynamically build this href from the current page's URL? Something like this?:
document.getElementById('yourAnchorElement').href =
'https://www.facebook.com/sharer/sharer.php?u=' +
encodeURIComponent(window.location.href);
It just gets the current URL, URL-encodes it to be used as a query string parameter, appends it to the known base URL, and sets it to the href of the element.
You don't need to use document.getElementById(), any method you use to identify the target element is fine.
Here is a small function to generate share buttons with jQuery.
HTML
<div id="fb"></div>
jQuery
var fblink = "https://www.facebook.com/sharer/sharer.php?u={{link}}";
$(document).ready(function () {
generateLink('fb','http://www.google.com');
generateLink('fb','http://www.stackoverflow.com');
});
function generateLink(id,link) {
$('#' + id).append('Share');
}
JSFiddle
I replaced you image with "Share" for completeness in JSFiddle without access to your image, but that can be replaced to suit your needs.
Using jQuery you can do something like this on document.ready:
Here is a jsFiddle demo
$(function () {
var fbShare = 'https://www.facebook.com/sharer/sharer.php?u='
// grab url of the page:
var url = window.location;
// loop through all elements with class 'button--facebook' and update href:
$('.button--facebook').each(function () {
$(this).attr('href', fbShare + url);
});
});

Finish jQuery script - Rewrite href

I have a jQuery script that is reading from a list, and the anchor link from the list replaces the image class and the href link.
Currently, the image works perfect, but the links are nearly there!! I am unsure as to how to add '.html' on the end.
I have the following:
$('ul[class="address-list"] li a').on('click', function(e) {
e.preventDefault();
var cl = $(this).attr('href').replace('#','');
$('.map-wrapper').removeClass().addClass('map-wrapper '+cl);
var _href = $("a.map-link").attr("href").replace('#','');
$("a.map-link").attr("href", '/img/map/' +cl);
return false; // Prevent default behaviour
This outputs a link as the following...
/img/map/link-class
HOWEVER, I am after /img/map/link-class.html
I have a series of html files for each class that has a short redirect code within to refer to the correct page.
The jQuery link in questions I believe is this..
$("a.map-link").attr("href", '/img/map/' +cl);
I am unsure as to how to add a '.html' after the +cl
Any help?
$("a.map-link").attr("href", '/img/map/' + cl + '.html');

javascript - changing href of a link

I've got a site which includes jQuery-Tabs, so I have a hashtag in my url to get a desired tab displayed:
www.abc.de/site#tab4
On this site I have a link which looks like this:
LINKTEXT
With this link the user can choose an option for a product. The site gets reloaded on click. I want to achieve that on click the string after the hashtag in the url is read out and then this string will be added to the url or the link...
My function looks like this:
function test() {
var info=window.location.hash;
alert(info);
document.getElementById("optionslink").href+info;
return true;
}
So far the function is on click I get an alert-popup which shows the correct hashtag and it's string. But the site gets reloaded without having the hashtag+string added. It looks like this:
www.abc.de/site.html?option=1
It should look like:
www.abc.de/site.html?option=1#tab4
How can I get this working?
You are not changing the href attribute. Try
document.getElementById("optionslink").href += info;
Your code document.getElementById("optionslink").href+info; just has no effect, as there is just the concatination, but no assignment to the href attribute.
Simply change the location:
function test() {
var info=window.location.hash;
window.location = document.getElementById("optionslink").href + info;
return false;
}
LINKTEXT
Another thing, you pass the current anchor to the function, and save the DOM query overhead:
function test(anchor) {
var info=window.location.hash;
window.location = anchor.href + info;
return false;
}
<a href="/site.html?option=1" name="optionslink"
id="optionslink" onclick="return test(this);">LINKTEXT</a>
Note that not using inline scripts at all is the best practice with javascript events.
You should read about addEventListener, you can read about it in MDN

Categories