Develop Reference

Combining on('click') with $(this)

First time posting here:
I want to know if it's possible to do this. If not what's the best approach. All I want is to attach click events to a list of anchor links and use $.get() to reload the icons. There is reason I am trying to do this is because when I use the usual $(this).on('click'), it works fine but the reloaded anchor links don't respond to the js script any more:
var wishlistBtn = $('.zoa-wishlist');
wishlistBtn.each(function(){
$(document).on('click', $(this), function(){
var url = $(this).attr('href');
$.get(url,function (data, textStatus, jqXHR) {
if(textStatus == 'success'){
$('div#product-button-group').load(location.href + ' div#product-button-group > *'); //Refresh the anchor links
}
});
return false;
});
});

You can do:
$(document).on('click', ".zoa-wishlist", function(){
/* ... */
});

Trigger an event using window.location.hash

I'm trying to trigger an event by clicking an external link from an email using the jquery/javascript window.location.hash. Unfortunately the app is built with angular and has a hash in the url initially https://www.electricstudio.ph/#/
I even tried adding the hash manually but the functionality doesn't seem to trigger. https://www.electricstudio.ph/#/
function slideSignUp() {
$('.header-form-container.signup').addClass('active');
}
$(document).ready(function() {
if (window.location.hash == '#sign-up') {
console.log('PING');
}
});

This usually works for me:
$(window).on('hashchange', function () {
hashUrl = window.location.hash;
if (hashUrl == "#sign-up") {
console.log('PING');
}
});

Set height of div after Jquery load()

I have a function that loads content into a div with Jquery. I'm trying to add to my function, the ability to set the height of the div to fit the content that I'm loading to it. I've tried several variations of the height() function and I've looked around at other people's code, but t I don't think I really understand how to incorporate that to my particular. Here's the function. It also has some code to update the URL. contentarea is the div where everything gets loaded and the div that needs resizing.
//Jquery loader
function getHash() {
return window.location.hash
}
$("a").on("click", function (e) {
var page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
}
else {
location.hash = hash;
}
});
e.preventDefault();
});'
Any help would be appreciated!
UPDATE: I updated the code with your help, but it's not really working. I figured I would add a div called content inside of contentarea, and use a callback function. What am I doing wrong?
'
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
}, function () {
$('#contentarea').height($('#content').height());
});
'

The documentation of the .load() provide a callback when the function is completed
JQuery doc
$('#contentarea').load(page, function(){},function(){})
The second function is called when the funciton load is completed.

You need to call callback function after content is loaded.
jQuery('#contentarea').load('externalpage.php', function() {
jQuery('#contentarea').height(jQuery('#content').height());
});

history.js - the correct implementation

i load my content on my site in a div called #container with JQuery/Ajax. I have to different types of of links:
normal anchor-links
JQuery-Triggers which fire an event when clicked on a specific div.
Now i want to add functionality to support back and forward browser-buttons and bookmark functionality. I came across history.js, but i have a few problems with it and can't find a really easy tutorial how to use it properly.
My links:
<a href='#imprint' class='link_imprint'>Imprint</a>
I read that it is better for SEO to use <a href="imprint/" ... but that URL would not be found on my server. So my first question is, how i can ensure that myurl.com/imprint is working and does not result in a 404-page?
Coming to history.js... At the moment i included the following code in my index.php right behind the <body>
<script>
$(document).ready(function(){
(function(window,undefined){
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
if ( !History.enabled ) {
// History.js is disabled for this browser.
// This is because we can optionally choose to support HTML4 browsers or not.
return false;
}
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
alert("state");
var State = History.getState(); // Note: We are using History.getState() instead of event.state
});
History.Adapter.bind(window,'anchorchange',function(){
});
var currentState = History.getState();
var currentUrl = currentState.url;
var urlParts = currentUrl.split('#');
$('#container').load('templates/'+ urlParts[1] +'.php');
$('#footer.credits').on('click','.link_imprint',function() {
var currentUrl = $(this).attr('href');
var urlParts = currentUrl.split('#');
History.pushState(null,null,currentUrl);
$('#container').load('templates/'+ urlParts[1] +'.php');
});
})(window);
});
With this code, after clicking the link the URL changes to: myurl/#imprint and imprint.php is loaded in the container.php. But when i now click the back-button the URL changes, but the content is still the one from the imprint. How can i ensure that the container refreshes with the old content? I think i forgot something, but i don't know what i should do. I tried it with statechange/anchorstate but none of both events will be fired when i click the back-button.
Thanks for helping me out.
P.S: I added an alert to the state change-event, but it will never be fired. That can't be correct, right? I can see the anchorchange-event fires, when i click on the link and the url changes to myurl.com/#imprint...

For older browsers, you can use this library: https://github.com/devote/HTML5-History-API it completely emulates the history in older browsers.
$( document ).ready(function() {
function loadContent( href ) {
alert( "loading content... from url: " + href );
// load dynamic content here
}
$( window ).bind( 'popstate', function( e ) {
// the library returns the normal URL from the event object
var cLocation = history.location || document.location;
alert( [ cLocation.href, history.state ] );
loadContent( cLocation.pathname + cLocation.search + cLocation.hash );
});
$('#footer.credits').on('click','.link_imprint',function() {
var currentUrl = $( this ).attr( 'href' );
loadContent( currentUrl );
history.pushState( null, null, currentUrl );
});
});

HTML 5 History - window.pushState not working

I am trying to ajax load the center content and update the URL without changing the page. This all works fine except until I try to access the history. It seems window.pushState is not recording my URL's properly or popstate event is not working properly. I can successfully ajax load the previous page, but if I press back more than once, it stays on the same page. Any help would be greatly appreciated!
$(document).ready(function() {
$('area, .ajax_link').live('click', function(event) {
change_image(this, event);
});
window.addEventListener('popstate', function(event) {
change_image(window.location, event);
});
});
function change_image(e, event) {
if($(e).attr('target') != '_blank') {
event.preventDefault();
$.post(
base_url+'/kit/ajax_load',
{ url: this_url},
function(return_data) {
$('#content img').attr('src', return_data.image_src);
$('map').html(return_data.imagemap);
},
'json'
);
history.pushState(null, null, this_url);
update_links(this_url);
}
}

Problem Solved
#Oliver Nightingale: I needed to remove history.pushState from my change_image function. You can not call history.pushState during an onpopstate. Here is the entire working code. I shortened it above only to include the necessary parts in question. I will be adding some fallbacks next. This is tested and works in Chrome & Firefox. Tested and does not work in IE.
$(document).ready(function() {
$('area, .ajax_link').live('click', function(event) {
history.pushState(null, null, $(this).attr('href'));
change_image(this, event);
});
window.addEventListener('popstate', function(event) {
change_image(window.location, event);
});
});
function change_image(e, event) {
if(!e instanceof jQuery) {
var this_url = e;
}
else {
var this_url = $(e).attr('href');
}
if($(e).attr('target') != '_blank') {
event.preventDefault();
$.post(
base_url+'/kit/ajax_load',
{ url: this_url},
function(return_data) {
$('#content img').attr('src', return_data.image_src);
$('map').html(return_data.imagemap);
},
'json'
);
update_links(this_url);
}
}

Is the main body of change_image function happening onpopstate? If so it looks like you are pushing a new state everytime you pop a state, this could be causing some issues.
If you are using pushState for routing you could try using a library such as Davis to make things simpler.

How is $(e).attr('target') != '_blank' when e is window.location ?
As you are using the native HTML5 History API, you'll also want to have a check before history.pushState(null, null, this_url); to only call that if we are from a link.
Plus window.addEventListener('popstate', function(event) { the variable event here is actually the state's data.
See the following gists for working examples:
https://gist.github.com/balupton/1145804 - without history.js
https://github.com/browserstate/ajaxify - with history.js