SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: jquery + disqus

  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jquery + disqus

    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

    Code 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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  2. #2
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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/directoryIcr...php/#!uniqueid

    That seem to do the trick, hopefully they make their documentation a little better
    Do you get bothered because I do the same thing every day?
    Do you question why I do it?
    Then find something that you actually like doing!!!

    Stop thinking on what I do.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •