CODEWITHSUNDEEP
javascriptjqueryhref
Joe K
Joe K

Reputation: 1

Use javascript to simulate a click event on javascript: href

I'm using a 3rd party system that allows us to add custom javascript and I need a way to look for a custom URL and then have the system pop up the user login which is called by clicking on href="javascript:;"

< a class="nav-link" href="javascript:;"> < b>sign in</b></ a>

Note the class="nav-link" is NOT unique

I have no issue looking for custom URL and doing various actions, but I don't know how to perform a simulated click event on that javascript href so that it pops up the user login.

For instance landing on: "https://our.site.com/webstoreNew/services/guestprofile" The custom URL portion is "guestprofile" and it doesn't get redirected by main system and stays

I've tried the following:

<script>
const guest_url = "https://our.site.com/webstoreNew/services/guestprofile";
let current_url = window.location.href;


if(current_url === guest_url) {

$('href="javascript:;"')[0].click();
}

</script>

other things tried:

$(javascript:;)[0].click();
$(href="javascript:;")[0].click();

I feel like this is probably a syntax issue, but need someone's help

Upvotes: 0

Views: 1091

Answers (2)

Aib Syed
Aib Syed

Reputation: 3196

EDIT: updated with more of your code and removed code that would work in snippet.

Check my snippet below, just create a function and call it like in my example below fakeClick();.

If you want to target the href you mentioned you can use querySelector like this:

const href = document.querySelector('[href="javascript:;"]');

The snippet below will not trigger a click because we are using window.location.href; which isn't supported in stackoverflow snippets. That being said, if you run this in your project it will function as expected.

//your guest url
const guest_url = "https://our.site.com/webstoreNew/services/guestprofile";

let current_url = window.location.href;

//this is the a element where we trigger the click
const href = document.querySelector('[href="javascript:;"]');

console.log(href);


//this is the function
//if both are equal it will trigger a click on atag
function fakeClick() {
if(current_url === guest_url) {

href.click();
}
}

//here we are calling the function so it will run immediately
fakeClick();
<a class="nav-link" href="javascript:;"><b>sign in</b></a>

Additionally, as @Oskar Grosser mentioned, if you want to use the code from your example you just need to change the incorrect call from this:

$('href="javascript:;"')[0].click();
}

To this:

$('[href="javascript:;"]')[0].click();
}

As you can see the adjusted Jquery matches the querySelector call, and should function the same way.

Upvotes: 1

Oskar Grosser
Oskar Grosser

Reputation: 3454

With jQuery you query for one or more elements using CSS Selectors.

Since you want to query for an exact attribute, you have to format the query-string like this:
[attributeName="value"]

Another note is, what you query for has to be in a String. With your other attempts, the browser tries to resolve javascript and href as if these were variables, hence the errors.

The call of click() itself is correct, that will fire a click-event.

// Setup for feedback; ignore
$("a").click(() => console.log("'a' was clicked!"));

// Correct query
$('[href="javascript:;"]').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;">A link</a>

Upvotes: 0

Related Questions