Question

I have partials that get rendered as part of a complex page composition.

Some of these partials need some jQuery OnDocumentReady goodness to seed list data etc.
There can be many of these partials chosen during a render (it’s very dynamic)

in my _Layout I have a section definition that looks like this

<script src="http://my/fav/cdn/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
    @RenderSection("OnDocumentReadySection", false)
});
</script>

in my partials I want to write something like this

@section OnDocumentReadySection{
    $('#partial-1').init();
}

and have the result of the page render end up with something like this

<script src="http://my/fav/cdn/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
    $('#partial-1').init();
    $('#partial-2').init();
    $('#partial-3').init();
    $('#partial-n').init();
});
</script>

This is to make sure all my javascript is at the bottom of the rendered html which I am told is far more optimal.

Answer 1

Instead of:

jQuery(function($) {
    $('#partial-1').init();
    $('#partial-2').init();
    $('#partial-3').init();
    $('#partial-n').init();
});

You should instead assign each of them a common css class (even if you don’t define a definition for it) and then do this in the head:

jQuery(function($) {
    $('.classname').init();
});

Or if need be:

jQuery(function($) {
    $('.classname').each(function(){ $(this).init(); });
});