Loading Modal

[dianaemanuel]

Boas tardes,

Quero colocar uma imagem de loading sempre que a página faz qualquer coisa, neste momento consegui colocar a imagem sempre que a página faz o load mas quando eu clico num botão, ou numa imagem ou noutro objecto qualquer não me é mostrado essa imagem.

O código que tenho é o seguinte:

<div class="modalloading" align="center" id="modalloading">
</div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="True" EnablePageMethods="True" AsyncPostBackTimeout="36000">
</ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="true">
 <ContentTemplate>
%-- Tenho vários controlos aqui dentro que são construidos em runtime--%>
</ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
		 $g(window).load(function () {

 $g('#modalloading').fadeOut();

});
</script>

Conseguem-me ajudar?

[KTachyon]

A #modalloading está visível ao início?

[dianaemanuel]

Sim, no inicio aparece sempre.

[bioshock]

Quero colocar uma imagem de loading sempre que a página faz qualquer coisa (...)

Quando dizes "sempre que a página faz qualquer coisa" estás-te a referir a executar código AJAX?

[dianaemanuel]

Sempre que clico num botão e nesse botão tenho código em C#.

[bioshock]

Então o que podes fazer é definir uma classe (ou elemento) idêntica para todos os controlos que queres que disparem quando clicados. Podes também definir o evento onclick directamente se assim o preferires.

Não sei como funciona em ASP.NET, mas se o fizeres via HTML + Javascript é de fácil implementação.

<input type="submit" data-item="click" value="Click!"/>
<img src="..." data-item="click"/>

<script type="text/javascript">
  $(document).on('click', '[data-item="click"]', function()
  {
     // O teu código após click..
  });
</script>

[dianaemanuel]

tenho que colocar em todos os botoes o data-item="click" certo?

[bioshock]

Sim, mas foi um exemplo, tu é que deves decidir qual a opção que melhor se adapta ao teu projecto.

Seguem então os três exemplos ilustrativos:

<input type="submit" data-item="click" value="Click!"/>

<input type="submit" class="itemToClick" value="Click!"/>

<input type="submit" onclick="clickIt()" value="Click!"/>

$(document).on('click', '[data-item="click"]', function()
{
  // O teu código após click..
});

$(document).on('click', '.itemToClick', function()
{
  // O teu código após click..
});

function clickIt()
{
  // O teu código após click..
}

[dianaemanuel]

Ok obrigado.

Vou tentar depois dou o feedback.

[dianaemanuel]

Bons dias,

Já tentei fazer o que me disseram:

Sim, mas foi um exemplo, tu é que deves decidir qual a opção que melhor se adapta ao teu projecto.

Seguem então os três exemplos ilustrativos:

<input type="submit" data-item="click" value="Click!"/>

<input type="submit" class="itemToClick" value="Click!"/>

<input type="submit" onclick="clickIt()" value="Click!"/>

$(document).on('click', '[data-item="click"]', function()
{
  // O teu código após click..
});

$(document).on('click', '.itemToClick', function()
{
  // O teu código após click..
});

function clickIt()
{
  // O teu código após click..
}

Mas no meu botão eu tenho no evento onclick em c# e ele primeiro executa-me a função em c# e depois é que chama esta e não era isso que eu queria.

Eu queria que antes de ser executado o código c# me mostra-se a imagem em espera e no fim a função c# me esconda imagem.

[bioshock]

Pois mas aí tens um problema. O que acontece é que ele deve executar os dois códigos ao mesmo tempo.

Não há forma de utilizares Ajax para chamares a função em C#?

[dianaemanuel]

Pois mas aí tens um problema. O que acontece é que ele deve executar os dois códigos ao mesmo tempo.

Não há forma de utilizares Ajax para chamares a função em C#?

Mas se chamar em ajax depois não tenho acesso aos controlos da página ou tenho?

[bioshock]

Se te referes aos controlos que possam a vir ser adicionados pelo próprio Ajax, tens.

[dianaemanuel]

Se te referes aos controlos que possam a vir ser adicionados pelo próprio Ajax, tens.

Como posso fazer dessa maneira?

[bioshock]

$.post('teuUrl', function(response)
{  
  // adicionas o que tiveres a adicionar ao DOM
  $('#divQualquer').append('<button class="teste">clica-me</button>');
});

$(document).on('click', '.teste', function()
{
  // ...
});

[dianaemanuel]

$.post('teuUrl', function(response)
{  
  // adicionas o que tiveres a adicionar ao DOM
  $('#divQualquer').append('<button class="teste">clica-me</button>');
});

$(document).on('click', '.teste', function()
{
  // ...
});

Não estou a ver como é que chamo a minha função de c# neste código.

[bioshock]

Onde eu escrevi teuUrl deves alterar para o url da tua função.

[dianaemanuel]

Onde eu escrevi teuUrl deves alterar para o url da tua função.

Ok vou experimentar depois comunico como correu.

Obrigado.