Load and interact with a node comments from their related node

Question

I am having some trouble in my quest to build a Drupal 7 custom node based image gallery module. I've got it working, but now I need AJAX to load and manipulate comments.

What I am doing

I've created a Drupal 7 one-image-per-node image gallery; it uses relationships, EVA and even BBQ for deep linking, when viewing the 'gallery' node, EVA feeds in the thumbs and helpful attributes, e.g. URL to full image, url to actual node. I have jQuery in my gallery node, which AJAX preloads the full images on thumb click & manipulates them for fast dynamic full screen browsing, it works perfectly! Even the BBQ deep-linking which was difficult. Some of my gallery display js code is based on http://manos.malihu.gr/tuts/sideways_jquery_fullscreen_image_gallery.html.

Update

I am trying all angles to bring in the comments. I've added one possible solution below but am going to try and figure out some other/better ways of doing this.

I am unsure about Services & Json or the views json output module and if that would be useful to me in this situation? Would json be better to call a nodes comments?

I suppose now my question remains what is the best way to do this? Even though this is working for me now I don't think I've found the best way yet.

Well thats where Im at, once I refine this I will pull everything into a module rather than a mix of module & theme layer bits, this will be my first module that defines content types, views and well all sorts of Drupal fun!

Answer 1

Ok so here is one way to do it, it's not very elegant and needs improvement.

I created a comment view that has a page display which gets NID from url so when ajax calling the content with ajax my/url/89 will return the comments for node 89. This works; even Ajax_Comments are working!

Edit: Ive fixed it so it will cache the data for the user, so when traversing the gallery, it does not load the data ad-nauseum. It stores in .data and pulls it back in if the user has already viewed it.

Anyway, even though this works I feel it needs a lot of improvement and/or different approach. Below is some of the related updated latest code.

$(function(){

  // Override the default behavior of all `a` elements so that, when
  // clicked, their `href` value is pushed onto the history hash
  // instead of being navigated to directly.
  $("a.thumb_link").click(function(){
    var href = $(this).attr( "rel" );

    // Push this URL "state" onto the history hash.
    $.bbq.pushState({ image: href });

    // Prevent the default click behavior.
    return false;
  });


// Keep a mapping of url-to-container for caching purposes.
  var cache = {

   '': $('#gall-default') // If url is '' (no fragment), display this div's content.
  };

  // Bind a callback that executes when document.location.hash changes.
  $(window).bind( "hashchange", function(e) {
    // In jQuery 1.4, use e.getState( "url" );
    var url = $.bbq.getState( "image" ); //Get State from the above push "image"

    // In this example, whenever the event is triggered, iterate over
    // all `a` elements, setting the class to "current" if the
    // href matches (and removing it otherwise).
    $("a.thumb_link").each(function(){
      var href = $(this).attr( "rel" );

      if ( href === url ) { //Mark the active thumb and launch its content!

            $(this).addClass( "current" );
            $("#gall-default").css("display","none");
            //event.preventDefault();
            var $this=this;
            $bgimg.css("display","none");
            $preloader.fadeIn("fast"); //show preloader
            //style clicked thumbnail
            $outer_container_a.each(function() {
                $(this).children(".selected").css("display","none");
            });
            $(this).children(".selected").css("display","block");
            $outer_container.data("selectedThumb",$this); //get and store next image and selected thumb 
            $bg.data("nextImage",$(this).next().attr("href"));  
            $bg.data("newTitle",$(this).children("img").attr("title")); //get and store new image title attribute
            itemIndex=getIndex($this); //get clicked item index
            lastItemIndex=($outer_container_a.length)-1; //get last item index
            $bgimg.attr("src", "").attr("src", $this); //switch image

            //set context for node load bits
            var node = $(this).attr( "node" );

            $("#ajax-div .inner").empty();


             if ($(this).data('comm.cachedHtml')) {
                  $('#ajax-div .inner').html($(this).data('comm.cachedHtml'));

             } else {

                var toLoad = $(this).attr('node');// Get the URL of the clicked link.
               $.ajax({ // Now load the content
                    url: toLoad,
                    cache: true,
                    beforeSend: function () {
                    $("#preloader2").fadeIn("fast");
                },                  
                    success: function(data) {

                      $('#ajax-div .inner').html($('#content', data));// Inject new content 
                      $("#preloader2").fadeOut("fast");     
                      $(this).data('comm.cachedHtml', data);
                      Drupal.attachBehaviors('#ajax-div .inner');
                    }
                });


              }

      } else { //Un-Mark Thumb & other deselecting 
         $(this).removeClass( "current" );

      }
    });

    //do something  here..
  });

  // Since the event is only triggered when the hash changes, we need
  // to trigger the event now, to handle the hash the page may have
  // loaded with.
  $(window).trigger( "hashchange" );
});