Ajax.BeginForm show loadingElementId when OnBegin return false

Question

Hello I'm having the same problem from this post:

http://stackoverflow.com/questions/1164251/ajax-beginform-not-hiding-loading-element-when-onbegin-fails but I have not found how to solve it yet.

Basically when I use Ajax.BeginForm with a OnBegin function and this function returns false, the loading elementID is still shown and it never hides again.

This is the code I'm testing it with:

function isValid() {
    return false
} 


<% using (Ajax.BeginForm("LogIn", "Security", new { ReturnUrl = Request["ReturnUrl"] }
       , new AjaxOptions { UpdateTargetId = "resultErrors", OnBegin = "isValid", LoadingElementId = "updatePanel" }))
{ %>

Answer 1

Did you ever find a solution to this? I have the same problem.

Answer 2

I don't remember exactly the solution, i decided a long time ago that it was much better to write my own and plain Html to handle Ajax calls.

If you want you can post your code here and i can show you how to do it with JQuery.

Now if you want to stick with this solution you can still use JQuery to hide the element manually like this:

<% using (Ajax.BeginForm("LogIn", "Security", new { ReturnUrl = Request["ReturnUrl"] }
   , new AjaxOptions { UpdateTargetId = "resultErrors", OnBegin = "isValid", LoadingElementId = "updatePanel" }))
{ %>

<script type="text/javascript" language="javascript" src="<%=Url.Content("~/Scripts/jquery-1.4.1.js") %>">//Jquery reference
</script>

<script type="text/javascript" language="javascript">
   function isValid() {
       if (true) // In case i whant to return true
       {
           return true;
       }
       else // I whant to return false
       {
           $('#updatePanel').hide(); // Manually hide the LoadingElementId
           return false;
       }
   }    
</script>

Answer 3

Sorry, my situation is slightly different. I don't have an onBegin function I just have a loadingElementID specified on an ajax.actionlink. When I click on the link the loading element shows but when it is completed, it never hides even though I can see that the page has updated successfully. I have even manually tried to hide it on the onsuccess callback. Adding breakpoints to the javascript and adding an onBegin, it looks like the onComplete is firing before the onBegin. I have no idea what is going on here.