Develop Reference

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

How to prevent canonical URL's

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)

how to change the url name while using effect.scrollto method

Hi i am using scroll to method for ging to particular places on a place but the url name is always same. Can't i have different url endings. I mean url always ends with #. Can't i have #products or #about. I am using this code.please help me
<span>ABOUT US</span>

You can just use the History API to push a URL change to the page when the user clicks on the link (https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history), for example using jQuery:
$("#start1").click(function(e){
e.preventDefault();
Effect.ScrollTo('about',{duration:1.0});
history.pushState(null, null, '#about');
});
Or you could look into using a straight up hash link, e.g. putting href="#about" into the anchor and preventing the hash jumping (How can I update window.location.hash without jumping the document?).
**EDIT
Heres a jsFiddle: https://jsfiddle.net/3uwkcebk/1/

Angularjs - Change URL without update current controller and template

i'm developing a front-end like pinterest, when the pin is clicked this should be loading in a modal, no problem here.
but a requirement is that, the URL should change when the modal is loaded and in the background must keep pins list.
I can't do it, tried using angular-ui, but when the URL change the ui-view elements are cleaned too
Here in stackoverflow are many similar questions, but the problem here is that not children URLs
url1: site.com / list / categorie -> url2: site.com / title
How I can change the URL and keep the current contents in the background?
thanks!

After few days i got it, this code must be in the controller
var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function(event) {
if($route.current.$$route.controller == 'modal'){
$route.current = lastRoute;
}
});
this will keep the current ngview HTML, but change the url
I found the solution here https://stackoverflow.com/a/12429133/1179213

You can most likely use HTML history's API. Check out this post. Updating address bar with new URL without hash or reloading the page
Since you are doing this outside of Angular, it should not affect anything but the URL.
Hope that works!

You can use a query parameter to highlight the correct image using $location.search and $watch-ers.

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.