How can I trigger on URL change in jQuery? - javascript

How can I trigger a function when the URL changes? I try something like:
$(windows.location).change(function(){
//execute code
});
So my URL is something like http://www.mysite.com/index.html#/page/1. How can I execute jQuery or JavaScript code when the URL becomes something like http://www.mysite.com/index.html#/page/2?

That would be a hashchange event, so I'd suggest:
$(window).on('hashchange', function(e){
// do something...
});
JS Fiddle demo.
References:
on().

Try the hashchange event, which is built exactly for this - http://benalman.com/projects/jquery-hashchange-plugin/

var current_href = location.href;
setInterval(function(){
if(current_href !== location.href){
// if changed Do ...
current_href = location.href;
}else{
// Do ...
}
},500);
This worked for me ^^
$(window).on('hashchange') // not firing

You could also try using http://www.asual.com/jquery/address/
$(function(){
$.address.strict(false);
$.address.internalChange(function(e) {
// do something here
});
});

To Detect URL change only for pop use
window.onpopstate = function (event) {
//enter code here
}

Related

How to trigger an event when hash location changes

I'm trying to trigger an event when the hash changes inside my url using the method onhashchange. I'm calling it, but it doesn't ever seem to get executed.
I've tried the following.
$(function () {
window.addEventListener("onhashchange", function () {
alert("Here");
});
window.onhashchange = function () {
alert("Changed");
}
)};
is there any reason why these functions aren't being called?
You should write 'hashchange' instead of 'onhashchange' in your first example.
This code works fine for me, at least in Chrome:
window.addEventListener('hashchange', function(e){
console.log('changed');
})
Here is short code-snippet:
https://jsfiddle.net/bm8jjwmq/
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
▲ For Support // ▼ implementation
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
Source: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

Jquery function doesn't work after Ajax call

I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers
class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference
I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.
The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});

livequery doesn't bind after a DOM insertion

I don't understand why livequery doesn't bind the event, but I have to use .click.
This is just an example, which might also use the .click(), but in the real code I'm forced to use livequery.
Does anyone know why livequery isn't working?
function bind_remove(comment){
var id = comment.attr('comment_id');
comment.find(".remove").livequery("click", function(e){
$.post("/deleteComment", {id: id}, function(response){
comment.remove();
comments = comments_container.find('.comment');
});
});
}
$(document).ready(function(){
var comments_container = $('#comments_container');
var comments = comments_container.find('.comment');
comments.each(function(){
bind_remove($(this));
});
$(".submit_button").livequery("click", function(e){
$.post("/newComment", {text: textarea.val()}, function(response){
comments_container.last().append($(response).fadeIn('slow',function(){
comments = comments_container.find('.comment');
bind_remove(comments.last());
}));
});
});
});
Try replacing
comment.find(".remove").livequery("click", function(e){
with this
comment.find(".remove").live("click", function(e){
I added a random id to the last comment, then I selected it with $('#myid'), not using 'last()'. Then I bind it and started to work

Link detect and replace the other,in js

Hello
I wonder how Replace automatically links on my site
that start with:
http://site.com/00000/
to:
http://site.com/11111/
detects> replaces
CSS3 attribute "starts with" selectors help you there (and jQuery supports them on all of the browsers it supports — with native features if possible, for speed). Then just use an each loop and update the href property of the raw a element:
$("a[href^='http://site.com/00000/']").each(function() {
this.href = "http://site.com/11111/" + this.href.substring(21);
});
You can use jQuerys .attr() method. You don't need to explicitly invoke .each(), jQuery will take care of you if your selector hits multiple nodes. Since version 1.4.1, .attr() like many other setters, takes a function as argument. This function gets the index and the actual value passed in. Whatever you return from this callback is going to be the new value.
$(document).ready(function () {
$('a').attr('href', function(_, href) {
return href.replace('246619', '262257');
});
});
Demo: http://www.jsfiddle.net/qR2NU/
Reference: .attr()
<script type="text/javascript">
$(document).ready(function () {
var urlContain = new RegExp('Detect Value Here');
$('a').each(function () {
var href = this.getAttribute('href').replace(urlContain, 'Replacement here');
$(this).attr('href', href);
});
});
</script>
This code loops through every link on the page that has a href attribute once the DOM has loaded and performs the required replace:
$(function() {
$('a').each(function() {
var href = $(this).attr('href');
if (href !== undefined) {
href = href.replace(/246619/g, '262257');
}
$(this).attr('href', href);
});
});
The above relies on jQuery but judging by the tags you used for your question, you are already using it.
Untested:
$("a[href^=http://site.com/00000/]").each(function() {
this.href = "http://site.com/11111/" + this.href.substr("http://site.com/00000/".length");
});

Can I make the browser follow a link after a certain amount of time with jQuery?

I want make a hyperlink turn active and go to that page after a certain amount of time or on pageload. Is this possible with jQuery?
Try this:
setTimeout(followLink, 10000); // 10 seconds
function followLink() {
window.location = jQuery('#myLink').attr('href');
}
jQuery(function() {
followLink();
});
I'll also just note that there's nothing particular to jQuery about this: you could pretty easily do the same thing with plain vanilla JS.
I like this way of doing it:
On document ready:
$(function(){
window.location = $('#link').attr('href');
});
2 seconds after document ready:
$(function(){
setTimeout(function(){
window.location = $('#link').attr('href');
},2000);
});
This jQuery script should do the job:
$('a').click(function(e){
e.preventDefault();
var link = $(this);
setTimeout(function(){
window.location = link.attr('href');
},3000);
});

Categories

Resources