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

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/

Show de lista de componentes Jquery, vale a visita !

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

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

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>’);

var DEBUG_ENABLED = true;

function debug( text ){

  if( DEBUG_ENABLED ) {

     $(‘#debug’).append( text + ‘<br/>’);  

   }

}

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 !!!

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.

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 …

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 … =)