flexigrid – web 2.0 jquery grid

On April 21, 2009, in trecos, by athanazio
0

flexigrid
maneiro este grid usando jquery ! http://flexigrid.info/

Tagged with:
 

popular um combo com jquery

On November 10, 2008, in programacao, by athanazio
0

Bem simpático o tutorial de como encher um combo com o jquery.
a idéia é basicamente fazer uma chamada POST a um site com os dados, e colocar estes dados como conteúdo html do combo criado anteriormente.

acho que seria legal se os dados retornados fossem no formato JSON, assim a montagem do html, ou seja criar os options, seria responsabilidade da interface não do server. segue o link do tutorial do rafael cunha.

http://www.rafaelcunha.com/2007/05/10/populando-combobox-com-jquery-ajax/

Tagged with:
 

lista de componentes jquery

On October 29, 2008, in programacao, by athanazio
0

Show de lista de componentes Jquery, vale a visita !

http://devkick.com/blog/useful-jquery-a-compilation-of-jquery-utilities/

Tagged with:
 

jquery espirito de clique

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

arre estou trabalhando numa atividade que a cada 10 segundos atualiza partes de uma tela usando jquery, buscando dados no formato json vindo do servidor, o pequeno elemento de tela eh cheio de regras, tem partes que aparecem e são ocultas num clique … coisas assim tipo árvore que faz collapse e expand… mas misteriosamente quando a janela era atualizada, acontecia uma mágica da telinha ficar abrindo e fechando várias vezes ,,,  tipo poltergeist mesmo !! assombracação total … mas como não tenho a menor afeição por assombrações, investiguei.

Na primeira investida, fiz uma mudança que foi a geração da tabela em si que mostra os dados, separei em duas fases :

  • fase 1 monta o html da tabela onde os dados vao ficar
  • fase 2 atualiza soh a parte interna da tabela onde vai ocorrer a atualização

isto ficou legal, porque o erro mudou, ao invés de piscar abria e fechava várias vezes tão rapido, que nem se mexia, consegui constatar isto usando o mecanismo de debug que tinha falado anteriormente, e vi várias chamadas uma atrás da outra.

Bem refletindo sobre isto identifique finalmente o problema ! ufa ! ao atualizar a tabela estava chamando o trecho de código que fazia bind do clickpara mostrar/esconder, ou seja para cada atualização adicionava um novo tratador de eventos para o click, ou seja cada vez que clicava fazia um monte de vezes o clique eheehehe.

anexo um exemplo do uso do clique para alternar a exibição de um trecho.

expand.html

Note que o trecho que faz a “magica” esta totalmente desconectado do html em si …

$(document).ready( function(){

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

if( $(this).html() == ‘[+]‘ ){
$(‘#data’).show();
$(this).html(‘[-]‘);
}else {
$(‘#data’).hide();
$(this).html(‘[+]‘);
}
});
$(‘#change’).css(‘cursor’, ‘pointer’ );

});

Ou seja este trecho insere o comportamento de clique no elemento com id=change, e somente insere este comportamento do clique quando o documento esta carregado. e ao clicar verifica o conteudo do html se for [+] mostra a área ocula, e troca o texto senão oculta novamente e torna a trocar o texto para [+].

Lição aprendida ! cuidado ao atribuir event handlers, porque se adicionar dentro de um loop vai arrumar váaaarias execuções hehehe :D

Tagged with:
 

debugando com jquery

On September 24, 2008, in programacao, by athanazio
1

normalmente debugar codigo com javascript eh sinonimo de alert() ou de usar algum javascript debugger, ou algo que o valha, mas com jquery tem umas alternativas interessantes…

por exemplo adicionar uma div para debug e jogar texto dentro dela … que tal ?

$(‘body’).before(‘<div id=”debug” >debug box</div>’);

assim injetamos uma div com id debug no comeco do documento, e basta por exemplo criar uma funcao debug, para mostrar as mensagens e por lah ligar ou desligar o debug … algo assim :
var DEBUG_ENABLED = true;
function debug( text ){
  if( DEBUG_ENABLED ) {
     $(‘#debug’).append( text + ‘<br/>’);  
   }
}
legal neh ?
Tagged with:
 

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:
 

jquery draw and charting

On December 4, 2007, in programacao, by athanazio
0

oh well, after some exploration found this jquery plugin to draw over svg files
and this other one to make some charts

I believe that using the first one anything can be done =)

let’s see what one weekend can make … :)

Tagged with:
 

handling errors on Jquery/Json request

On December 4, 2007, in programacao, by athanazio
0

I’m using Jquery, and I’m very happy with that !

for a project where are reading some data using Json format, but in the Json call I was missing how to handle possible errors, this is the fragment of jquery code that I’m using to read the json data

    $(“#message”).html(“searching”);

var criteria = $(“#criteria”).val();
var index = $(“#index”).val();
var limit = $(“#limit”).val();
var url = “search.html?index=” + index + “&criteria=” + criteria + “&limit=” + limit;

$.getJSON(url,
function(data){
$(“#message”).html( data.length + ” records found”);
var html = eval( index + “Result(data)”);
$(“#result tbody”).html(html);
});

and this finally is the code that I’m using to handle the errors

$(“#message”).ajaxError( function(event, request, settings){
$(this).append(“<b>Error requesting page ” + settings.url + “</b>” );
$(this).append(“<br/>” );
$(this).append(“error details<br/>” );

jQuery.each(settings, function(i,val) {
$(this).append(i + ‘=’ + this + “<br/>”);
});
}
);

of course could be more nice like hidden details, and press something to show the details, but this is another post … =)

Tagged with: