jquery eh seu amigo

On September 23, 2008, in programacao, by athanazio
0

se vc programa em javascript saiba que sua vida pode mudar um bocado se resolver usar jquery … o perigo eh o vício … vicia facim facim !

imagina soh … vc tem que selecionar um elemento criado na tela e trocar o conteudo dele … digamos que eh um SPAN com o id = meu_numero_magico

usando o jquery seria algo do tipo:

$(‘#meu_numero_magico’).html(’45′);

eita que legal !! arre podia ser melhor ainda, imagina que o conteúdo do tal do span, tem de vir de uma url lah no servidor, eita vamos fazer codigos magicos que verificam isto e aquilo … não !

$(‘#meu_numero_magico’).load(‘meuaquivo.txt’);

que prático naum ?! mas o que mais gosto eh a parte de injetar código e comportamento em elementos jah existentes, vamos imaginar que queremos mostar alguma informacao quando clicarmos no nosso numero magico … veja soh que prático:

$(‘#meu_numero_magico’).click(function(){

alert( $(this).html() );
});

Estas são algumas preciosidades do jquery, e lembre-se ele eh seu amigo !!!

Tagged with: • • •
 

jquery – table in table

On September 2, 2008, in programacao, by athanazio
0

Playing with Jquery, I need to add and table inside another existing table, and after some fight with the code, I realized that the “trick” would be add the content of the remote table, inside a TD.

So here are the steps :

1. make the TD hidden, because we don’t want an empty TD taking space in the table. use style=”display: none;” in the TD definition.

2. create an external file that will be inserted in the TD, I called it mytable.html.

3. identify the TD so we can manipulate it by it’s ID, for example something like : id=”data_item”

4. add the links to insert the data in the TD

<a href=”javascript:addData();”>show</a>
<a href=”javascript:hideData();”>hide</a>

errrr, why to first make the call and then create the code itself ? I don’t know :) you can change the other if this bugs your brain… hehehe.

5. create the code to load the data and hide it.

<script>
function addData(){
$(‘#data_item’).load(‘mytable.html’);
$(‘#data_item’).show();
}

function hideData(){
$(‘#data_item’).hide();
}
</script>

6. dont forget to include the jquery library in your page:

<script src=”jquery-1.2.6.js”></script>

Now that you followed the steps and didn’t work, lets go step by step in the jquery code :)

this snipet of code $(‘#data_item’) selects the elements that have the id=data_item, to selec elements by the class would be something like $(‘.data_item’) but in this case we want to deal with only one item, that has the ID=data_item, so we use the # in the string selector.

the function load() is used to make a remote call to an URL and load, as the name says, the content of the URL in the selected element, it could be a DIV, a SPAN, All the content of a table, but in this case we are loading in a TD.

Ok, you followed the steps, read the step by step, and still not working …go ahead and grab the SOURCE, for your convenience the jquery version that I used is inside the sample.

be happy.

Tagged with: • • • •