Utilizando atributos html com prefixo data

Uma forma de guardar informações no html para serem repassadas ao PHP, ou para serem manipulados por javascript é guardar informações como atributos HTML, utilizando o prefixo “data-“. Este tipo de marcação de atributos foi incluído no HTML5. Não que antes não existisse, você poderia utilizar qualquer atributo em tags HTML antes, mas este código não tinha a semântica correta, não era validado pelo W3C por exemplo. Pra simplificar, vamos aos exemplos:
Imagine uma lista com clientes, que ao clicar em editar, precisasse carregar um ajax passando algumas informações do mesmo. Eu precisava guardar os atributos concatenados e utilizar a função split do javascript pra separar depois:

<h2>Clientes:</h2>
<ul>
<li>ALberto Santos<a id="28|cliente_master|29 anos">Editar</a></li>
<li>Pedro Camargo<a id="29|cliente_master|39 anos">Editar</a></li>
<li>Maria Souza<a id="30|cliente_comum|22 anos">Editar</a></li>
<li>Milena Figueiredo<a id="31|cliente_master|57 anos">Editar</a></li>
</ul>
 

no Javascript:

$('ul li a').click(function(){
	var info = $(this).attr('id').split('|');
	var id = info[0];
	var tipo = info[1];
	var idade = info[2];
	//metodo post do jquery, realiza um post para o php via ajax
	$.post('url_do_post',{'id': id, 'tipo':tipo, 'idade':idade}, function(resposta){
		//realizo algo com a resposta do post
		alert(resposta);
	})
})

Com o novo tipo de marcação, com os atributos data ficaria assim:

<h2>Clientes:</h2>
<ul>
<li>ALberto Santos<a data-id="28" data-tipo="cliente_master" data-idade="29 anos">Editar</a></li>
<li>Pedro Camargo<a data-id="29" data-tipo="cliente_master" data-idade="39 anos">Editar</a></li>
<li>Maria Souza<a data-id="30" data-tipo="cliente_comum" data-idade="22 anos">Editar</a></li>
<li>Milena Figueiredo<a data-id="31" data-tipo="cliente_master" data-idade="57 anos">Editar</a></li>
</ul>

E o javascript:

$('ul li a').click(function(){	
	var id = $(this).attr('data-id');
	var tipo = $(this).attr('data-tipo');
	var idade = $(this).attr('data-idade');
	//metodo post do jquery, realiza um post para o php via ajax
	$.post('url_do_post',{'id': id, 'tipo':tipo, 'idade':idade}, function(resposta){
		//realizo algo com a resposta do post
		alert(resposta);
	})
})

Assim o código fica mais organizado e com a semântica correta, podendo guardar dados no html e manipulá-los com javascript sem o risco de concatenar strings, já que poderia ter uma String com o símbolo “pipe – |” e quebrar todo o código. Além de tudo isso, o atributo pode servir para estilizar o css também, utilizando seletores de atributos. (Comentei sobre isso neste post: CSS seletores de atributos)
Exemplo:

a[data-tipo="cliente_master"]{color:blue;}

Espero que tenham gostado e até a próxima.

www.simplesharebuttons.comCompartilhe este conteúdo nas mídias sociais!