1

I'm calling a block in a template like so:

echo views_embed_view('sessions_by_track', 'block_1');

where the block is actually a view display. It's set to output html lists, and I want to do some jquery stuff to it, including hiding certain elements until something else is clicked on.

Here's what the list code looks like:

<ul data-role="listview">
  <li data-role="list-divider"><a href="/tracks/big-picture-0">Big Picture</a></li>

  <li class="views-row">  
    <div class="views-field-title">
      <span class="field-content"><a href="/sessions/tracks/partnering">Partnering for Success</a></span>
    </div>
  </li>

  <li class="views-row">  
    <div class="views-field-title">
      <span class="field-content"><a href="/sessions/tracks/the-shopper-economy">The Shopper Economy</a></span>
    </div>
  </li>
</ul>

I have a scripts.js file that looks like this:

$(document).ready(function() {
  alert('test');
 $('li.views-row').hide();
});

The alert works; the hide doesn't. However, when I run that line in Firebug's console after the page has finished loading, the hide does work. So it seems that the view renders after the document.ready fires. I seem to recall reading something about this before, and there was a solution, but of course now that I need it I can't for the life of me find it. What do I need to do to get around this?

Edited to add: Drupal 6, Views2

Edited again to add: I've also tried this: in template.php added this function:

function mobile_jquery_preprocess_page(&$vars, $hook) {
  $vars['embedded_sessions'] = views_embed_view('sessions_by_track', 'block_1');
  $vars['scripts'] = drupal_get_js();
}

and then calling it in my page template like so:

print $embedded_sessions;

Same result.

Edited yet again to add that I've tried adding a new region to my template, assigning the block to that region, and then printing it with print $mobileContent; in the page template. Same result - the alert runs on load, but the hide does not. The hide runs just fine in Firebug's console, so I know the selector is OK.

Edited once more for @tim.plunkett

To a file called scripts.js, located in sites/all/themes/mobile_jquery/scripts, I added this (right now there's nothing else in the file):

(function ($) {
  console.log('behavior triggered');
  // Store our function as a property of Drupal.behaviors.
  Drupal.behaviors.myHomeHideLists = function (context) {
    // Find all the li items inside context that have our desired class
    $('li.views-row)', context)
      // hide them.
      .hide();
  };

}(jQuery));

In template.php, I added this (based on this answer):

function mobile_jquery_preprocess_page(&$vars, $hook) {
  $vars['embedded_sessions'] = views_embed_view('sessions_by_track', 'block_1');
  drupal_add_js(drupal_get_path('theme', 'mobile_jquery').'/scripts/script.js', 'theme');
  $vars['scripts'] = drupal_get_js();
}

The console.log does get triggered and printed, but the list items that match the selector do not get hidden.

Improve this question
1
  • What happens if you replace alert('test') with console.log('test')? Alerts will interrupt execution and can sometimes screw up things like this. It's always recommended to send your debug statements to console.log instead of alert as console.log is non-blocking. console.log works in Chrome, Safari, Opera, and Firefox with the Firebug extension. – jmking Jan 28 '12 at 15:30
1

Drupal provides a specific way to add JS to a page, to ensure that it is run whenever content is loaded into the DOM. This way, it will run after the document is loaded, but also after AJAX operations.

They're called Drupal behaviors.

Improve this answer
4
  • Yeah, I tried that too, after posting the question. Didn't work, but I may have done something wrong. I'll update the OP to show what I tried. – EmmyS Jan 30 '12 at 15:22
  • In your example you have a typo, not sure if that was part of the problem. $('li.views-row)', context) should be $('li.views-row', context). You could also try a console.log inside the behavior. – tim.plunkett Jan 30 '12 at 20:34
  • Thanks. As it happens, I found a different way to handle it, but appreciate your following up. – EmmyS Jan 31 '12 at 20:56
  • Glad to hear you solved your problem, can you either accept my answer or add your own answer and accept that one? – tim.plunkett Feb 1 '12 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.