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.

Hi, I have tried your solutions with class as well as ID for the updatepanel control, but none of the approaches worked. — Shobhit Gupta, Aug 27 '16 at 06:48
I would try just dropping the window.load completely, since this function is called every time the ContentTemplate is loaded, right? I would do a console.log in your BindEvents function and see when it is and isnt being called. — Sterling, Aug 27 '16 at 06:50
Ok, I wrote 3 scripts: in the head section, i wrote a console.log statement with some message, then inside content template, i wrote another script with console.log and at the closing of content template, another console.log. On first load of page, all three messages were shown in log but on partial postback, none of them is shown again. means, none of the scripts worked on partial postbak. — Shobhit Gupta, Aug 27 '16 at 07:02

score 1 · Answer 1 · edited May 23 '17 at 12:08

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?

*Please tell me is there any security / performance loophole with this approach?* you can create new question and ask separately, not in an answer. — Divyang Desai, Aug 27 '16 at 08:54

Script not executing on Ajax postback

1 Answers1