Remove hashtag(#) from url - javascript

I want hash-tags to be removed from URL after they are used.
For example, when i click on the link below:
<button type="button" name="" value="" id="btnq1">Just a button</button>
I want the hash-tag #btnq1 that appears to the URL of the page to be removed just after the action on this link happens.
I tried the below jquery code with no success:
$('#btnq1').click(function(event){
event.preventDefault();
// your action
});
And even if this works, then how do i implement it to work for every hash tag that is added to the URL?
I would like to solve it using javascript.

You could try that:
$(window).on('hashchange', function(e){
history.replaceState ("", document.title, e.originalEvent.oldURL);
});

first add a class to your a tag that you want this behavior for, or a html 5 data- attribute. Then your link becomes;
<button>Button</button>
$('body').on('click', ".remove-hash", function(e){
$(this).removeAttr('href');
});

Related

JavaScript event execute immediately after bind? [duplicate]

I have a link:
<ul id="titleee" class="gallery">
<li>
Talent
</li>
</ul>
and I am trying to trigger it by using:
$(document).ready(function() {
$('#titleee').find('a').trigger('click');
});
But it doesn't work.
I've also tried: $('#titleee a').trigger('click');
Edit:
I actually need to trigger whatever get's called here <a href="#inline" rel="prettyPhoto">
If you are trying to trigger an event on the anchor, then the code you have will work I recreated your example in jsfiddle with an added eventHandler so you can see that it works:
$(document).on("click", "a", function(){
$(this).text("It works!");
});
$(document).ready(function(){
$("a").trigger("click");
});
Are you trying to cause the user to navigate to a certain point on the webpage by clicking the anchor, or are you trying to trigger events bound to it? Maybe you haven't actually bound the click event successfully to the event?
Also this:
$('#titleee').find('a').trigger('click');
is the equivalent of this:
$('#titleee a').trigger('click');
No need to call find. :)
Sorry, but the event handler is really not needed. What you do need is another element within the tag to click on.
<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>
Jquery:
$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works
This is all about what you are clicking and it is not the tag but the thing within it. Unfortunately, bare text does not seem to be recognised by JQuery, but it is by vanilla javascript:
document.getElementById('test1').click(); // Works!
Or by accessing the jQuery object as an array
$('#test1')[0].click(); // Works too!!!
Since this question is ranked #1 in Google for "triggering a click on an <a> element" and no answer actually mentions how you do that, this is how you do it:
$('#titleee a')[0].click();
Explanation: you trigger a click on the underlying html-element, not the jQuery-object.
You're welcome googlers :)
If you are trying to trigger an event on the anchor, then the code you have will work.
$(document).ready(function() {
$('a#titleee').trigger('click');
});
OR
$(document).ready(function() {
$('#titleee li a[href="#inline"]').click();
});
OR
$(document).ready(function() {
$('ul#titleee li a[href="#inline"]').click();
});
With the code you provided, you cannot expect anything to happen. I second #mashappslabs : first add an event handler :
$("selector").click(function() {
console.log("element was clicked"); // or alert("click");
});
then trigger your event :
$("selector").click(); //or
$("selector").trigger("click");
and you should see the message in your console.
Well you have to setup the click event first then you can trigger it and see what happens:
//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
evt.preventDefault();
alert($(this).attr('href'));
});
// now the manual trigger
$myLink.trigger('click');
This is the demo how to trigger event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</body>
</html>
This doesn't exactly answer your question, but will get you the same result with less headache.
I always have my click events call methods that contain all the logic I would like to execute. So that I can just call the method directly if I want to perform the action without an actual click.
For links this should work:
eval($(selector).attr('href'));
You should call the element's native .click() method or use the createEvent API.
For more info, please visit: https://learn.jquery.com/events/triggering-event-handlers/
We can do it in many ways...
CASE - 1
We can use trigger like this : $("#myID").trigger("click");
CASE - 2
We can use click() function like this : $("#myID").click();
CASE - 3
If we want to write function on programmatically click then..
$("#myID").click(function() {
console.log("Clicked");
// Do here whatever you want
});
CASE - 4
// Triggering a native browser event using the simulate plugin
$("#myID").simulate( "click" );
Also you can refer this : https://learn.jquery.com/events/triggering-event-handlers/
Shortest answer:
$('#titlee a').click();

continue click action after preventDefault [duplicate]

How could one trigger the default action/event of a HTML link (anchor element)? That is to use JavaScript/jQuery to "click" an existing HTML link, as if the user has clicked it.
Just using .click() does not seem to work.
$('#alink').click();
// the nothing happening
For this HTML:
<a id="alink" href="http://google.com" target="_blank">a link</a>
Example fiddle: http://jsfiddle.net/dCfD8/
I'd rather not create a new window in JavaScript (and take care of whatever else needs to be handled when a link is clicked).
You can trigger the click event using a simple trigger method in jQuery.
$('#alink').trigger('click');
Beware though, that even in the event gets fired, the browser will not follow the link href. The only way to follow the href is to actually click it with the mouse yourself.
As far as I know, there is no way to force a link to behave as if it were clicked. You have to change the document location or something like that to actually navigate between pages.
Expanding on Fabio Cicerchia's comment to his own post: You can use window.open:
var link = $('#alink');
var target = link.attr("target");
window.open(link.attr("href"), target ? target : "_self");
<script src='jquery lib source' ></script>
<script>
function force()
{ ...do something...to fill page2
$('#gopage2').trigger('submit');
}
</script>
<form action='#page2' id='gopage2'>
</form>
...
<span name='#page2'>This is page2</span>
try this:
$('#alink').trigger('click');

set attribute with .href and .attr('href') and jquery ID selectors

I tried to use javascript and jquery to set the href attribute of tag since I need to download pictures from canvas.However, I confronted some problems. I couldn't figure out the reason, so I post my question here.
If I use id to set the listener, the listener function doesn't catch the event, just like the png button beneath.
Compare the jpegBtn2 and jpegBtn, I used plain javacsript to set the former href attribute and for the latter one, I used jquery to do the manipulation. Both methods can download pictures, but the picture downloaded by the jpegBtn2 method couldn't open correctly. Later I checked out the chrome console, I found that the href of jpegBtn2 remained "#", but the href of jpegBtn changed.I had no idea with this.
Here is my code:
if(!setDownloadDialogOrNot){
$('div.dialogBtnSet').append('<a class="jpegBtn2" id="jpegBtn2Id" type="button" href="#">close</a>');
$('div.dialogBtnSet').append('<a class="jpegBtn" type="button" href="#">jpeg</a>');
$('div.dialogBtnSet').append('<a id="pngBtn" type="button" href="#">png</a>');
setDownloadDialogOrNot=true;
};
$('.jpegBtn2').on('click',function(){
setDownloadCanvas(1);
$('.jpegBtn2').attr('download',filename+'.jpeg');
document.getElementById('jpegBtn2Id').href=document.getElementById('downloadCanvas').toDataURL('image/jpeg'));
$('div#downloadDialog').dialog('close');
});
$('.jpegBtn').on('click',function(){
setDownloadCanvas(1);
$('.jpegBtn').attr('download',filename+'.jpeg');
$('.jpegBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/jpeg'));
$('div#downloadDialog').dialog('close');
});
$('#pngBtn').on('click',function(){
setDownloadCanvas(0);
$('#pngBtn').attr('download',filename+'.png');
$('#pngBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/png'));
$('div#downloadDialog').dialog('close');
});
`
For binding events to elements added dynamically you need to use
$(initallyLoadedContainerElement).on('click', 'selector',function(){})
http://api.jquery.com/on/#direct-and-delegated-events
$(document).on('click', '.jpegBtn2',function(){
setDownloadCanvas(1);
$('.jpegBtn2').attr('download',filename+'.jpeg');
document.getElementById('jpegBtn2Id').href=document.getElementById('downloadCanvas').toDataURL('image/jpeg'));
$('div#downloadDialog').dialog('close');
});
$(document).on('click', '.jpegBtn',function(){
setDownloadCanvas(1);
$('.jpegBtn').attr('download',filename+'.jpeg');
$('.jpegBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/jpeg'));
$('div#downloadDialog').dialog('close');
});
$(document).on('click', '#pngBtn',function(){
setDownloadCanvas(0);
$('#pngBtn').attr('download',filename+'.png');
$('#pngBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/png'));
$('div#downloadDialog').dialog('close');
});

How to call click() for element?

I am using a lightgallery plugin where the click event is defined as:
$(document).on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
event.preventDefault();
});
However, when I try to call the event like this:
$(".catalog-content a[data-lightbox='test']").first().trigger('click');
... it doesn't seem to work. What am I doing wrong? How can I trigger the click event?
Example jsFiddle
To "simulate a click" using jQuery, you are correct in that you can just use the .trigger(...) method:
$(".myClass").trigger("click");
The real issue is that you are "clicking" something that doesn't exist. There is no ".catalog-content a[data-lightbox='test' element. As Velthune suggests, you can add the .catalog-content class to the div container to fix this; however, note that there also is no a[data-lightbox='test'] element.
Instead, in your Fiddle you define the following:
<a href="http://..." data-lightbox="350xi" id="test">
something
</a>
So you actually just want to click on the first a element with a data-lightbox attribute of "350xi":
$("a[data-lightbox='350xi']").first().trigger("click");
Hey i have gone through the jsfiddle and updated it please go through it..
$(document).ready(function() {
$(".cars-container a[rel!='']").click(function() {
var rel = $(this).attr("rel");
$(".cars-container a[data-lightbox='" + rel + "']:first").trigger('click');
});
});
click below jsfiddle link to see the working example:-
http://jsfiddle.net/wHJ8E/3/
Your code in fiddle can't work.
1) Either use a different selector as Devendra suggested.
2) Or add the .catalog-content class to the div container:
<div class="cars-container catalog-content">
Fiddle
3) Both Devendra and I can't understand.

First fire event and then go to url

I have something like this im my project:
<input onchange="doSomething();" .... />
<a href="url" ... ></a>
If input field is focused and I click 'a' link, the browser goes to URL and the event onchange fires only after that. But I want at first to run function "doSomething()" and only then go to the url. How to solve it better?
remove the inline javascript and use jQuery. Preferably you would add some ID's or classes to those elements to target them.
$('input').on('change', doSomething);
$('a').on('click', function(e) {
e.preventDefault();
doSomething();
document.location.href = this.href;
});
Assuming doSomething() is not asynchronous, as that would be completely different.
You could do something like this with jQuery (Not tested)
..
$('a').click(function(){
dosomething();
$(this).attr('href', 'url');
});
instead of onchange event, use onblur at Input.
<input onblur="doSomething();" type="text" />
Hello
Test the demo from http://jsfiddle.net/Bhaarat/V3wT9
if requirement can be satisfied with javascript only then why to create overhead of jquery ?
Please let me know reason for downvote

Categories