Jquery – Template

Posted by cristianmedeiros | Posted on 03-04-2011

Category : JQuery, Smarty/Templates

Tags: , ,

Não é de hoje que existem ferramentas para template em JavaScript. O objetivo destas é facilitar a exibição de dados na interface, para evitar que você precise escrever o html dentro de um loop do JavaScript ou pior que isso, que você faça a resposta do lado do servidor e traga todo o html montado de lá.

Assim surgiram diversas ferramentas para ajudar nessa tarefa, hoje já existe diversas alternativas. Eu conhecia apenas o PURE, e hoje pesquisando sobre template em JavaScript para Jquery, achei isso no site do Jquery: http://api.jquery.com/jQuery.template/

Achei o plugin muito bacana, e muito simples de usar. Já faz um bom tempo que uso apenas JSON para transações ajax e este plugin faz exatamente o que eu preciso. Esta em beta ainda, mas já funciona muito bem. Vou tentar usar em algum site para valer, para verificar a estabilidade do danado.

Na página tem alguns exemplos de como usar, mas vou colocar aqui o teste que eu fiz:

 

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10

 
$.getJSON('customerDetails.php',{responseType:'
    function(response){
        $.template(
            "customerList", 
            "<option value="${id_customer}">${name_first} ${name_last}</option>
        " );
        $.tmpl( "customerList", response ).appendTo( "#id_customer" );
    }
);

A resposta desta chamada JSON é um objeto neste formato:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 
[
  {
    "id_customer":"1",
    "name_first":"Fulano",
    "name_last":"Siclano",
    "email":"fulano@gmail.com",
    "ddd_fone":"11",
    "fone":"5555-6666",
    "zip":"04444-444",
    "address":"Rua Que vai e volta",
    "number":"123",
    "neighborhood":"Jardim dos Bairros",
    "city":"Sao Paulo",
    "estate":"Sao Paulo",
    "cpf":"000.000.000-99",
    "status":"1",
    "data_record":"AAAA-MM-DD",
    "password":"123",
    "born_date":"AAAA-MM-DD"
  }
]

Como vêem é uma resposta JSON, com muito mais informação do que eu estou utilizando no template, porém ele faz o assign por chaves, e o processo fica bem simples.

Espero que isso entre logo na distribuição oficial do Jquery :)

JQuery – beforeunload

Posted by cristianmedeiros | Posted on 12-09-2010

Category : JQuery

Tags: ,

Muito já se foi falado sobre chamadas ajax no momento em que a janela é fechada ou atualizada, então esse post é mais para eu não esquecer isso de novo.

Chamadas ajax no momento de se fechar a janela tendem a falhar, pelo simples fato de o script não ter mais um ponto de retornou (porque a janela já fechou), assim, a ação não é executada, com aquela informação que você queria salvar indo para o limbo.

Para contornar essa situação, podemos adotar a seguinte “solução”:

?View Code JAVASCRIPT
1
2
3
4
5
6
7

...
$(window).bind("beforeunload", function(){
    if(saveStatus()){
        return true;
    }
});
...
?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12

function saveStatus(){
    var status = false;
    $.ajax({
        async:'false',
        url:'acao.php',
        data:{val:$('#val').val()},
        success:function(){
            status = true;
        }
    });
    return status;
}

Neste processo, criamos um bind para o evento, que será chamado antes da janela fechar, mandamos uma chama ajax assincrona, ou seja, o evento só será finalizado quando o ajax retornar, por isso, muito CUIDADO para que esta chamada não demore muito tempo para ser executada e cause alguma lentidão indesejada