Jquery each and attr - javascript

I have some external links in my page
Label
Label
I try to direct the ext link to an exit page before automatically redirecting it to the destination. It works fine, but with multiple ext links on the page, my script is getting the href of link-1 for other ext links too.
Ergo:
// To grab the href of the destination page i.e http://example.com/link-1
var external = $(".ext").attr('href');
// To forward to the exit page first i.e http://localhost/checkLinkURL?=http://example.com/link-1
$(".ext").attr('href', 'http://localhost/checkLinkURL?=' + external);
I have tried wrapping the second part of code in an each function but it still gets only the href of link-1. I don't know if the rest of my script is relevant to the problem. It's pretty basic and just strips out the exit page and forwards automatically to the destination. But how come this doesn't work as intended, even with an each function?

You can change the href attribute of each link, you can use .attr() with a callback function which provides the current href for you as the second argument, which you can use as your query string:
$('.ext').attr('href', function(i, external) {
return 'http://localhost/checkLinkURL?=' + external;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Label
Label

Related

Link Tracking with DTM and Custom Variables

I need to capture the link that was clicked as well as the page that the link was clicked on using Adobe DTM, and then pass it into an evar and sprop. I don't need pageviews, so the s.tl() is used.
I'm using an event based rule with "click" as my event type, with my element tag/selector as "a" for the anchor tag.
Below is the page code that I'm using in DTM - but my problem is, I'm getting an "Unexpected token ILLEGAL (line: 1, col:3)" and I can't seem to figure out why.
Ultimately - is this the right approach to take, or is there a more simplified approach or better solution?
// Custom Link Tracking
$(“a”).click(function(event) {
console.log($(this).text();
s.eVarXX = $(this).text();
By using an event-based rule that already listens for the anchor click you don't need another jQuery function.
You can simply grab both the href and link text within the Adobe Analytics section of your rule:
s.prop1 = $(this).text() // link text
s.eVar1 = $(this).attr("href") // Link URL
Hope this Helps

How do I run jquery after anchor tag click?

I Have an anchor tag like this:
<a href="secondPage.html" id="seeVid">
<div class="box" style="margin-top:100px;" id="bee">
<center><h2>Java</h2></center>
<center><p>Hello paragraph for .</p></center>
</div></a>
When I click it I want to go to my second page and append a paragraph within that div how do I accomplish this here's my jquery but it doesn't seem to work?
$(document).ready(function(){
$("a#seeVid").click(function(){
$('div.allVid').append("<p>Second Paragraph</p>");
});
});
Here I am trying to see when my anchor tag with the id "seeVid" is clicked and then I go to my div in my second page with class "allVid" and I want to append a paragraph, but this isn't working?
You can't do that. When the second page loads all the javascript from the first page no longer exists nor will be executing.
You could just execute a javascript function when the anchor is clicked and have that function redirect to a URL adding a query string parameter of some data you want to send and then in the 2nd page load you could execute a javascript function to retrieve the query string parameters and do some operation with them. You can read how to redirect to anew URL using javascript here: How to redirect to another webpage in JavaScript/jQuery? and how to retrieve query parameters here: jquery get querystring from URL
You would not be able to append the div if the anchor tag is directing to a new page. You need to send in the text as a querystring to the new page and then using javascript append that in your newly rendered html
or
better still set a localStorage variable and in the new page script check the localStorage whether it is not empty and if it is not, append that so that it is included in your new page
More info about local storage:
W3School Explanation
A nice blog on it

How to link a hash link from the URL to Javascript content?

I've once used jQuery UI in order to add the tab feature to one of my project.
Everything was working just fine, and I noticed each tab was bound to a URL hash tag (I do not know you say it in english). As an example, once I clicked on the first tab, #Tab0 was added to my URL.
I want to reproduce this behavior in my current project. But I'm not using jQuery UI tabs, I am porting a desktop application and there are JavaScript buttons which write and replace content inside my page (in the manner of different pages, but without reloading).
How do I proceed to mimic this behavior ? Do I have to manually fetch the tag in the URL and do things accordingly all by JavaScript ?
Thanks,
u could do it this way:
creating an url with hash from current url:
var url = window.location.href + '#Tab0';
reading a hash from current url:
var hash;
if (window.location.href.indexOf('#') > -1)
{
hash = url.split('#')[1];
}
you can do this by using location.hash:
//you can set hash
location.hash = "something";
//and read it eg. http://domain.com#something
console.log(location.hash); //will return the current hash value 'something'
Also you have to remember that if your anchor tag has hashed href attribute e.g. <a href="#something"> it will be appended automatically to current url and browser will try to find given id on the page. Of course you can prevent that default behaviour.

addition to url

I am developing my own template selector for CSS templates. At the moment, it works fine, clicking on a name from the selectbox changes the template. However there is 1 function that is missing.
If you look here: http://www.demo.joomforest.com/?template=corporate
you can obviously see the URL contains ?template=corporate at the end of it, thus if you enter that URL, it loads the corporate template.
This is my selector so far: http://joomjunk.co.uk/demo
As you can see, I added a hash + template name to the end of the url upon selecting a template, however if you copy and paste that URL into a new tab for example, it loads the default template.
So my question is, how can I add something similar to ?template=corporate and have it load the correct template upon loading that specific URL?
I'm not asking for the full code, but to point me in the right direction.
Thanks in advance.
window.location.search
This will contain whatever comes after the ? in your URL, including the ?
if
window.location.href === "http://www.demo.joomforest.com/?template=corporate"
then
window.location.search === "?template=corporate"
if you want to parse the query string, there are many resources available. If, however, you just want to do it for this specific case:
var tmpl = window.location.search.split('=')[1];
// tmpl === "corporate"
This will split the string on = and then return the second element in the array
If you have an URL like http://foo.bar/#corporate you can just check the window.location.hash in your javascript and load that template immediately.
Seems reasonable since you already add hashes in your dropdown – the user will see the same template if they choose to refresh the page.
You might even be able to trigger a click event on the right dropdown menu item based on the hash property, but that would require the DOM to be fully loaded.

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

Categories

Resources