history.js - the correct implementation - javascript

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 );
});
});

Related

Handling State changes jQuery and History.js

Ok, so I need some insight into working with History.js and jQuery.
I have it set up and working (just not quite as you'd expect).
What I have is as follows:
$(function() {
var History = window.History;
if ( !History.enabled ) {
return false;
}
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('.ajax-link').click(function(e) {
e.preventDefault();
var url = this.href; //Tells us which page to load
var id = $(this).data('passid'); //Pass ID -- the ID in which to save in our state object
e.preventDefault();
console.log('url: '+url+' id:'+id);
History.pushState({ 'passid' : id }, $(this).text(), url);
});
History.Adapter.bind(window, 'statechange', function() {
console.log('state changed');
var State = History.getState(),
id = State.data.editid; //the ID passed, if available
$.get(State.url,
{ id: State.data.passid },
function(response) {
$('#subContent').fadeOut(200, function(){
var newContent = $(response).find('#subContent').html();
$('#subContent').html(newContent);
var scripts = $('script');
scripts.each(function(i) {
jQuery.globalEval($(this).text());
});
$('#subContent').fadeIn(200);
});
});
});
}); //end dom ready
It works as you'd expect as far as changing the url, passing the ID, changing the content. My question is this:
If I press back/forward on my browser a couple times the subContent section will basically fadeIn/fadeOut multiple times.
Any insight is appreciated. Thanks
===================================================
Edit: The problem was in my calling all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
The problem was in my calling of all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.

How to determine if content in popup window is loaded

I need to set some contextData for a popup window from its parent. I try this:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.contextData = contextData
//w.context data is null in the popup after the page loads - seems to get overwritten/deleted
});
});
It doesn't work, so my next thought, wait until content is loaded
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.onload = function() {
//Never Fires
w.contextData = contextData;
}
});
});
See this fiddle. My onload method never fires.
This works:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
setTimeout(function(){
if(w.someVariableSetByThePageBeingLoaded) {
w.contextData = contextData;
}
else{
setTimeout(arguments.callee, 1);
}
}, 1);
});
});
But has obvious elegance problems (but is the current work around).
I know you can go the other way (have the popup call back to a method on the opener/parent, but this forces me to maintain some way of looking up context (and I have to pass the key to the context to the popup in the query string). The current method lets me capture the context in a closure, making my popup a much more reusable piece of code.
I am not trying to do this cross domain - both the parent and popup are in the same domain, although the parent is an iframe (hard to test with jsfiddle).
Suggestions?
If you are doing this with an iframe try it this way
HTML
<button id="clickme">Click Me</button>
<iframe id="framer"></iframe>
​
Javascript
$(function() {
$('#clickme').click(function() {
$("#framer").attr("src","http://jsfiddle.net");
$("#framer")[0].onload = function(){
alert('loaded');
};
});
});​
I updated your jsfiddle http://jsfiddle.net/HNvn3/2/
EDIT
Since the above is completely wrong this might point you in the right direction but it needs to be tried in the real environment to see if it works.
The global variable frames should be set and if you
window.open("http://jsfiddle.net","child_window");
frames["child_window"] might refer to the other window
I got javascript access errors when trying it in jsfiddle - so this might be the right track
EDIT2
Trying out on my local dev box I was able to make this work
var w = window.open("http://localhost");
w.window.onload = function(){
alert("here");
};
the alert() happened in the parent window

AJAX URL append conflicting with stored jQuery .data()

I've got a document.ready function that stores all of the data in preparation for a popover on :hover.
domReady( function() {
$('.foo').each( function() {
var el = $(this);
var el_content = el.find('[data-content]');
el.data( 'content-attr', { content: el_content, classes: el_classes } );
} );
} );
Everything works fine by default, but when the URL is appended for AJAX sorting, I lose my window ref I suppose, because the following event handler returns undefined when accessing the data which is accessed without issue when the URL is not appended. I'm aware that this must be a window reference issue in the event handler, can someone point me to the correct way to reference window so that that the jQuery object where data is stored on load is accessible to .on( 'hover', function() { //do stuff }); while the URL is appended for AJAX?
$( window ).on( 'hover', '[rel="popover"]', function() {
var el = $(this);
var this_content_data = el.data( 'content-attr' ).content;
function() {
// do stuff
}
} );
In the case of this particular issue, I realized the only way to do this was to store the data in a jQuery .data attribute on the initialization of the view for access by the function on $(window).element.on( 'hover', ...){}.

jstree - node selection based on current navigated url

Today I'm using the built-in cookies of the jsTree in order to preserve user navigations in the tree.
on node click in the tree the user is redirected to the corresponding page in my site and the clicked node is selected/highlighted thanks to the jsTree cookies integration.
Now, I would like to to select/highlight nodes in the tree also based on a navigation among the web site, i.e., a link in the site might also be a node in the tree, for example, a grid of rows that also appears in the tree.
The question is how can I do this 'manually' node selection/highlighting and I also think that I should know from where the user arrived to the page, from the tree or from some other link in the site.
Thanks,
I already built a complete approach for this using jsTree, hashchange event and actual real SEO-able URLs so this would fit into your idea quite simply and you could toss your cookies but not in a bad way. This also works with bookmarking and arriving from a URL as it looks through the nodes then matches the links to select the node. This is best with AJAX though as it should be when possible.
I'm commenting this for you so you can understand it. The working example is here www.kitgui.com/docs that shows all the content.
$(function () {
// used to remove double reload since hash and click are intertwined
var cancelHashChange = false,
// method sets the selector based off of URL input
setSelector = function (path) {
var startIndex = path.indexOf('/docs');
if (startIndex > -1) {
path = path.substr(startIndex);
}
path = path.replace('/docs', '').replace('/', '');
if ($.trim(path) === '') { path = 'overview'; }
return '.' + path;
};
// sets theme without the folders, plain jane
$('.doc-nav').jstree({
"themes": {
"theme": "classic",
"dots": true,
"icons": false
}
}).bind("loaded.jstree", function (event, data) {
// when loaded sets initial state based off of priority hash first OR url
if (window.location.hash) { // if hash defined then set tree state
$.jstree._focused().select_node(selector);
$(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click');
} else { // otherwise base state off of URL
$.jstree._focused().select_node(setSelector(window.location.pathname));
}
});
// all links within the content area if referring to tree will affect tree
// and jump to content instead of refreshing page
$('.doc-nav a').live('click', function (ev) {
var $ph = $('<div />'), href = $(this).attr('href');
ev.preventDefault();
cancelHashChange = true;
// sets state of hash
window.location = '#' + $(this).attr('href');
$('.doc-content').fadeOut('fast');
// jQuery magic load method gets remote content (John Resig is the man!!!)
$ph.load($(this).attr('href') + ' .doc-content', function () {
cancelHashChange = false;
$('.doc-content').fadeOut('fast', function () {
$('.doc-content').html($ph.find('.doc-content').html()).fadeIn('fast');
});
});
});
// if doc content is clicked and has referring tree content,
// affect state of tree and change tree content instead of doing link
$('.doc-content a').live('click', function (ev) {
ev.preventDefault();
if ($(this).attr('href').indexOf('docs/') > -1) {
$.jstree._focused().select_node(setSelector($(this).attr('href')));
$(setSelector($(this).attr('href')) + ' a:first').trigger('click', false);
}
});
// if back/forward are used, maintain state of tree as if it was being clicked
// refers to previously defined click event to avoid double-duty
// but requires ensuring no double loading
window.onhashchange = function () {
if (cancelHashChange) { cancelHashChange = false; return; }
$.jstree._focused().select_node(setSelector(window.location.hash.substr(1)));
$(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click', false);
};
$('#top-doc-link').closest('li').addClass('active');
});
Feel free to ask me if you have more questions.

jQuery ajax function not working in Safari (Firefox, Chrome, IE okay)

I'm no javascript wiz, but am a bit puzzled as to how this is working in three major browsers, but not Safari... is there something wrong with this code? Basically I'm just using this in conjunction with a php/mysql callback at the given url to track link clicks.
Drupal.behaviors.NodeDownloadCounter = function() {
$('a.ndc-link').click(function() {
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name);
return true;
});
};
Using Drupal behaviors here instead of
$(document).ready(function() {
(correct Drupal method) but I've tried it both ways and it doesn't make a difference.
I've also tried removing "return true", but with no effect.
Okay, further testing reveals that having the click trigger an alert DOES work in Safari:
$('a.ndc-link').click(function() {
alert('testing (ignore)');
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name);
return true;
});
But still nothing being logged to mysql. Here is my callback function:
function node_download_counter_log($nid)
{
global $user;
$timestamp = time();
$title = db_result(db_query("SELECT title FROM {node} WHERE nid = %d", $nid));
db_query("INSERT INTO {node_download_counter} (nid, title, download_count, last_download, last_uid) VALUES (%d, '%s', %d, %d, %d)
ON DUPLICATE KEY UPDATE download_count=download_count+1, last_download = %d, last_uid = %d", $nid, $title, 1, $timestamp, $user->uid, $timestamp, $user->uid);
db_query("INSERT INTO {node_download_counter_log} (nid, title, uid, timestamp) VALUES (%d, '%s', %d, %d)", $nid, $title, $user->uid, $timestamp);
}
Sounds like the problem is the browser is changing the page before the data post can be finished. You can try adding return false to see if it starts working then. If it does, you are going to need to add a short delay before following the link.
UPDATE:
Since it works try adding the following before "return true;"
if(jQuery.browser.safari){
setTimeout("window.location.href= '"+this.href+"'",500);
return false;
}
Okay, based on our conversation on comments above, try
$('a.ndc-link').click(function() {
var href = this.href;
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name,
function() {
window.location.href = href;
}
);
return false;
});
Firs,t you have to be careful not to attach your handler more than once to each 'a.ndc-link', one way to do it is to tag the elements with a custom class.
Drupal.behaviors.NodeDownloadCounter = function() {
$('a.ndc-link:not(.node-download-counter-processed)').addClass('node-download-counter-processed').click(function(event) {
// ...
});
};
One reason I see for this not to work is that, because it closes the page to open the link target, Safari will cancel the $.post request before it is actually sent to the server. Returning false and calling event.preventDefault (event being the first argument of your event handler) should prevent this from happening but will also prevent the browser to actually load the link's target. One way to solve this is to defer the page change until the POST request is complete.
Drupal.behaviors.NodeDownloadCounter = function() {
$('a.ndc-link:not(.node-download-counter-processed)').addClass('node-download-counter-processed').click(function(event) {
var link = this;
event.preventDefault();
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name, function() {
window.location.href = link.href;
});
return false;
});
};
But this will only works if there is no error in the POST request.
A better solution would be to hijack the server-side handler for the link target to add the click logging and then call the original handler.

Categories

Resources