LoadingElementId en Ajax.BeginForm no muestra la imagen de carga

Question

Tengo una aplicación MVC3 y necesito agregar una imagen de carga de ajax. Pongo esto en mi opinión

@using (Ajax.BeginForm(
     "LogOn","Account", 
     new AjaxOptions { LoadingElementId = "div_loading" })) 

Ésta es mi muy simple div en el mismo punto de vista:

<div id="div_loading" style="display:none;"> 
    <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" /> 
</div> 

Cuando hago clic en mi botón de enviar para enviar el formulario de vuelta, el loading.gif nunca aparece. Mi código funciona bien, pero no aparece ningún indicador de carga. Y la imagen se nombra correctamente y en el lugar correcto. ¿Alguien tiene una pista de por qué?

Actualización Aparentemente, esto tiene algo que ver con las aplicaciones de Telerik. Si creo una aplicación regular de MVC3, funciona. Cuando creo una aplicación Telerik MVC3, no funciona. ¿Alguien más se ha encontrado con esto con Telerik?

Answer 1

Prefiero evitar una carga iamge a cada llamada ajax que hago.

La respuesta más común aquí es una solución para mostrar una (la carga de imágenes) spinner ajax ajax cada vez que hace una llamada de envío:

Display spinner while waiting For ajax

Tiene la funcionalidad que necesita. Simplemente use javascript para adjuntar la visualización de la imagen a las llamadas ajax.

Debería ser algo como:

<script type="text/javascript"> 
     $(document).ready(function() { 
      BindSpinner(); 
     }); 

     function BindSpinner() { 
      $("#div_loading").bind("ajaxSend", function() { 
       $(this).show(); 
      }).bind("ajaxStop", function() { 
       $(this).hide(); 
      }).bind("ajaxError", function() { 
       $(this).hide(); 
      }); 
     }; 
    </script> 

Lo que esto hace es mostrar el div en el Ajax de envío y lo oculta tras parada ajax o error para todas las llamadas en su página. Si coloca este script y div en su _layout, lo hará por cada llamada de Ajax en su sitio.

Answer 2

Es posible que desee probar esto en su lugar. Me lo dio el SO cuestionar here

<div id="div_loading" style="visibility:hidden;"> 
    <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" /> 
</div> 

Answer 3

Usted podría intentar esto así de: here

function AjaxBegin() 
{ 
    $('#div_loading').show(); 

} 
function AjaxComplete() 
{ 
    $("#div_loading").hide(); 
} 
function AjaxFailure(ajaxContext) 
{ 
    var response = ajaxContext.responseText; 
    alert("Error Code [" + ajaxContext.ErrorCode + "] " + response); 
} 


AjaxOptions: 

OnFailure = "AjaxFailure"; 
OnBegin = "AjaxBegin"; 
OnComplete = "AjaxComplete"; 

Answer 4

que tenía el mismo problema y fue capaz de resolverlo cambiando el nombre del elemento que se va oculto/mostrado. Utilicé el formato camel-case: "myDivToBeHidden"

El elemento necesita la propiedad "mostrar" establecida en "ninguna".