Posted by Comments Off on Jquery Mobile with Disqus comments system How to, Mobile

So you decided to connect Disqus comments to your Jquery Mobile project. Both are very popular among developers and users but there are some issues when you are trying to combine them. That because jQuery Mobile loads new pages via ajax and Disqus doesn’t knows that page has been changed.

As you can see there is a Using Disqus on AJAX sites article has been written by Disqus Support already. You did everything as described but Disqus comments are not loading when you transition to another page or loading with errors. Why? There is an another issue: jQuery Mobile has two pages loaded in DOM at all the times to accomplish page transitions.

Initial Setup

Add the following code where you want Disqus comments to show

<div id="disqus_thread" class="disqus-wrap disqus-active"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

Disqus Setup

I hope you have already signed up at Disqus and added your project’s url during the setup. In this tutorial I’ll use the Universal Embed Code provided by Disqus with some minor modifications.

First, we need to include Jquery and Jquery Mobile in header of every page. If you are using PHP you can create one file named for example

header.php

and include it before body tag at every page using the following code:

<?php include (header.php'); ?>

If you are using HTML you just need to paste Jquery and Jquery Mobile scripts in head section. In any case, your header will be something like:

<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/jquery.mobile.min.js"></script>
</head>

Now we need to add Disqus code. Note that you are need to replace “<example>” with yours. You can find it in Disqus control panel. Also make sure to change the “disqus_identifier” and “disqus_title” selectors to select the right information.

jQuery(document).ready(function () {
	/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
	var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname
	var disqus_identifier = jQuery('.ui-page-active .page_title').html().replace(/ /g,'-'); // Change selector to match your project
	var disqus_title = jQuery('.ui-page-active .page_title').html(); // Change selector to match your project
	var disqus_url = document.location.href;
	var disqus_developer = '1';
	if( typeof( DISQUS ) == 'undefined' ){
	/* * * DON'T EDIT BELOW THIS LINE * * */
	(function() {
		var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
		dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
	})();
	}
});

Finally we need to add reset script. The script clears #disqus_thread section and removes ID attribute. It’s necessary to avoid duplicating of disqus comments section on one page. Also make sure to change the “this.page.identifier” and “this.page.title” variables to select the right information.

jQuery( 'body' ).on( "pagebeforeload", function( event ) {
	jQuery('#disqus_thread').empty().removeClass('disqus-active').addClass('disqus-inactive').removeAttr('id');
});
jQuery( 'body' ).on( "pagechange", function( event, ui ) {
	if ( jQuery('.disqus-wrap').length == 1 ) {
		jQuery('.disqus-inactive').addClass('disqus-active').removeClass('disqus-inactive').attr('id','disqus_thread');
	}
	if( typeof( DISQUS ) !== 'undefined' ){
		DISQUS.reset({
			reload: true,
			config: function () {
				this.page.identifier = jQuery('.ui-page-active .page_title').html().replace(/ /g,'-');
				this.page.url = document.location.href;
				this.page.title = jQuery('.ui-page-active .page_title').html();
			}
		});
	}
});

Tagged with: