javascriptasp.netmootoolsscriptmanagerupdateprogress

ASP.Net UpdateProgress breaks when scripts are added to ScriptManager


I'm having trouble with the UpdateProgress and the ScriptManager in ASP.Net. The UpdateProgress fails to display (Inline CSS property | display:none;) when a script is registered in the ScriptManager. I have also registered the script programmatically under the page load method using this method, ASP.NET 4.5 ScriptManager Improvements in WebForms, but still fails. Thanks in advance :).

Aspx:

<asp:ScriptManager ID="scriptManager" runat="server">            
            <Scripts>
                <asp:ScriptReference Path="~/js/mootools-core-1.4.5.js" />
                <asp:ScriptReference Path="~/js/mootools-more-1.4.0.1.js" />
            </Scripts>
        </asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
                        <div id="panel2Div" runat="server"></div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button1" />
                    </Triggers>
                </asp:UpdatePanel>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                    <ProgressTemplate>
                        <p>Doing Stuff....</p>
                    </ProgressTemplate>
                </asp:UpdateProgress>

Code Behind:

protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
            panel2Div.InnerHtml = "Updated Panel 2";
        }

if the Script/ScriptReference tags are removed in the ScriptManager, the UpdateProgress works!

EDIT - Problem solved thanks to the pointer given by Nathan. There is indeed a conflict between Mootools and MS AJAX. This is because of the declaration "Type" in Mootools core/more, which is overridden by the MS AJAX. Luckily, it can be adverted by changing the declaration from "Type" to something else. I found the solution HERE, under 'Scott's' post, great name BTW ;).

The steps I took were:

  1. Open up your Mootools core and more files (I used VS2012, but Notepad++ should work fine)
  2. Find (CTRL+F) "new Type" and replace with "new mooTools"
  3. Find (CTRL+F) "this.Type" and replace with "this.mooTools"
  4. Find (CTRL+F) "Type" and replace with "mooTools"
  5. Make sure that you do this for both files (unless your only using core)

Big thanks to Nathan and 'Scott' for helping me out.


Solution

  • It probably has something to do with the mootools not playing nicely with asp.net ajax. This article might help you out: asp.net forums on mootools not working with asp.net ajax