javascript - ajaxify-html5.js reload only part of the page? -
i found following script online makes website load content ajax.
everything works fine, reload music player has stay when clicking link.
// ajaxify // v1.0.1 - 30 september, 2012 // https://github.com/browserstate/ajaxify (function(window,undefined){ // prepare our variables var history = window.history, $ = window.jquery, document = window.document; // check see if history.js enabled our browser if ( !history.enabled ) { return false; } // wait document $(function(){ // prepare variables var /* application specific variables */ contentselector = '#content,article:first,.article:first,.post:first', $content = $(contentselector).filter(':first'), contentnode = $content.get(0), $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'), activeclass = 'active selected current youarehere', activeselector = '.active,.selected,.current,.youarehere', menuchildrenselector = '> li,> ul > li', completedeventname = 'statechangecomplete', /* application generic variables */ $window = $(window), $body = $(document.body), rooturl = history.getrooturl(), scrolloptions = { duration: 800, easing:'swing' }; // ensure content if ( $content.length === 0 ) { $content = $body; } // internal helper $.expr[':'].internal = function(obj, index, meta, stack){ // prepare var $this = $(obj), url = $this.attr('href')||'', isinternallink; // check link isinternallink = url.substring(0,rooturl.length) === rooturl || url.indexof(':') === -1; // ignore or keep return isinternallink; }; // html helper var documenthtml = function(html){ // prepare var result = string(html) .replace(/<\!doctype[^>]*>/i, '') .replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2') .replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>') ; // return return $.trim(result); }; // ajaxify helper $.fn.ajaxify = function(){ // prepare var $this = $(this); // ajaxify $this.find('a:internal:not(.no-ajaxy)').click(function(event){ // prepare var $this = $(this), url = $this.attr('href'), title = $this.attr('title')||null; // continue normal cmd clicks etc if ( event.which == 2 || event.metakey ) { return true; } // ajaxify link history.pushstate(null,title,url); event.preventdefault(); return false; }); // chain return $this; }; // ajaxify our internal links $body.ajaxify(); // hook state changes $window.bind('statechange',function(){ // prepare variables var state = history.getstate(), url = state.url, relativeurl = url.replace(rooturl,''); // set loading $body.addclass('loading'); // start fade out // animating opacity 0 still keeps element's height intact // prevents annoying pop bang issue when loading in new content $content.animate({opacity:0},800); // ajax request traditional page $.ajax({ url: url, success: function(data, textstatus, jqxhr){ // prepare var $data = $(documenthtml(data)), $databody = $data.find('.document-body:first'), $datacontent = $databody.find(contentselector).filter(':first'), $menuchildren, contenthtml, $scripts; // fetch scripts $scripts = $datacontent.find('.document-script'); if ( $scripts.length ) { $scripts.detach(); } // fetch content contenthtml = $datacontent.html()||$data.html(); if ( !contenthtml ) { document.location.href = url; return false; } // update menu $menuchildren = $menu.find(menuchildrenselector); $menuchildren.filter(activeselector).removeclass(activeclass); $menuchildren = $menuchildren.has('a[href^="'+relativeurl+'"],a[href^="/'+relativeurl+'"],a[href^="'+url+'"]'); if ( $menuchildren.length === 1 ) { $menuchildren.addclass(activeclass); } // update content $content.stop(true,true); $content.html(contenthtml).ajaxify().css('opacity',100).show(); /* fade in here if you'd */ // update title document.title = $data.find('.document-title:first').text(); try { document.getelementsbytagname('title')[0].innerhtml = document.title.replace('<','<').replace('>','>').replace(' & ',' & '); } catch ( exception ) { } // add scripts $scripts.each(function(){ var $script = $(this), scripttext = $script.text(), scriptnode = document.createelement('script'); if ( $script.attr('src') ) { if ( !$script[0].async ) { scriptnode.async = false; } scriptnode.src = $script.attr('src'); } scriptnode.appendchild(document.createtextnode(scripttext)); contentnode.appendchild(scriptnode); }); // complete change if ( $body.scrollto||false ) { $body.scrollto(scrolloptions); } /* http://balupton.com/projects/jquery-scrollto */ $body.removeclass('loading'); $window.trigger(completedeventname); // inform google analytics of change if ( typeof window._gaq !== 'undefined' ) { window._gaq.push(['_trackpageview', relativeurl]); } // inform reinvigorate of state change if ( typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined' ) { reinvigorate.ajax_track(url); // ^ use full url here reinvigorate supports } }, error: function(jqxhr, textstatus, errorthrown){ document.location.href = url; return false; } }); // end ajax }); // end onstatechange }); // end ondomload })(window); // end closure let me explain little bit better.
the website has music player plays music while visiting website, music not ment stop whenever click on link.
this script works refresh whole page (using ajax) , refreshing music player.
there script comes 1 changing url , title ...
thanks in advance, greets
use statechangecomplete event.
$(window).on('statechangecomplete', function(e, eventinfo){ //your code })
Comments
Post a Comment