I've been working on the new theme for my site and have the Recent Activity block enabled on the dev site. While I was working as a Zen subtheme, the block was displaying correctly with the comment form hidden until I clicked "comment". Then I ended up switching to using Foundation and suddenly all of the comment forms are showing all the time.

I haven't investigated enough to rule out user error, though I did at least make sure I didn't do anything dumb like turn off javascript. Since it was working fine in the other theme, my guess is there's something in the theme interferring. I checked to be sure $scripts was at the top since I know moving that to the end can cause issues. Beyond that, I'm not sure where to look. Have you (or anyone else wandering by) had any problems with this theme? Any suggestions as to what I could debug further? If no luck here, I can try bouncing it over to the Foundation queue to see if they have any ideas.

Thanks,

Michelle

Comments

sirkitree’s picture

sirkitree commented
Title: Known issues with Foundation theme and comments? » Test comment js functionality with blocks more thouroughly
Category: support » task

Hi Michelle,

I haven't had any problems myself, but there have been a few problems reported here and there regarding the commenting and the javascript that controls the show/hide\ing of them within blocks.

More testing is needed on our part I think, so I'm marking this as a task and changing the title to reflect such. Hopefully one of us can get to this within the week.

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

@sirkitree: Thanks. I really know nothing about javascript so I'm not much help for finding the problem but I can test if you find something.

Michelle

jaydub’s picture

jaydub commented

@Michelle are you by chance using a theme override function for theme_activity() when using the Foundation theme?

The Javascript here is pretty simple, basically it just binds a click handler to the 'Comment' link which looks for the hidden comment form element and shows it. The jQuery selector to act on the hidden form element IS based on a simple HTML structure as layed out in the theme_activity() function. So it's possible that if you've overridden that function that the HTML structure that the Javascript expects is in fact not there.

The Javascript:

Drupal.behaviors.activityComments = function(context) {
  $('.activity-comments-click-to-show', context).bind('click', function() {
    $(this).parent().siblings('.activity-comments-form-hidden').slideToggle('fast');
  });
};

In theme_activity() the parent of the element with the 'activity-comments-click-to-show' class (the Comment link) is a span tag and the sibling of the Comment link is the activity form.

Maybe if you can paste in the HTML structure that you end up with when the block is shown using the Foundation theme we can diagnose why the Javascript doesn't work as desired.

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

I don't have any sort of theme code, yet. I'm still working on the HTML/CSS part of the theme. And it was fine with Zen as a base. The problem started as soon as I switched to Foundation. Here's the HTML from the block:

      <h3>Recent activity</h3>
  
  <div class="content">
    <div class="item-list"><ul class="activity-list"><li class="first"><span class="activity activity-module-nodeactivity activity-type-page activity-operation-update"><a href="/users/michelle" title="View user profile.">Michelle</a> updated the page <a href="/welcome" class="active">Welcome</a></span><span class="activity-links">&nbsp;–&nbsp;<span class="activity-comments-click-to-show">Comment</span>&nbsp;&nbsp;<a href="/activity/delete/7560?destination=node%2F107" title="Delete this activity record" class="activity-delete-record">X</a></span><div class="activity-comments-form-hidden clear-block"><form action="/" accept-charset="UTF-8" method="post" id="activity-comment-form">

<div><input name="aid" id="edit-aid" value="7560" type="hidden">
<div class="form-item" id="edit-activity-comment-wrapper">
 <div class="resizable-textarea"><span><textarea cols="60" rows="1" name="activity-comment" id="edit-activity-comment" class="form-textarea resizable textarea-processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<input name="op" id="edit-submit" value="Comment" class="form-submit" type="submit">
<input name="form_build_id" id="form-65bdb573a85a2d14e5a0d8ed1042bacd" value="form-65bdb573a85a2d14e5a0d8ed1042bacd" type="hidden">
<input name="form_token" id="edit-activity-comment-form-form-token" value="49fd8f86a52429947c05cd0cc4e5f72f" type="hidden">
<input name="form_id" id="edit-activity-comment-form" value="activity_comment_form" type="hidden">

</div></form>
</div></li>
<li><span class="activity activity-module-user_relationshipsactivity activity-type-friend activity-operation-approved"><a href="/users/michelle" title="View user profile.">Michelle</a> is now friends with <a href="/users/sarah-jane-smith" title="View user profile.">Sarah Jane Smith</a></span><span class="activity-links">&nbsp;–&nbsp;<span class="activity-comments-click-to-show">Comment</span>&nbsp;&nbsp;<a href="/activity/delete/7559?destination=node%2F107" title="Delete this activity record" class="activity-delete-record">X</a></span><div class="activity-comments-form-hidden clear-block"><form action="/" accept-charset="UTF-8" method="post" id="activity-comment-form-1">

<div><input name="aid" id="edit-aid-1" value="7559" type="hidden">
<div class="form-item" id="edit-activity-comment-1-wrapper">
 <div class="resizable-textarea"><span><textarea cols="60" rows="1" name="activity-comment" id="edit-activity-comment-1" class="form-textarea resizable textarea-processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<input name="op" id="edit-submit-1" value="Comment" class="form-submit" type="submit">
<input name="form_build_id" id="form-b7eac1048ab82616d4764e329f556a75" value="form-b7eac1048ab82616d4764e329f556a75" type="hidden">
<input name="form_token" id="edit-activity-comment-form-form-token-1" value="49fd8f86a52429947c05cd0cc4e5f72f" type="hidden">
<input name="form_id" id="edit-activity-comment-form-1" value="activity_comment_form" type="hidden">

</div></form>
</div></li>
<li><span class="activity activity-module-user_relationshipsactivity activity-type-friend activity-operation-approved"><a href="/users/michelle" title="View user profile.">Michelle</a> is now friends with <a href="/users/romanadvoratrelundar" title="View user profile.">Romanadvoratrelundar</a></span><span class="activity-links">&nbsp;–&nbsp;<span class="activity-comments-click-to-show">Comment</span>&nbsp;&nbsp;<a href="/activity/delete/7558?destination=node%2F107" title="Delete this activity record" class="activity-delete-record">X</a></span><div class="activity-comments-form-hidden clear-block"><form action="/" accept-charset="UTF-8" method="post" id="activity-comment-form-2">

<div><input name="aid" id="edit-aid-2" value="7558" type="hidden">
<div class="form-item" id="edit-activity-comment-2-wrapper">
 <div class="resizable-textarea"><span><textarea cols="60" rows="1" name="activity-comment" id="edit-activity-comment-2" class="form-textarea resizable textarea-processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<input name="op" id="edit-submit-2" value="Comment" class="form-submit" type="submit">
<input name="form_build_id" id="form-b56268b7e07a4af83b80ab09a55e3ef2" value="form-b56268b7e07a4af83b80ab09a55e3ef2" type="hidden">
<input name="form_token" id="edit-activity-comment-form-form-token-2" value="49fd8f86a52429947c05cd0cc4e5f72f" type="hidden">
<input name="form_id" id="edit-activity-comment-form-2" value="activity_comment_form" type="hidden">

</div></form>
</div></li>
<li><span class="activity activity-module-user_relationshipsactivity activity-type-friend activity-operation-approved"><a href="/users/michelle" title="View user profile.">Michelle</a> is now friends with <a href="/users/adric" title="View user profile.">Adric</a></span><span class="activity-links">&nbsp;–&nbsp;<span class="activity-comments-click-to-show">Comment</span>&nbsp;&nbsp;<a href="/activity/delete/7557?destination=node%2F107" title="Delete this activity record" class="activity-delete-record">X</a></span><div class="activity-comments-form-hidden clear-block"><form action="/" accept-charset="UTF-8" method="post" id="activity-comment-form-3">

<div><input name="aid" id="edit-aid-3" value="7557" type="hidden">
<div class="form-item" id="edit-activity-comment-3-wrapper">
 <div class="resizable-textarea"><span><textarea cols="60" rows="1" name="activity-comment" id="edit-activity-comment-3" class="form-textarea resizable textarea-processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<input name="op" id="edit-submit-3" value="Comment" class="form-submit" type="submit">
<input name="form_build_id" id="form-ecc5eda374ff3557007b269e9dbb901e" value="form-ecc5eda374ff3557007b269e9dbb901e" type="hidden">
<input name="form_token" id="edit-activity-comment-form-form-token-3" value="49fd8f86a52429947c05cd0cc4e5f72f" type="hidden">
<input name="form_id" id="edit-activity-comment-form-3" value="activity_comment_form" type="hidden">

</div></form>
</div></li>
<li class="last"><span class="activity activity-module-useractivity activity-type-user activity-operation-login"><a href="/users/michelle" title="View user profile.">Michelle</a> logged in to Shell Social Network Playground</span><span class="activity-links">&nbsp;–&nbsp;<span class="activity-comments-click-to-show">Comment</span>&nbsp;&nbsp;<a href="/activity/delete/7556?destination=node%2F107" title="Delete this activity record" class="activity-delete-record">X</a></span><div class="activity-comments-form-hidden clear-block"><form action="/" accept-charset="UTF-8" method="post" id="activity-comment-form-4">

<div><input name="aid" id="edit-aid-4" value="7556" type="hidden">
<div class="form-item" id="edit-activity-comment-4-wrapper">
 <div class="resizable-textarea"><span><textarea cols="60" rows="1" name="activity-comment" id="edit-activity-comment-4" class="form-textarea resizable textarea-processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<input name="op" id="edit-submit-4" value="Comment" class="form-submit" type="submit">
<input name="form_build_id" id="form-8567b98224bd70011e191f04d8b28a7f" value="form-8567b98224bd70011e191f04d8b28a7f" type="hidden">
<input name="form_token" id="edit-activity-comment-form-form-token-4" value="49fd8f86a52429947c05cd0cc4e5f72f" type="hidden">
<input name="form_id" id="edit-activity-comment-form-4" value="activity_comment_form" type="hidden">

</div></form>
</div><div class="item-list"><ul class="activity-comments-list"><li class="first last"><div class="activity-comment"><div class="activity-comment-from"><span class="activity-comment-author">you</span> <span class="activity-comment-timestamp">at 05/21/2009 - 22:32</span> <a href="/activity/comment/delete/2?destination=node%2F107" title="Delete this activity record comment" class="activity-delete-comment">X</a></div><div class="activity-comment-comment">This is a comment</div></div></li>

</ul></div></li>
</ul></div>  </div>

</div>
jaydub’s picture

jaydub commented

hmm, the HTML structure is as expected. The next thing I'd check is the CSS styling for the form. By default the form div has the class activity-comments-form-hidden which has a default rule of display:none. The Javascript just adds a handler on the comment link to toggle that display styling. The styling is in activity.css

Can you use firebug to see what the styling rule that is being applied to the div with the class above is showing as? I'm wondering if the CSS file is not being included in this case for some reason.

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

Might be easier just to link you... http://socnet-dev1.shellmultimediaDOTcom (Change the DOT. Don't want bots going there). This is my dev site so I won't keep it on that theme all the time but I can leave it there for a while.

Michelle

jaydub’s picture

jaydub commented

ok I won't be able to see the forms though since the anonymous user would appear to not have the permission to post comments which is needed in order for the form HTML to be included. You can enable for anon or shoot me a quick login to be able to test as an authenticated user.

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

Demo User / demouser (case sensitive)

Michelle

jaydub’s picture

jaydub commented

ok it's the style rule 'clear-block' on the form div that is overriding the display:none rule.

Quickest fix for now is to edit activity.module and in theme_activity() change this line:

  if (user_access('create activity comments')) {
    drupal_add_js(drupal_get_path('module', 'activity') .'/activity_comments.js');
    $output .= '<div class="activity-comments-form-hidden clear-block">'. drupal_get_form('activity_comment_form', $item['aid']) .'</div>';
  }

to:

  if (user_access('create activity comments')) {
    drupal_add_js(drupal_get_path('module', 'activity') .'/activity_comments.js');
    $output .= '<div class="activity-comments-form-hidden">'. drupal_get_form('activity_comment_form', $item['aid']) .'</div>';
  }

the clear-block is probably not needed here although can't test while I'm at work.

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

Just realized, it's Framework, not Foundataion. Sorry about that. Don't even know what theme I'm using. LOL!

At any rate. having class clear-block be set to display:block seems like a pretty common thing, no? So I can see that conflict happening quite a bit. Taking the clear-block out fixed it with no apparent issues, at least on my theme.

Thanks,

Michelle

jaydub’s picture

jaydub commented
Status: Active » Fixed

Ok I removed the class from the hidden form element. It's redundant since when the form is shown via jQuery, it has display: block which is the only thing that the clear-block class was adding to the form element in CSS.

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

Thanks, jaydub.

Michelle

pribeh’s picture

pribeh commented

Experiencing the same problem here. I'll test this out too and report back.

pribeh’s picture

pribeh commented

fix did not work for me. Still investigating.

pribeh’s picture

pribeh commented

Ok, so my suspicion is that for something else is going on since it only happens once and awhile. This issue only happens in firefox - not webkit browsers. Sometimes if I just hit refresh the form will be hidden again. I've cleared all caches after making the necessary patch as in #9. Perhaps:

"the CSS file is not being included in" certain cases?

If anyone wants to take a look in firefox (http://lc3.figureandground.net/user/login un:demo pw:demodemo); if it doesn't appear off the bat hit refresh once or twice and it should arise.

jaydub’s picture

jaydub commented

#15 a few quick tests on Firefox didn't cause the form to show for me. Are you still experiencing the problem and if so can you reproduce 100% of the time given a series of steps?

pribeh’s picture

pribeh commented

Jaydub, thanks for testing however I noticed something that may have escaped you. If you log in to the site it will take you to the user page where the activity comments seems to hide by default perfectly fine. However, it's on the front page (reachable by clicking on the logo) that the error pops up: immediately in safari and almost certainly upon refresh in firefox.

This may indicate that it is theme related but I've tried it in garland with the same results. Another oddity is that it doesn't seem to happen when logged in to user 1 anymore, just other users.

jaydub’s picture

jaydub commented

you didn't mention going to the front page in #15 :)

The form is being hidden by javascript. The fact that is works fine on first load but not on subsequent loads indicates to me that you are caching the block either via core block cache or by the block_refresh module that you are using (I know nothing about this so you'd have to sort out making it work together with Activity).

You'll have to square away how you want to handle caching of the block and make sure that the activity js is present even on pages with the cached block.

pribeh’s picture

pribeh commented

Ya, I'm sorry about that Jaydub. But you fixed my problem. One of my dev people turned block cache on and I had no idea that such might interfere with said javascript. Definitely don't need block cache turned on.

Thanks again.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.