Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jadsonlucena

[Resolvido] Mensagem e carregando com ajax e jquery

Por , em Javascript

Recommended Posts

jadsonlucena    0

jadsonlucena
Postado

Opa William Bruno como você tinha dito para eu estudar e pesquisar. Eu resolvi seguir o seu conselho, e no final eu consegui o que eu queria. Que no caso era evitar que a pagina retornasse ao início quando fosse atualizada.

Mais por final eu ainda tenho uma duvida, que seria a mensagem de carregando quando um link fosse acionado.

Eu tentei fazer esta ação mais eu não consigo encontrar aonde está o erro.

 

Eu estou postando o meu arquivo ajax com jquery e o index.html e gostaria de saber qual seria o erro.

 

Arquivo: ajax.js 

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

	$("#loading").ajaxStart(function(){
   	$(this).show();
 	});
        $("#loading").ajaxStop(function(){
      	$(this).hide();
      	});

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });
Arquivo: index.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>jQuery History Plugin Ajax Sample</title>
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="jquery.history.js"></script>
  <script type="text/javascript" src="ajax.js"></script>
  <style type="text/css">#content { border: 1px #666 solid; width: 300px; height: 300px; padding:0.5em; }</style>



</head>
<body>
  <h1>jQuery History Plugin Ajax Sample</h1>
  <div id="ajax-links">
    <ul>
      <li><a href="#1">load 1.html</a></li>
      <li><a href="#2">load 2.html</a></li>
      <li><a href="#3">load 3.html</a></li>
    </ul>
</div>
    <div id="content">[color="#800080"]<div id="loading">Carregando</div>[/color]</div>
    <hr />
  </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

jadsonlucena    0

jadsonlucena
Postado

Olha eu consegui um código melhor de mensagem carregando ou (imagem de Loading) com ajax e jquery..

 

jQuery(document).ready(function($) {

function load(num) {

$('#content').load(num +".html");

}

 

$.history.init(function(url) {

load(url == "" ? "1" : url);

});

$("#loading").ajaxStart(function(){

$(this).append("<p><img src='imagem/loading/1.gif' border='0' align='center' /></p>");

});

$("#success").ajaxSuccess(function(evt, request, settings){

$("#loading").hide();

$(this).append("<p class='succ'>Carregado!</p>");

$(this).fadeOut(1000);

});

 

$('#ajax-links a').live('click', function(e) {

var url = $(this).attr('href');

url = url.replace(/^.*#/, '');

$.history.load(url);

return false;

});

});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito