JQuery div refer with links

[Rodinei Gevaerd]

Teria como fazer um resumo das funções de posicionamento de div, usando um exemplo href?

 

Exemplo: Tenho um link que está numa parte do meu index. Uso um link simples de dentro da div para carregar nela mesma?

<a href="seguinte.html#DIV">Some nice link text</a>

 

 

 

E esta função serve para qual das páginas, no caso da referência ser apenas física? (NO CASO UMA pÀGINA SIMPLES SEM SEGURANÇA)

$( document ).ready(function() { 
  //get hash code at next page 
  var hashcode = window.location.hash; 
  // move page to any specific position of next page(let that is div with id "hashcode") 
  $('html,body').animate({scrollTop: $('div#'+hascode).offset().top},'slow'); 
});

 

[DiF]

@Rodinei Gevaerd Olá,

O que exatamente você espera com os códigos? Qual o seu objetivo?

Basicamente o código em jQuery que você postou faz com que a tela role até a âncora demarcada.

 

A função animate serve para criar animações. No caso ali o scrollTop junto com o offset() define onde é a posição na qual você quer rolar a página.

 

Veja este exemplo funcionando: http://jsfiddle.net/ntkmxj2d/

 

 

 

[Rodinei Gevaerd]

Entendido a parte do div.

Teria que ser um código que fizesse a página rolar até a div e carregasse a página php também.

[DiF]

@Rodinei Gevaerd Mas nesse caso, basta acrescentar o uso do ajax no evento de click.

 

A função que você precisa usar é  $.ajax()  onde ele recebe parâmetros de instruções por exemplo:

$.ajax({
   url: "aqui é o seu arquivo php",
   dataType: "HTML",
   method: "GET",
   data: {id: id_post}
}).done(function(retorno){
     $("div-que-quer-inserir-o-retorno").html(retorno);
}).fail(function(retorno){
     $("div-que-quer-inserir-o-erro").html(retorno);
});

O "retorno ali, é o que o arquivo PHP vai retornar. o que tiver dentro de um echo e for bem sucedido vai retornar o valor no elemento DIV que você quer.

 

Lembre-se o código acima é um mero exemplo. Você precisa estuda-lo e entender como funciona.

No method, tanto faz, se for get ou  post.  Por padrão, se for só apenas um ID para passar a consulta ao banco de dados, o GET é mais indicado.

 

 

[Rodinei Gevaerd]

Tudo bem mano.

Você venceu . Teria como fazer esse mesmo script pegar as funções que carregam o URL para os campos do formulário?

 

[DiF]

@Rodinei Gevaerd Sim, se você converter os dados que precisam ser inseridos nos campos do formulário para JSON, vindo do php, você pode inserir como jquery.

 

Nesse caso, você iria usar o dataType para JSON ao invés do HTML.

No php você converte para o json usando o json_encode

 

Espero que você esteja entendendo, que desde o início estou dando dicas mas não o código pronto. Pois aqui o intuito é passar o conhecimento, e não  fazer os códigos/trabalhos para os outros. 

 

Enfim, Se você precisa inserir dados em um formulário de forma assíncrona( sem atualizar) e estes dados vem de um php, este é a melhor forma.

 

Só não entendi uma coisa.

2 horas atrás, Rodinei Gevaerd disse:

pegar as funções que carregam o URL

Que funções são estas? de qual URL? 

 

O que eu exemplifiquei acima foi um método de carregar informações vindas de um arquivo PHP de forma assíncrona.

 

[Rodinei Gevaerd]

Então, uma variável que seria decodificado com o JSON teria que ser uma variável já tratada no script?

 

Citação

mixed json_decode ( string $json [, bool $assoc ] 

 

adicionado 36 minutos depois

De certo modo eu sei porque a explicação abaixo está errada. Gostaria de entender porque o exemplo MySQL não se aplica ao nosso exemplo desejado, e porque o nosso script está sendo desenvolvido com php já que o arquivo eh POST, e isso é banco de dados? Seria o caso de você esclarescer porque no exemplo que cito abaixo o programa está usando um dado que é adicionado ao banco de dados. O que eu quero descobrir é como eu faço isso através de uma página que vai ser carregada com vários campos e um botão de input.

 

O botão de input vai ser uma função.

 

Esta função chama o script php que trata a consulta MySQL.

 

<?
$(document).on('click','.username',function(){
 //Repare que aqui nós vamos atribuir o valor do elemento `'.ingrediente'` (que é o input, a variavel JS `'ingrediente'`
 var username = $('.username').val();
$.ajax({
   //Define o método que 'ingrediente' será passado para o servidor
   type: "POST",
   //Aqui deve-se apontar o arquivo da chamada
   url: "newuser.php",
   //Aqui é o modo de se passar um váriavel JS para o php, 
   data: {username},
   //Aqui é o formato que o arquivo PHP irá responder
   dataType: 'html',
   //Caso tudo ocorra bem, aqui nós vamos preencher a lista
   //Repare que este 'data' é o que o arquivo insere.php vai devolver
   success: function (data)
      {
          //Selecionamos o elemento '.lista', e com o método jQuery append() colocamos a resposta do arquivo PHP dentro da lista.
          $('.lista').append(data);
      }
  });
});
?>