salsotto.com » difundindo ideias na web » Javascript

Requisições ajax com Django e jQuery – 1ª parte

Salsotto — Fri, 16 Sep 2011 16:14:43 +0000

Pretendo publicar uma série de 3 posts exemplificando a utilização de dois excelentes frameworks dos quais faço uso constante no meu dia-a-dia, o Django e o jQuery. A ideia parte da premissa de realizar requisições ajax e propiciar um desenvolvimento rápido para alguns problemas. É importante frisar que as soluções apresentadas podem ser facilmente implementadas também em outras linguagens.

<html>
  <head>
 
    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
 
    <script type="text/javascript">
      $(document).ready(function(){
        $('#escola').change(function(){					
 
          idEscola = $('#escola').val();
 
          $.get('/professores/escola/' + idEscola + '/', function(resposta){
            $('#listaProfessor').empty();
            $('#listaProfessor').prepend(resposta);
            $('#listaProfessor').show();
          });
        });
      });
    </script>
  </head>
 
  <body>
    <form id="avaliacaoForm" name="avaliacaoForm" method="post" action="">
 
      <div id="selecaoEscola">
        <label for="escola">Selecione uma escola:</label><br/>
        <select id="escola">
            <option value="0">- - - - - - - - -</option>
            {% for escola in escolas %}
            <option value="{{escola.id}}">{{escola.nome}}</option>
            {% endfor %}
        </select>
      </div>
 
      <table width="700" border="1" id="listaProfessor" style="display:none">					
      </table>
 
    </form>
  </body>
</html>

Template do selectbox.

{% if professores %}
 
  <tr>	
    <th scope="col">PROFESSOR</th>	
    <th scope="col" colspan="2">AÇÕES</th>	
  </tr>
 
  {% for professor in professores%}
 
    <tr class="linha">	
      <td>{{professor}}</td>
      <td><a href="{% url editar  idProfessor=professor.id %}">Editar</a></td>
      <td><a href="{% url deletar idProfessor=professor.id %}">Deletar</a></td>
    </tr>
 
  {% endfor %}
 
{% else %}
 
  <tr>	
    <th scope="col">NÃO HÁ PROFESSORES CADASTRADOS</th>
  </tr>
 
{% endif %}

Retorna para o template o contexto via ajax.

#bibliotecas django
from django.template import RequestContext, Context
 
def changeProfessor(request, idEscola):
 
    '''
    view: changeProfessor
    descricao: carrega a lista de professores ao selecionar outra escola (ajax)
    '''
 
    professores = Professor.objects.filter(escola=idEscola).order_by('nome')
 
    #contexto para renderizar na pagina
    contexto = Context()
    contexto['professores'] = professores
 
    #retorna o contexto para o template
    return render_to_response('professor.html', contexto, context_instance=RequestContext(request))

Tradução do livro jQuery Fundamentals por Herberth Amaral

Salsotto — Wed, 17 Nov 2010 18:09:37 +0000

A primeira versão traduzida do livro Jquery Fundamentals (Rebecca Murphey) realizada por Herberth Amaral acaba de ser disponibilizada em versão beta, enquanto é finalizado os ajustes necessários para a versão estável. Com isso, ficamos na expectativa e aproveitamos esse excelente material que já está em circulação.

Então se você procura uma ótima referência de jQuery não deixe de acompanhar as atualizações no repositório do Github.

Parabéns pelo trabalho, uma ótima iniciativa Herbeth.

Fechar pop-up automaticamente com Javascript

Salsotto — Mon, 18 Jan 2010 12:42:27 +0000

Hoje a técnica de abrir pop-up em janelas já não é das mais utilizadas, e nem recomendadas por desenvolvedores que seguem os padrões do W3C, porém muitos ainda a utilizam(infelizmente).

Abaixo apresentarei a solução que implementei para fechar as janelas automaticamente com javascript, pois já que vergonhosamente alguns seres ainda utilizam essa técnica poupe-nos de pelo ficarem abertas até que se clique no botão de fechar.

<script type="text/javascript">setTimeout("self.close();",7000)script>

Com o código acima dentro do cabeçalho do seu pop-up, ele irá fechar automaticamente em 07 segundos após ter sido aberto. Não aconselho usarem este tipo de técnica, então em um próximo post, mostrarei como divulgar anúncios de um modo correto.

[]s

Limpar formulários com Javascript

Salsotto — Fri, 30 Oct 2009 13:52:37 +0000

Quem nunca viu aquele botãozinho de limpar formulários por ai hein!? Alguém já usou esse botão!? Essa é uma funcionalidade provida pelo próprio HTML, pelo menos era isso que eu pensava!

Dentro dos elementos inputs dos formulários HTML, há uma atributo chamado de reset, que no qual seu intuito é resetar os todos elementos(inputs, textarea, checkbox e etc…) do formuário, porém tinha comigo que esse atributo tinha a funcionalidade de limpar os campos, mas equivoquei-me imensamente, pois sua funcionalidade é restaurar os valores inicias que os elementos receberam quando foram criados.

Foi ai que deparei-me com o problema, pois quando o submit do formulário era enviado para o servidor, guardava em uma session iniciada pelo php todos os valores dos campos caso houvesse algum erro na validação, e quando havia erros na validação os valores iniciados nos elementos eram exatamentes aqueles que foram guardados nas sessions, tornando assim impossível de limpar o formulário.

Para isso criei a seguinte função, que independentemente limpa o formulário a qualquer hora.

function limpa_formulario(form){
 
   //total de elementos no formulario (inputs, select, textarea...)
   total_elementos = form.elements.length;
 
   i=0;
 
   //enquanto não percorrer todos os elementos do formulario
   while(i < total_elementos){
 
      if (form.elements[i].type!="submit" || form.elements[i].type!="button"){
           if (form.elements[i].value!=""){ 
       form.elements[i].value="";
           }            
      }    
      i++;
    }
 
    return true;
}

Funções recursivas em Javascript

Salsotto — Tue, 27 Oct 2009 01:04:19 +0000

O que é recursão?

A recursão na programação é bem exemplificada quando uma função é definida em termos de si mesma, onde essa função invoca a si própria, assim como o exemplo abaixo:

function fraseRandomica(id_elemento){
 
    /*cria array de frases*/
    frase =  new Array(10);
 
    frase[0]  = "O Django é fantástico";
    frase[1]  = "O Django é maravilhoso";
    frase[2]  = "O Django é o melhor framework web";
    frase[3]  = "O Django é simples";
    frase[4]  = "O Django é rápido";
    frase[5]  = "O Django é Pythonico";
    frase[6]  = "O Django é a 8 maravilha do mundo";
    frase[7]  = "O Django é foda";
    frase[8]  = "O Django é sem palavras";
    frase[9]  = "O Django é tudo";
 
    /*gera um numero randomico de 0 a 9*/
    numero_randomico  = Math.floor(Math.random() * 9);
 
    /*seleciona a frase pelo numero gerado*/
    output = frase[numero_randomico];
 
    /*retorna a frase para o elemento html espeficado pelo id*/
    document.getElementById(id_elemento).innerHTML = output;
 
    /*chama a propria função após 04 segundos*/
    setTimeout('fraseRandomica();',4000);
 
}

A função acima é só um exemplo de funcionamento de funções recursivas no javascript, mas também serve de exemplo para quem queira desenvolver um função de frases dinâmicas, assim como no site Azeite de Oliva Espanhol onde foi o propósito de desenvolvimento dessa função.

Delimitar maxlength no textarea

Salsotto — Tue, 27 Oct 2009 00:25:00 +0000

Não existe qualquer atributo HTML para a tag textarea que delimite o número máximo de caracteres que o campo pode ter, diferentemente dos campos inputs que possuem o atributo maxlength, por isso é necessário a intervenção do javascript para tal tarefa em campos textarea.

function maxlength(nome_campo, nome_formulario, limite_caracteres){
 
 /* tamanho de caracteres */
 var tamanho  = document.nome_formulario[nome_campo].value.length;
 
 /* conteudo digitado */
 var conteudo = document.nome_formulario[nome_campo].value;
 
 /* se o tamanho for maior que o limite, ele sobrescrece o ultimo caractere */
 if (tamanho >= limite_caracteres) {
        document.nome_formulario[nome_campo].value=tex.substring(0,limite);
    }
 
 return true;
}

Seu uso é usado no onkeyup de seu campo textarea. Acho que não tem segredo! ;D