Script not executing on Ajax postback

Question

I am working on a website which shows some tiles. The height of the tiles may vary depending upon the image and text inserted. To ensure that all the tiles attain same height, I have written the following script in head:

function BindEvents()
{
    $(window).load(function () 
    {
        var maxHeight = Math.max.apply(null, $(".producttile").map(function () {
            return $(this).height();
        }).get());

        $('.producttile').height(maxHeight);

        maxHeight = Math.max.apply(null, $(".clistdiv").map(function () {
            return $(this).height();
        }).get());

        $('.clistdiv').height(maxHeight);
    });
}

The above script has been bound to the datalist as under:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <hr width="100%" noshade/>
        <script type="text/javascript">
            Sys.Application.add_load(BindEvents);
        </script>
        <asp:DataList 
                ID="DataList1"
                runat="server"
                onitemcommand="DataList1_ItemCommand1"
                class="itemsdatalist"
                RepeatDirection="Horizontal"
                RepeatLayout="Flow"
                onload="DataList1_Load">
            <ItemTemplate>
                ...........rest of the code

Now, this binding and tile autosizing works fine when the page is first loaded. A button fires an ajax call and brings in more tiles and reupdates this update panel. This is where the problem lies.

The BindEvents() is not called again, so the tiles are of different sizes, they are not auto adjusted again.

I have tried to keep the script inside update panel content template also with the hope of it working, but no wonders, it didn't work at all.

Please help.

Answer 1

Finally I solved the problem. Here is the solution for your help. I just wrote the following code on page load, and it worked perfect.

protected void Page_Load(object sender, EventArgs e)
{
    if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script language='javascript' type='text/javascript'>");
        sb.Append("Sys.Application.add_load(func);");
        sb.Append("function func() {");
        sb.Append("Sys.Application.remove_load(func);");
        sb.Append("var maxHeight = Math.max.apply(null, $('.producttile').map(function () { return $(this).height(); }).get()); $('.producttile').height(maxHeight);");
        sb.Append("maxHeight = Math.max.apply(null, $('.clistdiv').map(function () { return $(this).height(); }).get()); $('.clistdiv').height(maxHeight);");
        sb.Append("}");
        sb.Append("</script>");
        ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
    }
}

Thanks for the following article which helped me in implementing this solution: The solution link.

Please tell me is there any security / performance loophole with this approach?