Inserir Elementos Dinamicamente na tabela

Um post rápido, Essa semana tentei fazer algo simples, mas levei um suor pra fazer, mas era algo bem simples de ser resolvido, então você pode estar passando por isso, então aqui venho para esclarecer e até porque se no futuro eu esquecer, posso consultar este blog e ter a resposta XD. Estava, eu fazendo um carregamento dinâmico de uma tabela aqui na empresa, montei a tabela bonitinha e parti para o DHTML, para fazer a estrutura da tabela dinâmica, nesta tabela o carregamento se dava de acordo com a necessidade do usuário e era criado as linhas da tabela de forma que o usuário desejar sem e não colocando sempre na última posição, para essa questão simples, fui utilizar a função insertBefore, para minha surpresa isso retornava o seguinte erro:

Nó não foi encontrado

Vi, li e reli a minha tabela e não consegui encontrar o erro, a estrutura da minha tabela estava mais-ou-menos assim:


<table id="myTable">
<tbody>
<tr id="row1"><td>row1col1</td><td> row1col2</td></tr>
<tr id="row2"><td>row2col1</td><td> row2col2</td></tr>
</tbody>
</table>


e com o seguinte código tentava adicionar uma linha na tabela:

var newRow = document.createElement('tr');
var row2 = document.getElementById('row2');
var aqui = document.getElementById('myTable').insertBefore(newRow,row2);


E nada de dar certo, fui naquele-que-tudo-sabe (leia-se:Google), ainda sim não tinha encontrado uma resposta satisfatória, até que entrei em um site gringo, que tinha um código muito semelhante ao meu, só que o dele funcionava! (Mas devo confessar que nem ele mesmo sabia porque estava funcionando, pois ele disse que para resolver o problema era necessário fazer o clone de um elemento, no caso um tr, e depois fazer a inserção, essa informação não procede!) Até que descobri o meu erro, mas antes de escrever onde estava errando, gostaria de perguntar à você, se com as informções acima você consegue saber onde estava errando, gostaria que arriscasse um palpite, não custa nada, ninguém nasceu sabendo, então não leia as linhas abaixo e dê o seu palpite, depois disso volte para ver a resposta. (não vale ver a resposta antes, hein) Estou confiando na sua honestidade. rs















Que rufem os tambores! Boa Sorte! XD
O erro era que estava tentando fazer a inserção do elemento tr no elemento table e não pode ser feito dessa forma, tenho que fazer a inserção no tbody, ou seja, passei a id da table, para tbody. Uma questão simples de ser resolvida!













fuiii...

Upload no PHP

Entrei em período de férias por isso que estou meio sumido e o pan também está gastando muito do meu tempo, adoro esportes, apesar de não praticá-los muito. rs
Olá galerinha, hoje vamos ver como se faz upload de arquivos no php, é molezinha.

Arquivo HTML:

<form enctype="multipart/form-data" action="/upload.php" method="POST">
<label for = "arqUsuario">Imagem</label>
<input name="arqUsuario" type="file" />
<input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
<input type="submit" value="Send File" />
</form>


• O "tipo" do formulário tem que ser multipart/form-data, para fazer o upload lá no servidor.


• Um input do tipo file, responsavel por armazenar o endereço do arquivo na máquina do usuário, junto com ele vem um botão, que no FF o value é Browser, para procurar o arquivo, sem precisar digitar o endereço, porém não sei como mudar as características desse botão :(.


• Um input hidden com name MAX_FILE_SIZE, responsável por indicar o tamanho máximo permitido do arquivo que vai ser feito o upload.


• E é claro um submit para mandar o arquivo ao servidor e o php armazená-lo.

Agora no arquivo php:


$uploaddir = '/home/meusProjetos/upload/';
$arquivo = $_FILES['arqUsuario'];
$uploadfile = $uploaddir . basename($arquivo['name']);
if(!eregi("^image\/(pjpeg|jpeg|png|gif|bmp)$", $arquivo["type"])) {
echo "Arquivo em formato inválido! A imagem deve ser jpg, jpeg, bmp, gif
ou png. Envie outro arquivo";
} else if($arquivo["size"] > $_POST["MAX_FILE_SIZE"]) {
echo "Arquivo em tamanho muito grande! Envie outro arquivo";
} else {
if (move_uploaded_file($arquivo['tmp_name'], $uploadfile)) {
echo "Arquivo válido e o upload feito.\n";
chmod($uploadfile , 0766);
} else {
echo "Não foi possivel fazer o upload!\n";
}
}
?>


Antes de explicar, o código acima existem algumas observações a serem feitas.
Obs1: No phpconfig, tem que estar autorizado o upload de arquivos, e também, deve ser verificado o tamanho máximo de upload, que por padrão é dois megas, dependendo da sua necessidade terá que aumentá-lo.

Obs2:Quando a página php, é chamada já foi feito o upload do arquivo, porém ele está em uma pasta temporária, o php só vai ser responsável de mudar o diretório e o nome do arquivo.

• $uploaddir é responsável pelo endereço definitivo do arquivo.


• A variável $arquivo que recebe $_FILES['userfile'], possui todos os valores do arquivo


• $uploadfile terá todo o caminho do arquivo


• no primeiro if é verificado se o tipo do arquivo é diferente à uma imagem dos tipos (pjpeg|jpeg|png|gif|bmp), se for, ele não move o arquivo para uma pasta definitiva.


• A instrução move_uploaded_file é a responsável por mover o arquivo de um diretório temporário para um definitivo (Oh! não me diga).


• a instrução chmod(), irá trocar as permissões do arquivo, isso se faz necessário, para visualizar e modificar os arquivos, o 0766 lhe dá permissão de alterar e remover.

Acho que está tudo explicadinho, nos mííííííííínimos detalhes.

fuiii...

Comportamento Fora Da Estrutura

"Verdade é algo temporal e pessoal", essa é a minha versão da verdade, pois de tempos em tempos quando achamos que algo é a verdade absoluta e não tem como mudar, descobrimos que estávamos enganado a respeito disso e nos perguntando como poderiamos ser tão tolos.

Depois dessa introdução (um tanto quanto, nada haver) vamos ao que interessa, pois bem outro dia estava lendo os meus feeds quando vi esse post, lá no Refatorando Padrões. Onde o Carlos afirmava que não concordava com todas as chamadas de funções no javascript, de início achei a idéia absurda e se já não tivesse lido alguns posts dele, com certeza não iria ler o post até o fim, pois para mim, até aquele momento, fazer as chamadas de funções pelo javascript é senso comum.Logo após a leitura do post começou uma pequena discussão (diga-se de passagem, bem proveitosa), onde cada um defendeu o seu ponto de vista e no final das contas ficamos onde começamos, eu defendendo a chamada de funções pelo javascript e ele chamar a função pelo html. Como disse anteriormente, a verdade é algo relativo e cada um tem a sua versão da verdade, dentro de um limite e razões para tal. Agora tentarei defender a minha verdade. Let's Go:

Chamada da função pelo html:

<input type="button" value="botão" id="meuBotao" onclick="meuEventoAqui()" />


Chamada da função pelo Javascript:

Arquivo HTML:

<input type="button" value="botão" id="meuBotao" />


Arquivo Javascript:

window.onload () {
document.getElementById("meuBotao").onclick = function () {
meuEventoAqui(); //ou o meu código, não preciso fazer a chamada de outra função posso programar diretamente aqui.
}
}


Olhando esse pequeno trecho, talvez você esteja me achando um louco em pensar que defendo a forma de atribuir eventos pelo javascript, pois dessa forma gerou 5 linhas à mais no meu código e da forma que o Carlos defende, chamo a função diretamente no evento e pronto problema resolvido! Pois bem, vamos às razões que me levam a preferir chamar pelo javascript:

• Chamando todas as funções pelo javascript, não se mistura comportamento com estrutura.


• Para fazer a manutenção de código, vc não precisa modificar estruturalmente (html), pois está tudo no javascript e dessa forma não é necessário fazer a mudança de dois arquivos, é necessário apenas a mudança no javascript (o que é mais coerente)


• No final das contas o seu código não irá crescer tanto assim, mas as poucas linhas que geram a mais, com certeza é compensado com a facilidade da manutenabilidade (nem sei se essa palavra existe. rs)


• Você pode usar a sua estrutura (html), em várias páginas, pois como só tem a estrutura, sendo necessário apenas trocar o javascript, sem maiores problemas.


• Todos os eventos (ou a maioria deles) estarão no window.onload, portanto não é necessário ficar caçando elementos no seu html, para colocar as funções, tudo estará mais organizado para adicionar código, ou mudá-lo


• Porque eu gosto desse jeito, talvez essa seja a mais importante ;).

Bom, essas são as minhas razões à acreditar que chamando as funções pelo javascript é melhor, mas a verdade não é absoluta e cabe à você decidir isso, então o que proponho é estudar ver as diferenças entre cada forma e escolhe-la, de acordo com a sua necessidade e depois me contar qual foi a escolha e me dizer as razões. Talvez, até possa mudar de opinião.

fuiii...

Submeter com a tecla Enter no Internet Explorer

Amigos e amigas, mais uma vez aqui estou para falar de um, dos vários "bugs" do IEca, pois bem estava feliz da vida de ter resolvido algumas coisas chatas em relação ao IEca, estava tudo funfando legal, mas você sabe, alegria de pobre dura pouco, e alegria de desenvolvedor testando o seu código no IEca, dura menos ainda.

Fui submeter uma pesquisa teclando o Enter e o IEca não submetia, aliás ele submetia, mas não interpretava o que tinha que ser feito. Estranho não?! Ainda bem que para resolver esse problema é bem simples, existe um elemento html que se chama button, não estou falando do input, ele funciona de forma semelhante ao input, com muito mais opções e é a solução do meu problema.

Características:

• Aceita três tipos de botões button, submit e reset.


• Tem que abrir e fechá-lo


• Pode-se colocar uma imagem


• É imprencídivel que coloque algum texto no botão, pois é ilegal (segundo a W3C), que coloque apenas uma imagem


• Semelhante ao input coloca-se o value, para submeter os dados

Uso do elemento:

<button type="submit" name="submit" value="submit">Enviar<img src="http://www.blogger.com/icons/send.gif" alt="Enviar" /></button>


Existem outras formas de fazer essa submssão funcionar, fica a seu critério escolher uma, mas eu gosto dessa solução e vc?

Fuiii...

Acentuação no Ajax

Sabemos (ou pelo menos deveríamos saber) que o grande Boom do segundo semestre de 2006, foi Ajax todos os blogs possíveis e imagináveis abordavam o tema, era muita empolgação, todos os sites tinham que ter Ajax, em pouco tempo perguntavamos como poderíamos existir sem o tal Ajax ;), até que no final do ano com o intensivo uso de Ajax, vimos que não é as mil maravilhas. Percebemos que Ajax não é perfeito, como todas as coisas, e começaram a ter movimentos com grandes críticas ao Ajax, eu simpatizo com ele, mas como tudo na vida, na medida certa. Enfim, não estou aqui pra julgar o pobre coitado e se você quer ler mais sobre isso, na internet tem um monte de blogs que abordam o tema e no meu blogroll, que ainda vou fazer, também tem alguns que abordam. Como sempre, ou na maioria das vezes, vim apenas trazer o código.
Só fiz essa introdução, pois não tinha falado sobre isso e como todo bom anfitrião tenho que fazer as honras.

Cenário:
Nesse novo emprego, estamos implementando uma parte do site que utiliza ajax, para pesquisa em banco e como era de se imaginar esbarrei no problema de acentuação, e eu logo foi ao senhor-que-tudo-sabe (leia-se: Google), afim de uma resposta e a que mais achei foi de mudar o header da página server-side (no meu caso, php) e client-side (javascript e o HTML), para ISO-8859-1 (creio que a numeração seja essa) e vi um post muito bom lá no Elmicox (se você não conhece esse blog, não sabe o que está perdendo, ele saca muito só não passei o permalink, pois eu não salvei-o) logo fui testar, e para minha surpresa não deu certo, continuei a minha busca e nada encontrei, até que nós mesmos resolvemos a questão de uma maneira muito simples e de uma forma alternativa que achei muito legal e como disse simplérrima (isso ficou meio gay), a solucão baseia-se em substituir os caracteres acentuados, por aqueles códigos de acentuação do html e depois retornar essa troca para o javascript e os valores o html interpretar automaticamente a acentuação, vamos ao que interessa:
.
no PHP:

function html_scape($strIn) {
$arr_procura = array ('á', 'à', 'ã', 'â', 'ä', 'õ', 'ò','ó', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'ï', 'ç', 'Á', 'À', 'Ã', 'Â', 'Ä', 'Õ','Ò', 'Ó', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Ï', 'Ç');
$arr_troca = array ('á','à', 'ã', 'â', 'ä', 'õ', ' ò', 'ô', 'è', 'é', ' ê', 'ë', 'ì', 'í', 'ï','ç', 'Á','À', 'Ã', 'Â', 'Ä', 'Õ', 'Ò', 'Ô', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Ï','Ç');
return str_replace($arr_procura, $arr_troca, $strIn);
}


Pega-se por parâmetro a string que contém os caracteres que irão ser trocados. (Utilizei o retorno do sql, para o javascript).
A array $arr_procura, recebe os caracteres que vão ser procurados ( no nosso caso os acentuados).
A array $arr_troca, recebe os caracteres que vão ser trocados (no nosso caso aquele código html).
Após manda-se retornar a troca dos caracteres através da função str_replace.

Obs: Poderíamos utilizar um array bidimensional para fazer a troca, pois um array complementa o outro, mas para fins de melhor entendimento fiz duas arrays.
Como disse anteriormente, os arrays se complementam,logo você tem que manter a ordem do posicionamento dos caracteres que vão ser trocados.

Obs2: No meu caso os caracteres especias, são apenas, os acentuados, então o meu array ficou dessa forma, mas você pode alterar esse array da forma que for necessário pra ti, respeitando , é claro, o posicionamento nos dois arrays.

Update:
No outro blog o micox, fez uma observação muito interessante, no php tem uma função nativa que converte automaticamente os caracteres para o código html, dessa forma é bem mais simples de resolver o problema, a função é html_entities($string).

Comentem, please...

fuiii...

Abreviação das palavras

Hoje li um post no Revolução e etc, que chamou-me a atenção, então resolvi fazer um fast-post, existe um tal elemento abbr, que a função dele é fazer uma abreviação de uma palavra, e se passar o mouse por cima da palavra aparece uma etiqueta com o significado completo da palavra, através da propriedade title, o uso dela é bem simples:

CSS
<abbr title="Cascading Style Sheets">CSS</abbr>


Só pra variar o IEca não dá suporte a esse elemento. Como de costume, existe maneiras de transpassar por esse problema, aqui vai uma delas:



Function abbrToSpan(){
var newSourceCode;
if(isIE){
newSourceCode = document.body.innerHTML;
newSourceCode = newSourceCode.replace('<ABBR','<SPAN class="abbr">');
newSourceCode = newSourceCode.replace('</ABBR>','</SPAN>');
document.body.innerHTML = newSourceCode;
}
}

window.onload = function(){
abbrToSpan();
/* other onloads */
}

isIE = (document.all) ? true:false;


Aqui vai o link do código.

O código é bem simples, substitui as tags abbr por tags span com a classe abbr, que ela por sua vez, vai estar configurada no css (estilo).

Entendido o assunto, vou estende-me um pouco mais, existem diferenças entre abreviações, há aquelas que se fala letra por letra da abreviação (CSS, HTML, PHP etc), mas há aqueles onde formam uma palavra (Modem, ALCA, ONU etc) e para esse segundo grupo utilizamos a tag acronym o qual funciona de forma semelhante:

ONU
<acronym title="Organização das Nações Unidas">ONU</acronym>


Esse é suportado pelo IEca 6.

Conclusão:

Não há problema de utilizar o acronym em tudo, a não ser que você tenha problemas com códigos "sujos".

Referência:
Maujor

Fuiii...