Custom Template startup script

[sangnandar]

I have this in my Custom Template -> List Page -> CustomTemplateBody :
<tr name="custom_add_tr" ... >
...
<div name="pasien">...</div>
<div name="spacer"></div>
<div name="kk">...</div>
...
</tr

And Startup Script:
$("tr[name='custom_add_tr']").each(function(){
var tr = parseInt($(this).height());
var pasien = parseInt($(this).find("div[name='pasien']").height());
var kk = parseInt($(this).find("div[name='kk']").height());
var spacer = tr - (pasien + kk);
$(this).find("div[name='spacer']").height(spacer);
});

Explanation:

• Custom template will draw 3 div's inside <tr> element.
• After the div's are drawn, startup script kick-in, measure the heights, give "unused height" to [spacer], so [pasien] always drawn at top-of-<tr> and [kk] drawn at bottom-of-<tr>.

Problem:

• [spacer] only get the right value if I do hard-refresh.
• In normal-refresh [spacer] height value is always 0.

What is the possible problem?

Thanks.

[arbei]

I think you need to run your script after the custom template is rendered.

Run your script after the page loaded and try again

For example:
$(function() {
$("tr[name='custom_add_tr']").each(function(){
var tr = parseInt($(this).height());
var pasien = parseInt($(this).find("div[name='pasien']").height());
var kk = parseInt($(this).find("div[name='kk']").height());
var spacer = tr - (pasien + kk);
$(this).find("div[name='spacer']").height(spacer);
});
});

[sangnandar]

The ready $(function(){}) is not working either.

• Hard-refresh set the wrong value.
• Normal-refresh set the wrong and unconsistent value. (It set a value though, not always 0px like before).

Unconsistent means: It differ from row to row in the range of +/- 7px.

Is that a possibility that JsRender and Startup Script are in racing condition?

Just to add,

var tr = parseInt($(this).height()); // always give the right value
var pasien = parseInt($(this).find("div[name='pasien']").height()); // inconsistent value
var kk = parseInt($(this).find("div[name='kk']").height()); // inconsistent value

[arbei]

Add a setTimeout function call to make sure your script is run after the page is completely rendered.

[sangnandar]

Yes, setTimeout() is my last resort if everything else fail.

But I think I'm gonna try to script inside custom template.
Does anyone had tried this before?

[Webmaster]

Try in Client Script:

$(document).on("rendertemplate", function(e, args) {
if (args.id == "MyCustomTemplateId") { // Inspect HTML in browser to find the real id
$("#" + args.id).html($("#" + args.template).render(args.data)); // Render the template yourself
args.enabled = false; // No need to render by original code
// Do what you want to do
}
});

[sangnandar]

I've found a good solution on this.

$(window).bind("load", function() {
// do my things
});

Unlike .ready(), which run after DOM, this function run after all content has loaded, which means it run after template script has loaded (and hopefully finished drawing).