Como atualizar parte tela sem refresh com Jquery, fora da DIV retorno?

[Fábio BN 17]

Oi Pessoal.

 

Eu consigo atualizar parte da tela usando uma variável de retorno dentro de uma DIV retornando o HTML.

Porém preciso atualizar uma parte do site que não está dentro da DIV retorno.

É um menu lateral, que após receber um clique num botão, esse botão executa um JS e acessa um arquivo e atualiza o
Banco de Dados, porém preciso que os valores atualizados tb sejam atualizados no meu direito do site, e não na DIV retorno.

Existe alguma forma de fazer isso?

Grato. Fábio!

[gabrieldarezzo 255]

Opá existe sim.

Se chama Ajax.

 

Se quiser utilizar JavaScript 'puro':

Tem esse tópico bem detalhado como fazer:

http://forum.imasters.com.br/topic/549713-selecionar-item-e-exibir-resultado-na-tela-sem-carregar-a-pagina/?p=2194709

 

 

Se está utilizando Jquery, a documentação é sua amiga.

http://api.jquery.com/jquery.ajax/

[Fábio BN 17]

Ok, Vou olhar.

Obrigado!

[Fábio BN 17]

Oi.

 

Como eu executo esta função, no Load da página,sem clicar em nada?

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

$("#atualizar").click(function() {
                 $("#retorno_atualizar").load("pagina_asp");
});
});
</script>

Exemplo, onde tem #atualizar").click(function() que chamaria o evento, como eu chamo o evento seu precisar clicar em cada?

Abraços!!

[William Bruno 1501]

<script type="text/javascript">

$(document).ready(function() {

$("#retorno_atualizar").load("pagina_asp");

});

</script>

[Fábio BN 17]

Oi William.

Consegui fazer, ficou show.

Porém no IE 11 está com uns bugs, não sei por que.

O mais estranho, se eu abrir o ( Inspecionar Elemento ) do IE o meu código funciona perfeitamente sem eu mexer em nada.

Pois no FireFox e Chrome funciona.

Abraços!

[gabrieldarezzo 255]

Posta seu código de forma focada na parte do load()

[Fábio BN 17]

Ok.

 

Vamos lá:

</script>


        <script type="text/javascript">
		$(document).ready(function(){
		
		$("#executar").click(function(){
		
		
			atualiza();
		});
			
			});
			
				
			
		function atualiza(){
		
		
		 $("#tabela").html("<img src='../../imagens/loading_reduzido.gif' width='40' height='38'>"); 
		
		   $.get("includes/loja/carrinhox.asp?cod_prod=<%=tudo("codigo")%>",
		   function(resultado){
			$("#tabela").html(resultado);
			}
			
		   );
		  
		}
		
	   </script>

Botão:

<div id='executar' align='center' class=''><img src='../../imagens/loja_virtual/bt_comprar.gif' class='img-responsive'>

DIV Retorno:

 <div id="tabela"></div>

Tela Carrinhox.asp

 

Tela carrinhox.asp

Após executar o código do Banco de Dados,abre a Modal

<script type="text/javascript">
$(document).ready(function() {
   $('#myModal_carrinho1').modal('show');
});
</script>


<!-- Modal -->
<div class="modal fade" id="myModal_carrinho1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title font-color-vermelha-vivo">Produto Adicionado com Sucesso</h4>
            </div>
            <div class="modal-body">
                <p class="font-color-verde-vivo">O produto " <span class='font-color-vermelha-vivo font-bold font-size16'><%Response.write tudo("nome_mag")%></span> " foi adicionado com sucesso!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"  data-dismiss="modal"><span class="glyphicon glyphicon-shopping-cart"></span> Continuar Comprando</button>
	
                <div><a href="/principal_loja_virtual.asp?id=carrinho" class="btn btn-success"><span class="glyphicon glyphicon-credit-card"></span> Finalizar Compra</a></div>
								
				
            </div>
        </div>
    </div>
</div>



// Aqui atualizao Menu Lateral

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

                 $("#retorno_atualizar1").load("includes/menu_dir1x.asp");
});

</script>

Então. O mais estranho é que no IE 11 se abrir noi Inspecionar Elemento funciona, se fechar o Inspecionar elemento, não.

Eu fiz uns vídeos do problema, vou enviar no Youtube e já mando o LINKs.

Abraços!

[Fábio BN 17]

Vídeo 01 - No FireFox e Chrome Funciona Normal
https://www.youtube.com/watch?v=fN7g_b4Pnxs

Vídeo 02 - No IE Não Funciona
https://www.youtube.com/watch?v=-x8ArDaUw2Q

Vídeo 03 -No IE só funciona com Inspecionar Elemento Aberto.
https://www.youtube.com/watch?v=YlaRZCV9k2c

[Fábio BN 17]

Eu Resolvi parte do problema trocando GET por Post, agora no IE está atualizando o o botão normalmente, porém isso ainda não funciona.

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

$("#retorno_atualizar1").load("includes/menu_dir1x.asp");
});

</script>

Quando eu solucionar, retorno.

 

Grato!

[gabrieldarezzo 255]

Se você acessar direto via URL...


seusite.com.br/includes/menu_dir1x.asp

 

Funciona? (não conheço asp)

 

Da uma resposta em HTML?

 

 

 

Outra dica bacana é deixar o Debbug/Depurador de JavaScript do seu navegador aberto e verificar se tem algum erro....

No caso do Google Chrome é a (f12 -> aba 'Console') Ou (CTRL + SHIFT + i -> aba console )

[Fábio BN 17]

Eu resolvi, trocando por isso:

<script type="text/javascript">
$.ajax("includes/menu_dir1x.asp", {
    cache: false,
    success: function(data, textStatus, jqXHR) {
        $("#retorno_atualizar1").html(data);
    },
    dataType:"html"
});

</script>

Abraços

Fábio!