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.