RadAjaxLoadingPanel won't show on HTML Server side button

[ben]

It is really easy to simulate this error.. RadAjaxLoadingPanel won't show up when I put on onserverclick event there
use radajaxpanel and loading panel and put
<button id="butsearch" runat="server" onserverclick="butsearch_Click"  >sss</button>
It will not work, however, if you remove onserverclick event, it will work again

I use
<form runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" CompositeScript-ScriptMode="Release">
            <CdnSettings TelerikCdn="Enabled" />
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                <asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" />
                <asp:ScriptReference Path="~/JQuery/jqeruy.roundcorners.js" />
                <asp:ScriptReference Path="~/JQuery/jquery.general.js" />
                <asp:ScriptReference Path="~/JQuery/jquery.scrollTo.js" />
                <asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
                    Name="MicrosoftAjax.js" Path="https://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js" />
            </Scripts>
        </telerik:RadScriptManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadAjaxPanel LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
<button id="butsearch" runat="server" onserverclick="butsearch_Click"  >sss</button>
  </telerik:RadAjaxPanel>
</form>

[ben]

Solution attached..

[ben]

The main reason for doing this because ASP.Net renders button as <input type="submit"/>, that stops me from putting icons in the button. I am aware that you have RadButton control, but it is too late now, I am using JQuery UI Theme roller for button..

I am very disappointed that this bug is happening, I have tried RadAjaxManager as well, same result as well.. Please tell me the solution

I have built a button adapter to fix the whole asp.net to render button as <button>.. I have previously submited a suppot ticket http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=415041

[ben]

I have more findings
The HTML button won't even update the control in Ajax.. However, when I use Microsoft Ajax UpdatePanel, it works,... definitely something wrong in your product...
Pleae try to update some text in on click event of HTML button and ASP button, Telerik fails to update, Microsoft can update
 the code is

<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
            <ContentTemplate>

        <div style="height: 500px; width: 500px;">

            <div id="div" runat="server">
            <button runat="server" id="butSave" onserverclick="butSave_Click" >
                HTML BUtton</button>
                </div>
             <asp:Button ID="butSave2" runat="server" onclick="butSave2_Click" Text="ASP"/>
            <asp:Panel ID="Panel1" runat="server">
                <asp:LinkButton ID="sss" Text="sss" runat="server" OnClick="lnkSave_Click" />
             </asp:Panel>  
               
                 
        </div>

[ben]

Someone has asked this, but your answer is not satisfactory
http://www.telerik.com/community/forums/aspnet-ajax/ajax/htmlbutton-ajax-request.aspx

I have another findings, it works on IE8 Compatibility View, that article is saying Firefox and IE8

Since it works in Microsoft Ajax, there is something wrong with Telerik

[ben]

 The loading panel shows on IE8 compatability mode, not on ie8 and firefox, not on google.. please try attached solution.. I have been spending days working on this and you can see the number of replies...
I want to make sure that it is not my problem and not Microsoft Ajax problem


Since it works in IE7, it is definitely a telerik problem..
I have got the source code license as well, Please send me the updated dll after fixing it

[ben]

I have found another related bug that only happens ie8, but not IE7
This is related with hierachical RadGrid. When you click the expand button on the left side (as show on the attached screen). The ajax loading panel won't show up. However IE8 Compatability mode works fine, meaning IE7 works

[Vasil]

Hello Ben,

Thank you for contacting us and for the effort to provide us a feedback.

We are aware of this behavior of the loading panels. I read very carefully your posts and I am about to explain you why exactly this is happening.

First of all I tested your project. And saw that update of the content in the RadAjaxLoadingPanel1 is happening but only the loading panel is missing. When you click on the HTML Button after 2 seconds the HTML link button is appearing on the page. So it is clear that call back s happening and the content is updated. But yes the loading panel is missing and it is not showing while the page is loading.

Now when we click on the ASP button the content is updated and the loading panel is also showed.

So of course we debugged the project to see what is the difference and why this is happening. What turn out was that when the HTML button is clicked 2 following callbacks are started. First of which gets aborted. And after the second one finishes, page gets updated with the new content. The sequence is:
1) First Callback is initializing and loading panel is shown.
2) Second callback is initializing, loading panel is already shown.
3) After the first callback is aborted the loading panel get hidden.
4) After 2 seconds the browser receive the server response and update the page.

In IE7 (2) and (3) steps are reversed and because of this the loading panel is show again and then is hidden in (4) step.

The loading panel is hiding on callback abort by design, and this is the correct behavior for the LoadingPanel. Because in normal circumstances after you abort the POST callback you will want the page to be again functional (no loading panels to be shown).

And so the problem here is with the double callback and abortion of the first one.

I removed the RadAjaxPanel and I wrap the button in asp:UpdatePanel. And then I again tested what is happening. It turns out that using an asp:UpdatePanel again 2 callbacks are started and then first is aborted. So it is exact the same behavior between RadAjaxPanel and asp:UpdatePanel when we talk about the callbacks and updating the page.

The problem clearly comes from using HTML button with onserverclick inside the asp:UpdatePanel. Actually RadAjaxPanel itself uses asp:UpdatePanels to works.

You can find the attached project that uses only Microsoft's controls. And the same problem with the double callback exist. I have also attached a screenshot of Firebug's console to illustrate what is the error.

The correct way is to use WebControl such as ASP:Button. Because if you use html button you will get other troubles as well as this with the double callback. You will also not be able to execute client code and fire server event in the same time. Find more information here.

I hope this helps.

Kind regards,
Vasil
the Telerik team

[ben]

Thanks for your detailed explanation

I am doing a Button Control Adaptor, so I only make  the <button> appears on ie8+, firefox and chrome, the rest are using <input> , main reason is I cannot put icon next to <input>.. I am using Jquery UI theme, so only 2 lines of code, every button in the web site got icons next to it

Can you think of any quick ways to solve this problem? I can say I am a very experienced Telerik user, but so far I am still stuck !!

Meanwhile, I will do more research about it, and I think you probably put your explanation in the help file under the section of "Compatability with other controls in Ajax", since it is really useful
Thanks

[ben]

Just also let you know I am aware of the limtation of <button> control over <asp:button>.. This is the only problem left for me.. I do need the loading panel to show up without doing big modifications for the wed site... I am aware you can show the ajaxloadingpanel manaully, but that is too big work for me

[ben]

If I migrate all buttons to telerik button with minimum coding efforts, what is the best way to do? I use jquery now because it can convert everything in few lines of code,,,

[Vasil]

Hello Ben,

You could fix the buttons onclick attribute in order to make only one postback per click. This way the ajax panels will be shown fine.

This will also fix the JavaScript error that IE9 shows when using asp:UpdatePanel with HTML buttons.

function FixButtons() {

  if (!($.browser.msie && $.browser.version == "7.0")) {

    var buttons = $(":button");
    for (var i = 0; i < buttons.length; i++) {
      var value = buttons[i].attributes["onclick"].value;
      value = value + ";return false;";
      buttons[i].attributes["onclick"].value = value;
    }
  }
}

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(FixButtons);

The script above will change the buttons onclick attribute that is rendered by default like:

onclick="__doPostBack('ctl00$MainContent$butSave','');"

We are adding "; return false; " to prevent the browser for making the second post-back.

onclick="__doPostBack('ctl00$MainContent$butSave','');return false;"

If you make such change in the onclick attribute IE7 will not work properly. So in the beginning of the function we are checking the browser version.
I tested it here on several browsers and it works. But I would still recommend you to do future testing and add more conditions if required.

Kind regards,
Vasil
the Telerik team

[ben]

Oh, it is that simple!!!

You should put this in documentation. This scenario will be asked by somebody else in the future..Do you have safari and google chrome on your end? Do you mind test them as well.. I believe they will work as well

Since I am using Control adaptor, checking browser version is by by browser files, so I am not concerned already. I do not even need to write checking browser code. I just need to write browser file and apply the control adpator as needed

If people are looking for buttons with icon, this is the way to go.

[ben]

I have put your "return false" in the button adaptor and it works..
Just for your interest, Button adpator does not work in IE 7 anyways due to an error "A potentially dangerous ... <span> is submitted", because of the submitting behaviour of IE7 got design problem.

in <button><span>Value</span></button>, IE7 submits as "<span>Value</span>", IE8 and firefox and chrome submits as Value..This is a default behaviour or IE7 and cannot be changed

Beacause I am using browser file, so in my app, IE7 still renders as <input>,

Attached is the browser file in .net 3.5 and the button adaptor, in .net 4, just use the built in browser files..
I have tested it and it works, my web site has hundreds of pages, I rely on the radajaxpanel to prevent user from double clicking...

I hope you can share your knowledge and my code in codelibrary or something !!

[Vasil]

Hello Ben,

Thank you for asking to share you code with the whole community. It could be really helpful for other people.
I am making this conversation public and it will be sticky in the ASP.NET AJAX forum.

Regards,
Vasil
the Telerik team

[dany7487]

thank you very much for your post!!

[joe]

Thanks for giving us the solution so far am excited to learn the method you have told above,  helped me to get this.