I am trying to have a variable that always matches the hash of the URL on a single page site.
$(window).on('hashchange', function() {
var hashTag = window.location.hash;
$('#btn').click(function(){
console.log(hashTag)
});
});
Using the code above creates a list of all the past changes rather than the current hash.
hashTag.last();
This didn't work
That is because you are attaching button click event listener again and again. Please move your button event listener outside hashchange event, like below
var hashTag = "";
$(window).on('hashchange', function() {
hashTag = window.location.hash;
});
$('#btn').click(function(){
console.log(hashTag)
});
Now, there is permanent event listener attached to button which display value of hashTag variable. And on hashchange value of hashTag variable is updated.
Related
I am using hashchange event to ask a confirmation dialog box saying that the data in the current page will be lost, if moved.
I've implemented like this:
window.onhashchange = function() {
if(window.confirm("Do you really want to close?")){
}
};
This event is triggered correctly. But the page is not changing if the user clicks yes. What do I need in the {...}?
Please try
window.onhashchange = function() {
if (window.confirm("Do you really want to navigate?")) {
location.hash = location.hash; // or set the hash elsewhere and change here
}
};
I have an application where some actions are taking place on click event of buttons. Also, I want to append a query string on every in the app. For this, I have written a jquery code, which is as follows:-
window.addEventListener('click', function(event) {
event.preventDefault();
var href = event.target.getAttribute("href");
if(href && href.indexOf('http') !== -1) {
timezone = jstz.determine()
window.location.href = href + '?jstz=' + timezone.name();
}
else
{
// re-enable default;
}
}, false);
The code prevents the default action of every click event. Then checks if the event generator has href attribute. If it has href attribute, then it appends the current client timezone in the url.
The problem is, the above code prevents the click event of every clickable object.
How can I re-enable the default action?
Is there any way by which I can use event.preventDefault() for only anchor tags?
You can implement you logic with event listener on a jquery selector as:
$("#target").click(function(event) {
event.preventDefault();
var href = event.target.getAttribute("href");
// blah blah
});
This way, for this example, prevent default is called only if the element with id target is clicked.
For more on jquery selectors: https://www.w3schools.com/jquery/jquery_ref_selectors.asp
I want to call the same action whenever the button is clicked, or the hash changed event occurred. Even if the hash changed event means just loading the page for the first time and redirecting to something like #something.
What I had so far, is basically duplicated code. The same code for a hashchange event, and for button clicked. I am looking for a solution not to have the code duplicated, but to call the hashchange event from a button clicked event. Here is my code so far.
main.js
$(window).bind('hashchange', function() {
// get User from the URL
var user = window.location.hash.substr(1);
// update the value in a text input with new ASIN
document.getElementById('asin_input').value = asin;
$.getJSON("/api/user/"+user, function (data) {
// ...
});
}).trigger('hashchange');
/*
* Whenever a button "Search!" is clicked, this function gets called.
*/
element.addEventListener('click', function () {
var user = $('#user_input').val();
$.getJSON("/api/user/"+user, function (data) {
// ...
});
});
Now the entire thing inside getJSON, and including the getJSON is duplicated, so I would want just the onClick calling/triggering the hashchange, which triggers getJSON. How to do this?
I am trying to create a dynamic hyperlink that will download an image retrieved from the server.
The code I am using:
HTML:
<a class="btn" id="controlDownloadJPEG" download>Save & Download</a>
JS:
this.downloadJPEGClickHandler = function() {
CollageCore.downloadJPEG(function(data){
$("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
});;
return true;
};
The href is getting changed on click, but the link itself is linking to the href set before my JavaScript executes. The first click does nothing as there is no default href and the second click will download what the first click should have downloaded.
I have seen suggestions to use JavaScript window.href instead of relying on the html tag itself. The reason I need to use the html tag is for its download functionality.
You are treating an asynchronous call as it it is synchronous. It is like ordering a delivery pizza and expecting it to be there as soon as you place the order. That does not happen unless you are standing in the restaurant and it is already been made.
You need to cancel the click and fire the page change manually when the call comes back. So you want to use window.location.href = "new path"; instead of setting the href.
this.downloadJPEGClickHandler = function() {
CollageCore.downloadJPEG(function(data){
window.location.href = "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl;
});
return false; //or preventDefault if you pass in event object
};
If you are are attaching this activity to an onClick(event) handler you should be able to stop the redirect by passing in event.preventDefault();
cite: http://api.jquery.com/event.preventdefault/
Prevent the default click behavior, change the href attribute, and then imitate the click. Should work.
$( "a" ).click(function( event ) {
event.preventDefault();
$("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
$(this).click();
});
This question already has answers here:
How do I programmatically click a link with javascript?
(12 answers)
Closed 8 years ago.
I have a question about Javascript event here. I have an <a> tag like this:
<a id='aTag' href='http://example.com'>Click to redirect</a>
Then I call an event like:
<script>
$('#aTag').click();
//or
$('#aTag').trigger('click');
</script>
It does not redirect me to http://example.com. I tried to add an onClick() event in the <a> tag like this:
<a id='aTag' href='http://example.com' onclick='alert("Event happened");'>Click to redirect</a>
And then call the .click() event. It shows me alert("Event happened");
Can anyone show me how to call the .click() event correctly, or correct this redirect with issue with the href in that <a> tag?
In my business I just need an <a> tag, so not with the window.open or windown.location.
Explanation
Redirects can only happen if the user clicks directly on the link. Programmatic or deferred click triggers do not work.
An alternative would be:
to change directly the window.location
to open the link in a new tab/window
Changing window.location
window.location="http://wherever.you/want/to/g0";
or
window.location=$('a.selector').attr('href'); // to use a link's address
New tab/window
You cannot programmatically (click() or trigger) open new tabs/ windows or redirect. They get (ad-)blocked. automatically
So new tab/window openings always have to be triggered by user action. (Otherwise we'd always be full with popup ads)
So 1st of all, make sure that your js is executed on a user event, and then you should be able to use window.open.
JsFiddle example
html:
new tab google
<button class="user">user triggered</button>
<button class="programatic">programatic</button>
js:
$('a').on('click', function(e) {
console.log('clicked', e);
// unfortunately although we simulated
// the click on the <a/> , it will still
// not launch a new window - idk why.
// therefore we can use the line below
// to open the <a>'s href in a new tab/window
// NOTE: this will only occur if the execution was
// triggered by the user
window.open(e.currentTarget.href);
});
var simulateClick = function(origEv) {
var e = $.Event("click");
e.ctrlKey = true;
e.metaKey = true;
e.originalEvent = origEv;
$('a').trigger(e);
};
$('button.user').on('click', function(e) {
// this call will actually open a window
simulateClick(e);
});
$('button.programatic').on('click', function(e) {
// this will result in a blocked popup
$.get('/someurl').always(function() {
// executes the method after a non-user event
// results in blocked popup
simulateClick(e);
});
});
// this will result in a blocked popup
setTimeout(simulateClick, 1000);
Try this -
<a id="aTag" href="http://mylink.com" onclick="return doWork();">Click to redirect</a>
<script>
function doWork(){
//... do your works
return true; // then return true to redirect
}
</script>
Here is the fiddle - http://jsfiddle.net/gcJ73/
(Though the fiddle attributes are a little different to show you that it works)
or with jQuery:
//first assign the click handler
$('#aTag').click(function(){
//... do your work
return true;
});
//then call programmatically
$("#aTag").click(); or $("#aTag").trigger("click");
BTW programatically calling it will not redirect. Will just call the event handler, not redirect.
jQuery fiddle - http://jsfiddle.net/gcJ73/3/
Try:
<script>
jQuery('#aTag').click(function() {
// Your Code
});
</script>
jQuery('#aTag').click() does not execute the href attribute of an anchor tag so you will not be redirected, do:
$(document).ready(function() {
jQuery('#aTag').click( function (e) {
window.location.href = this.href;
});
});
<a id='aTag' href='http://mylink.com' onclick="location.href='http://mylink.com';">
Click to redirect
</a>
check this code snippet, also it will work like what you want to do.