Remove text in 'a' but not in 'href' - javascript

please take a look at my website: moskah.nl
As you can see there is a pre-filled input. Click 'save' and you will see the url is being saved with a favicon next to it. Do this a couple of times to create a list.
If you refresh the page you will see the part that says 'http://' is being removed because of a function:
function replace() {
$("a").text(function(i, h){
return h.replace('http://', "");
});
}
Now the problem is that if you then click on a list item (NOT the href) you will see the item is being removed. Now if you refresh agian you will see all the favicons are gone. I think this is because somehow the function 'replace' is also removing the 'href' part which is strange because I explicitly stated it should remove 'text'. So how do I remove an item list without its favicon? (Basically keeping its url(href) intact)
ps. I cant give you a demo on jsfiddle because it doesnt work there.

jQuery('a[href^="http://"]', this).each(function () {
// ...
}
You add the favicon inside this function; this means that if your a tag's href attribute doesn't start with http:// it won't have a favicon.
When you populate the list with the jquery cookie:
if (cookie){
var values = $.parseJSON(cookie);
var li;
for (var v in values) {
li = $('<li>' + values[v] + '</li>');
$('.jq-text').append(li).show();
}
// ...
}
the attribute href is set the same as the a tag's text:
li = $('<li>' + values[v] + '</li>');
You have to save the href attribute inside the cookie too or to manually add http:// when you load from the jquery cookie.
PS: sorry for my bad english; I wish that it's understandable what I've written.

Related

Trying to use jQuery to trigger an anchor click after the page loads

So this has been asked a number of times on here, and while I've read all of the threads I can find, this still isn't working for me.
A little background: I'm working on a Wordpress site with a grid plugin, and I'm trying to trigger a filter when the page loads, depending on a url parameter. For the purpose of this thread I've just hardcoded a url parameter (the category variable) as an example because that functionality is working fine.
The anchor tag I'm trying to trigger:
Tarps and Covers
The broken code I'm trying to use to trigger the click event:
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
});
</script>
A console log returning the anchor variable confirms that I'm selecting the correct jQuery object, and I've also tried anchor[0].click() to trigger it with no success. Does anyone see any problems that I'm overlooking?
I tried it :
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
anchor.on('click',()=>{
alert();
})
});
Everything is working

Change all of a specific term in href to another specific term with javascript

I am looking to change part of many links on a webpage. I want to change any link that has "oldTag" to "newTag".
Ex.
www.google.com/WillBeDifferent/oldTag
to
www.google.com/WillBeDifferent/newTag
Basically any link where oldTag shows up I want to replace it with newTag. I am new to this but I have been researching for a few days and nothing I can come up with seems to work.
The context is I have Google Tag Manager checking to see if a cookie is present and if it is then it will trigger a tag to change all of the links to the newTag.
Not sure if I should or can use jQuery or Regex...
Here is what I have played with from scouring the internet.
var anchors = document.querySelectorAll('a[href*="oldTerm"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href ="newTerm"; });
It replaced all of the links with the oldTerm but replaced them with http://www.google.com/newTerm.
$("a[href^='oldTerm']")
.each(function() {
this.href = this.href.replace(/oldTerm/g,
"newTerm");
});
Could not get this to work but found it somewhere else on here.
Not sure where to look now... any help would be great.
you are very close but need to use * instead of ^
$("a[href*='oldTerm']")
.each(function() {
this.href = this.href.replace(/oldTerm/g, "newTerm");
});

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 substring method assistance

So long story short im working on a web app and using AJAX within it.
I'm trying to disable the default actions of links when clicked, attach a hash value to the link and then remove the "#" from the url.
the problem im having is that, although the hash values are being attached accordingly, the substring method isnt extracting the "#", it extracts the letter after it.....
here is my code. PS, i left my comments inthere so you get where im trying to go with this
so i dont know....my logic or setup may be wrong....
$(document).ready(function(){
//app vars
var mainHash = "index";
var menuBtn = $('.leftButton');
//~~~~~~load the index page at first go.
loadPage();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( function(){
$('#menu').toggleClass();
});
//Menu items on click , disable link default actions.
$('#menu a').click( hijackLinks );
//~~~~~~~~~~~~~~~~~~~~~~~~~~~functions for mobile index load AND hijacking app links to AJAX links.
function loadPage(url){
if( url == undefined){
$('#contentHere').load('index.html #content', hijackLinks);
window.location.hash = mainHash;
} else {
$('#contentHere').load(url + '#content', hijackLinks );
}
}
function hijackLinks(e){
var url = e.target.href;
e.preventDefault();
loadPage(e.target.href);
window.location.hash = $(this).attr("href").substring(1);
}
});
what im wanting is to remove the "#" from the url. What am i doing wrong, what am i not seeing/understanding?
ive tried substring/substr etc and both do the same thing in that no matter what numbers i choose to insert into the substrings params, they remove EVERYTHING BUT the "#" lol....
Thanks in advanced.
Well, you don't really change the link itself, you only change the window.location.hash, and the hash always has a "#" at the beginning.
What you need to do in order to change the entire url (and remove the '#') is to manipulate the browser history.
Although you should know it works only in newer browsers (the exact browser versions are in the link), so if you target your website to older too browsers you might need to think about having a fallback using the hash. If you decide to have such a fallback, I suggest searching for a plugin which does it instead of making it all yourself.

Javascript - how do I minimise this code example?

a quick question.
At the moment I have 12 links on a page, and 12 corresponding javascript codes that run when a each button is clicked.
I know 100% there must be a method of having 1 javascript code and the link passing a variable to it, so I don't have to have 12 different codes.
EG. Here is a link I'm currently using:
Anatomical Pathology
And the Javascript function that is run when the link is clicked loads some html from a php script into a div which is previously defined as level2:
$('#button1').click(function() {
level2.load("http://hello/script.php?url=poodles");
});
What I'd really like to do is something like this with the link:
Anatomical Pathology
And the function something like this, so I only need the 1 function not 12:
$('#button1').click(function() {
level2.load("http://hello/script.php?url=' + passurl + '");
});
How do I go about getting the data from the link tag into javascript, and also how do I add this passed variable into the url I want the javascript to pull data in from?
passurl isn't standard attribute, you should use data-passurl
$('#button1').click(function() {
var passurl = $(this).data('passurl'); // or $(this).attr('data-passurl');
level2.load("http://hello/script.php?url=" + passurl);
});
Why don't you utilize your hash there...
Anatomical Pathology
In your script
$(".button").each(function() {
// get the hash and extract the part we want store it in this enclosure
var url = $(this).attr("href").replace(/^#\//, "");
// create a click handler that loads the url
$(this).click(function() {
level2.load("http://hello/script.php?url=" + url);
});
});
This also brings about the possibility to extrapolate from that so that a hash passed through the url can also operate the script loading...
You can use the rel attributte (or any data- attributes if your using HTML5 Doctype) to save your URL and add a class to the links you want to execute your callback.
Anatomical Pathology
Your Callback:
$('a.button').click(function() {
level2.load("http://hello/script.php?url=' + $(this).attr('rel') + '");
});
For a more extensible solution you could consider making a json structure for your urls:
var urls = [{
"poodle":{
"url":"http://hello/script.php?url=poodle",
"someOtherData":"data"
},
"otherDog":{
"url":"http://hello/script.php?url=otherDog",
"someOtherData":"data"
}
}];
You would store some sort of key somewhere in your HTML element:
Anatomical Pathology
Then you would leverage this data structure in your functional code:
$('a').click(function () {
var key = $(this).attr('rel');
level2.load(urls[key].url);
});
As per Stuie, add a class to the links so that you can target them all at once. However, I don't see the need to fool with the hash, and I wouldn't add a bunch of click events either. Just delegate once and you're done:
<div id="wrapper">
Poodles
Schnausers
</div>
and the JS:
$('#wrapper').delegate('a.button', 'click', function(e) {
e.preventDefault();
var passurl = $(this).attr("href");
level2.load("http://hello/script.php?url=" + passurl); // assuming "level2" is valid from elsewhere
});
Where I have "#wrapper" you would designate any unique selector that is an ancestor of all your links. It's an element that listens for clicks on the a.button elements within.

Categories