Jquery + disqus

JavaScript
1

I am working on a site where I created a slider from Instagram pictures and all seems to be working fine, the way the slider works is I call a PHP file which calls the Instagram API which returns a Json, I parse the Json using PHP and extract the information I need which in this case is imageurl, image unique id, image caption, put them in an array, encode it to json and send back to my jquery script so now I can access the variables in the form

varname.id, varname.imageurl etc

When someone clicks on the left or right arrow the image and caption is replaced by scrolling through the array, then I get the unique id to render the disqus comments and I set the url and identifier, did alerts and they bare setting just fine however there is a small problem, the comments load always fine but the first three images are sharing the same comments and the rest of the images do work as expected, I really have no idea what could be done to fix this problem so every image has it’s own comments loaded properly, has anyone faced this problem?

this is my javascript


var joellestagram_pictures = <?php echo $jsonArray;?>;
	var joellestagram_counter = 0;
	var disqus_identifier = 'joelle' + joellestagram_pictures[joellestagram_counter].disqus_id;
	var disqus_url = 'http://joellemagazine.com/joellestagram/?id=' + joellestagram_pictures[joellestagram_counter].disqus_id;
	var disqus_shortname = 'Joellemagazine';
	alert(disqus_identifier);
	(function($) {
		$(document).ready(function() {			
			function changeImage( imageDetails ){
				img = $("#image_container_img");
				caption = $("#image_container_caption");
				img.attr('title', imageDetails.caption);
				img.attr('src', imageDetails.img);
				caption.html(imageDetails.caption);
			}
			var stop_Ajax = <?php echo $number_of_items + 20;?>;
			var joellestagram_slider_picture = $(".joellestagram_picture");			
			var limit = joellestagram_pictures.length - 1;
			changeImage( joellestagram_pictures[joellestagram_counter] );
			$(".joellestagram_buttons_anchor_left").on( 'click', function( event ) {
				event.preventDefault();
				if ( joellestagram_counter > 0 ) {
					joellestagram_counter --;
					changeImage( joellestagram_pictures[joellestagram_counter] );
					disqus_identifier = 'joelle' + joellestagram_pictures[joellestagram_counter].disqus_id;
					disqus_url = 'http://joellemagazine.com/joellestagram/?id=' + joellestagram_pictures[joellestagram_counter].disqus_id;
					alert(disqus_identifier);
					DISQUS.reset({
					reload: true
					});
				} else {
					changeImage( joellestagram_pictures[0] );
					disqus_identifier = 'joelle' + joellestagram_pictures[joellestagram_counter].disqus_id;
					disqus_url = 'http://joellemagazine.com/joellestagram/?id=' + joellestagram_pictures[joellestagram_counter].disqus_id;
					alert(disqus_identifier);
					DISQUS.reset({
					reload: true
					});
				}
			});
			$(".joellestagram_buttons_anchor_right").on( 'click', function( event ) {
				event.preventDefault();
				if ( joellestagram_counter < limit ) {
					joellestagram_counter ++;
					changeImage( joellestagram_pictures[joellestagram_counter] );
					disqus_identifier = 'joelle' + joellestagram_pictures[joellestagram_counter].disqus_id;
					disqus_url = 'http://joellemagazine.com/joellestagram/?id=' + joellestagram_pictures[joellestagram_counter].disqus_id;
					alert(disqus_identifier);
					DISQUS.reset({
					reload: true
					});
					triggerAjax = limit - joellestagram_counter;
					if ( triggerAjax < 5 ) {
						if ( stop_Ajax != joellestagram_pictures.length ) {
							$.ajax({
								type: "POST",
								url: "http://joellemagazine.com/joellestagram",
								data: {
									ajax: true
								}
							}).done(function( new_pics ) {
								new_pics = $.parseJSON( new_pics );
								$.each( new_pics, function( index, value ){
									joellestagram_pictures.push(value);
									limit ++;
								});
							});
						}
					}
				} else {
					joellestagram_counter = 0;
					changeImage( joellestagram_pictures[joellestagram_counter] );
					disqus_identifier = 'joelle' + joellestagram_pictures[joellestagram_counter].disqus_id;
					disqus_url = 'http://joellemagazine.com/joellestagram/?id=' + joellestagram_pictures[joellestagram_counter].disqus_id;
					alert(disqus_identifier);
					DISQUS.reset({
					reload: true
					});
				}
			});
		});
	})(jQuery);

and this is the url where I have the problem http://joellemagazine.com/joellestagram

2

I was just observing the firebug window and noticed that disqus does a get request on the refresh but for some reason it does not do it during the first three images, I will be checking my code to see why it has that behavior

3

The problem was their documentation, it is not very clear how to use their application, they require a unique url and unique id, in this case I was providing the id but not the url as they ping the urls before creating a new thread, what I did was create a folder with an empty index.php file then add the identifier to the url pinting to that file in this way

http://www.yoururl.comm/directoryIcreated/index.php/#!uniqueid

That seem to do the trick, hopefully they make their documentation a little better