How to prevent canonical URL's - javascript

I have an anchor link on home.php which goes link this:
<a href='#?id=$thought_id' class='toggle-comment' data-id='$thought_id' '> Comments ($num_of_comments) </a>
When hovering over this anchor link, I expect to see results like this:
localhost/#?id=210
But what I am getting it this:
localhost/home.php#?id=211
I have seen a similar question here: But, having applied what the best answer suggests, I still get the same results. I also have the exact same anchor link present on profile_page.php and it works perfectly there.
The anchor link is not meant to go anywhere, on click, it dynamically enlarges the div below it, showing comments.
Edit:
How anchor link works:
when clicked, the anchor link expands the div below it. When clicked, this div appears: echo "<div id='toggleComment$thought_id' class='new_comment'>";
Then for each new comment added to this thought, another div is echo'd
<div class='new_comm' id='thoughtId".$thought_id."-childId".$comment['id']."'>
JavaScript to achieve this:
$(function() {
$("a.toggle-comment").on("click", function(event) {
// prevents browser to go to href's #
event.preventDefault();
// uses Jquery's data() function to get comment id from link's data-id attribute
var id = $(this).data('id');
// get element by id and toggle display
var ele = document.getElementById("toggleComment" + id);
$(ele).toggle();
});
});
Edit 2:
Came to a conclusion with Rocki in chat. The issue was that I have the JavaScript defined twice, once in the source code of home.php and once in functions.js which was also in the head of home.php. Removed the script from the source code, and code began to function.

Everything behind # is interpreted as the hash fragment and not send to the server. Instead your browser change the hash fragment for the current page.
RFC 2396: Uniform Resource Identifiers (URI): Generic Syntax
The character "#" is excluded because it is used to delimit a URI
from a fragment identifier in URI references (Section 4).
https://www.rfc-editor.org/rfc/rfc2396

use
<a href='/#?id=$thought_id' class='toggle-comment' data-id='$thought_id' '> Comments ($num_of_comments) </a>
instead (added / before your url)

Related

Jquery each and attr

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

Passing in values into a jquery function with a # at the beginning

I have a script which is located in its own .js file, which I believe is used to look for a specific anchor and assign an onclick event where it will forward the user to another page.
$(document).ready(
function () {
"use strict";
$(".popup a").on(
'click',
function (event) {
event.preventDefault();
$("#the_link").click();
}
);
}
);
What does #the_link mean in the context of the rest of the code? I am trying to find out how and where it is getting its value from but I can't find it anywhere. Help!
I also replaced #the_link with www.google.com, but then after nothing happened where before a window pops up. What could I do to make it go to google? <-- testing purposes.
PS. I am very very new to javascript.
PSS. In honesty, I am not sure what is going on in that code above.
That is jquery, not plain javascript (so you might add the jquery tag to your question).
$() is jquery, and the # means get me the element with the id of "the_link". Go search your document for an id="the_link", there will be no # in the id field, the # is used to tell jquery you are querying by element id, as opposed to some other type of query (by other attribute, by class, etc).
In a valid HTML document, exactly one element may have a given id, so selecting by # is a way to refer to a unique element in the document.
$("#the_link") is jquery syntax, and it refers to the element with an id of "the_link" that is located in the HTML markup.
Somewhere in the HTML, you have (for example):
<a id="the_link" href="#">...</a>
Here, the href attribute is where you would insert the http://google.com to go to that link when the anchor element is clicked.
<a id="the_link" href="http://google.com">...</a>
Alternatively you can write in your javascript:
function (event) {
event.preventDefault();
window.location.href = 'http://google.com';
}
It means that you are accessing element with id the_link. Some of your elements in html has attribute id="the_link".
If you want to go to google.com when the_link is clicked:
document.getElementById("the_link").onclick = function(){
window.location.href="http://google.com" //this goes to google.com
};

Javascript dynamic link issues?

There might be a duplicate of this (I've tried checking questions on creating dynamic links but they reference a static link - I want this link to be hidden from the user). On testing the following code on the ww3 site:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("<a href="www.google.com">Google</a>");
</script>
</body>
</html>
I get:
http://www.w3schools.com/jsref/%22www.google.com%22
As the link address rather than www.google.com.
How do I correct this problem? And how do I make it so the link only appears after a set time? Note, this is a simplified version of the code for readability (the dynamic link will including two floating point variables assigned at the time the script is run).
An <a> tag's href must include the protocol http://, otherwise it links to a document relative to the page the link is on:
// Print quote literals, not html entities `"`
document.write("<a href='http://www.google.com'>Google</a>");
The use cases for document.write() are often limited since it can't be used after the page has loaded without overwriting the whole thing. A lot of the time you will want to create the element after the page has already rendered. In that case, you would use document.createElement() and appendChild().
// Create the node...
var newlink = document.createElement('a');
newlink.href = 'http://www.google.com';
// Set the link's text:
newlink.innerText = "Google";
// And add it to the appropriate place in the DOM
// This just sticks it onto the <body>
// You might, for example, instead select a specific <span> or <div>
// by its id with document.getElementById()
document.body.appendChild(newlink);
By the way, w3schools is not affiliated with the W3C, and their examples are generally not recommended since they are often out of date or incomplete.
You have 2 issues:
1) You need http:// before the URL so it's: http://www.google.com
2) You don't need to use quotes in document.write, but if you want to you can do one of these 3:
document.write('Google');
document.write("<a href='http://www.google.com'>Google</a>");
document.write("<a href=http://www.google.com>Google</a>");
Use the slash "\" to escape the quote
To make the link absolute, include the "http://" at the start of the url. Write out:
<a href="http://www.google.com">
instead of
<a href="www.google.com">
The second example will be treated as a relative url, like index.html for example.

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'));
});

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

Categories

Resources