By HansKuiters on

I have a views grid. Every member/node of the grid contains a few content fields. After clicking one of these nodes I need to show some extra fields for that node. Not like a 'read more' where the extra fields appear right below the default fields. I need the extra fields appear in another section of the page.

Below a small portion of my jQuery code. What I like to do is paste the returned content in the #slide-inner.

var $ = jQuery;
var nid = $(current).children('.nid').children('.field-content').html(); // the nodeID for which to get the extra fields
var slide = $.get('slide/js/'+ nid, null, updateSlideout);  // json object containing the extra fields
var updateSlideout = function(response) {
   $('#slide-inner').html(response);
}
$('.edge').after('<div class="slideout"><div class="info-pc" style="left:'+pointerPos+'px"><div id="slide-inner"></div></div></div>');

Can I get some help with this please? I've been trying hours and hours woth all sort of jQuery/JSON code combinations.

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

As a start 

$.get('slide/js/'

needs to be at least relative to the sites root so as a start the path should be '/slide/js/'

To help in debugging the issue I would uses the browser javascript tools to place a break point on $('#slide-inner').html(response); to see if it is being hit and what response looks like.

Note there are plenty of existing modules that implement slideshows with ajax functionality.

HansKuiters’s picture

HansKuiters commented

Thanks Nevets for your reaction. I was wondering last night if I gave enough info.

What I want to do is like this: http://jsfiddle.net/JfcAu/11/

After clicking on the numbers a red row appears. In the DOM it is positioned after the last member of the row that is clicked on, so outside the element I clicked on.
var 'slide' holds the content I need. Having my site on localhost in a subfolder it works fine for now without the starting slash. Good thinking.

Debug
'console.log(slide);' returns 'Object { readyState=1}'
The object seems to hold the content I want (see this screendump).
'console.log($('#slide-inner').html(response));' placed within the funciton shows nothing, not even undefined

nevets’s picture

nevets commented

As for debugging I would try console.log(response);

Have you tried using a module like views slide show?

HansKuiters’s picture

HansKuiters commented

I've looked at some Views Slideshow plugins, but didn't find any that can do what I want in the example. Can you point me out to one that does? Thanks.