Jump to content
XicoXperto

[jQuery]Esperar pelo Ajax

Recommended Posts

XicoXperto

Boas malta!

A situação com a qual me deparo neste momento é:

Necessito de fazer a cópia de um form para usar o antigo como backup para isso faço:

- crio o novo formulário

- leio o total de elementos necessários (os forms podem ter vários contactos, documentos, etc..)

- faço a criação do total de elementos necessários (aqui é que está o problema)

- copio os valores.

Como disse é na parte de criação dos elementos que tenho o problema, isto porque, dependendo da abordagem que experimentei tive alguns problemas como copiar sempre para o mesmo elemento, tentar copiar para um elemento que ainda não existe, e coisas assim.

Então a ultima ideia que tive foi verificar se o elemento a ser copiado tem disponivel o elemento de destino, no entanto, a abordagem que fiz (parece-me que) enquanto está no while não faz a parte do ajax, então não sai do while.

Alguma ideia?

aqui está a função que estou a usar no momento

function copyElementsToNewForm ( name , container  , button ) {

// get the total of elements to be copied
var total = $( "#" + name + "-backup " + container ).size();
// get the actual available elements
var actual= $( "#" + name + " " + container ).size();
// get the value of the element counting
var actualNumber = $( "#" + name + " #" + name + "-hiddenContacto").val();

// while there aren't enough elements create new ones
while ( total > actual ) {
 // re-read values
 actualNumber = $( "#" + name + " #" + name + "-hiddenContacto").val();
 actual= $( "#" + name + " " + container ).size();

 // if the number on hidden value is equal to the real number of elements make a new click
 if ( actualNumber == actual )
  $( "#" + name + ' #' + button ).click();
}
}

Infelizmente já ando a tentar dar a volta a esta função à 3 dias, ficaria muito agradecido se alguém me pude-se dizer o que estou a fazer de errado, ou me orientar numa outra solução.

Qualquer ideia, teste ou opinião é bem vinda!

Obrigado malta

Share this post


Link to post
Share on other sites
HappyHippyHippo

podes explicar melhor esta parte

Necessito de fazer a cópia de um form para usar o antigo como backup para isso faço

isso parece ser uma solução demasiado rebuscada para ser viável


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

isto é o seguinte, preciso fazer edição de um formulário, e que quando o utilizador "cancelar" as alterações, necessito de ter os dados guardados, para isso pensei sem fazer ".clone()" do formulário, no entanto devido a estar a usar jqTransform, e outros plugins, nunca consegui por a funcionar decentemente.

Então pensei em deixar o antigo hidden (como já fazia na abordagem anterior) e criar um form de raiz.

A ideia é mesmo ter um formulário extra para edição dos dados (preciso de ter backup para o caso do utilizador não querer guardar as alterações).

Está esquesito, mas deu para entender'?

Share this post


Link to post
Share on other sites
HappyHippyHippo

porque não adicionas uma classe tipo "form_item_added" a todos os elementos adicionados e depois é só remover todos os elementos com essa classe ?


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

No proprio form?

Se for no próprio form como faço no caso de escreverem por cima dos dados antigos, ou eliminarem elementos?

Share this post


Link to post
Share on other sites
HappyHippyHippo

solução ainda mais simples :

load do formulário por ajax, sempre que carregares no botão reset/cancel, é só fazer novo pedido ...


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

solução ainda mais simples :

load do formulário por ajax, sempre que carregares no botão reset/cancel, é só fazer novo pedido ...

Não entendi

Share this post


Link to post
Share on other sites
HappyHippyHippo

visto usares jqTransform terás a fazer include do jQuery ...

exemplo (Nao testado e muito minimalista para exemplo) :

// ajax_formulario.php
<input name="campo1" />
<input name="campo2" />

// formulario.php
<!DOCTYPE html>
<html>
 <head>
   <script type="text/javascript">
     function loadForm() { $('#form').load('ajax_formulario'); }
     $(document).ready(function () { loadForm(); }
   </script>
 </head>
 <body>
   <form id="form">
   </form>
   <input type="button" onclick="loadForm();" value="reset" />
 </body>
</html>

Edited by HappyHippyHippo

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

Sim sim, essa é a minha ultima ideia, sempre que for para ser editado, crio um novo formulário e copio para lá os valores que estão no backup.

- crio o novo formulário

- leio o total de elementos necessários (os forms podem ter vários contactos, documentos, etc..)

- faço a criação do total de elementos necessários (aqui é que está o problema)

- copio os valores.

O novo formulário vai ser o que o utilizador vai alterar, mas como tinha dito o problema é que o formulário é pedido por ajax, e depois cada bloco de elementos também é chamado por Ajax (por exemplo todos os elementos relativos a um emprego são 1 bloco).

E o problema é que não sei como fazer para sincronizar a criação por Ajax, e só depois copiar os elementos relativos ao novo bloco.

Como tinha referido a minha utlima ideia foi, antes de copiar o que seja, fazer a criação de todos os blocos de elementos necessários.

Mas quando faço o "while" penso que ele não deixa executar mais nada até sair do "while":

while ( total > actual ) {
 // re-read values
 actualNumber = $( "#" + name + " #" + name + "-hiddenContacto").val();
 actual= $( "#" + name + " " + container ).size();
 // if the number on hidden value is equal to the real number of elements make a new click
 if ( actualNumber == actual )
  $( "#" + name + ' #' + button ).click();
}

Share this post


Link to post
Share on other sites
HappyHippyHippo

mas que backup qual carapuça !!!

eu estou a dizer para teres um script que te cria o HTML do formulário dependente da informação que tens na tua camada de persistência (Base de dados ou outra), depois quando fazes reset é só chamar o script novamente.


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

while ( total > actual ) {
 // re-read values
 actualNumber = $( "#" + name + " #" + name + "-hiddenContacto").val();
 actual= $( "#" + name + " " + container ).size();
 // if the number on hidden value is equal to the real number of elements make a new click
 if ( actualNumber == actual )
  $( "#" + name + ' #' + button ).click();
}

Explicação deste código

variaveis:

- actual -> variavel com o total de blocos existentes no momento (novo form)

- total -> variavel com o total de blocos necessários (total de existentes no form de backup)

- actualNumber -> variavel com o total de pedidos (ajax), este valor é posto num input escondido para saber o numero de "clicks"

a ideia é enquanto o ajax não ficar na pagina, ele fica dentro do while até que o bloco apareça no form

já estou a entender, vou exprimentar

Share this post


Link to post
Share on other sites
HappyHippyHippo

ainda bem que percebeste porque sinceramente eu não percebi patavina que andas prai a dizer ...


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

Parece que não consigo passar a minha ideia :(

Vou tentar explicar o que pretendo para o utilizador, isto é:

- o utilizador abre o formulário principal para criar uma familia

- depois clica para criar uma nova pessoa, e abre um novo formulário especifico para pessoas

- quando clicar em "adicionar" nada é gravado neste momento apenas aparece no formulário familia um pequeno resumo (e 2 botões para poder apagar ou editar o formulário da pessoa que acabou de adicionar)

- sendo assim quando clicar em "editar", volta a abrir o formulário da pessoa que o utilizador tinha "adicionado"

- o utilizador assim pode modificar, adicionar ou até remover os dados que tinha posto anteriormente

- sendo que depois pode "adicionar" (alterar) ou cancelar (não efectuar nenhuma alteração)

O problema é que se o utilizador, por exemplo se enganar a passar os dados e pretender não fazer nenhuma alteração como faço para poder ter os dados salvaguardados?

(todos os dados são adicionados no lado do cliente, e do lado do servidor apenas crio por ajax o formulário vazio)

Consegui explicar?

Share this post


Link to post
Share on other sites
HappyHippyHippo

não fazes nada ... tu próprio o disseste :

(todos os dados são adicionados no lado do cliente, e do lado do servidor apenas crio por ajax o formulário vazio)


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

não fazes nada ... tu próprio o disseste :

Ainda não entendi onde queres chegar, mas pronto.

Share this post


Link to post
Share on other sites
HappyHippyHippo

o formulário só existe no browser do lado do cliente, se não é para gravar porque não quer, não necessitas de fazer nada


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

o formulário só existe no browser do lado do cliente, se não é para gravar porque não quer, não necessitas de fazer nada

e esta é a imagem do formulário familia já com 2 pessoas inseridas:

screenshot20120716at930.th.png

esta é a imagem do formulário para pessoas:

screenshot20120716at929.th.png

Como se pode ver na parte do formulário familia, as pessoas que estão "inseridas" tem 2 botões, na realidade os formulários respectivos apenas estão "hidden" sendo que neste formulário só aparece um resumo de cada pessoa e 2 botões para gerir, 1 para apagar e outro para editar.

A questão está na parte de edição das pessoas que já foram "adicionadas" à familia.

Espero que isto ajude...

Share this post


Link to post
Share on other sites
XicoXperto

Neste momento estou a tentar uma abordagem diferente.

quando acabar digo se fui bem sucedido

Share this post


Link to post
Share on other sites
HappyHippyHippo
$.post(url, function() { /* ações a executar depois da resposta de sucesso do AJAX */ });


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

Eu já tenho as funções que vão executar o $.post() feitas, e não pretendia altera-las ( a não ser que seja estritamente necessário ), o que precisava, era da uma maneira de saber se essas funções já tinham acabado.

Peço desculpa por todas estas voltas, mas realmente não tenho outra ideia...

Tentei por a função $.when() , porque parece-me ser exactamente o que eu preciso, mas ainda não fui bem sucedido.

Share this post


Link to post
Share on other sites
HappyHippyHippo

já te deram outras ideias, e bem mais simples ... tu é que as ignoraste ... até porque não foi o único dizer que andas a dar voltas sem sentido.

se ainda mão foste bem sucedido com o $.when continua a ler a documentação lá tens um bom exemplo de como funciona


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
XicoXperto

Pronto, vou deixar aqui como consegui efectuar a espera do Ajax para os proximos que tenham duvidas.

Então é o seguinte, como tinha referido antes a função a usar é:

jQuery.when( deferreds )

Mas para poder usar esta função de forma eficiente, é necessário entender o que são e como funcionam os objectos Deferred ( e num caso mais especifico os objectos Promise )

E andei a ler bastante, não foi facil para mim entender, até que encontrei uma explicação bem detalhada em:

http://net.tutsplus.com/tutorials/javascript-ajax/wrangle-async-tasks-with-jquery-promises/

Isto explica bem e tem exemplos práticos para todo o tipo de abordagem, também tem desde a aplicação simples, para uma aplicação mais complexa.

Pronto, posto isto o que eu tive que fazer para por a funcionar foi:

- as funções que usava com "$.post()" (também funciona com "$.ajax()") tive que devolver (return) do $.post()

exemplo:

function addFormPerson ( wrapperID , newPersonID  ) {
var formID = 'person' + newPersonID;
return $.post(
  'php/form.person.action.php' ,
  { action : 'newForm' , id : newPersonID } ,
  function ( output ) {
 //  todas os metodos especificos para o meu caso
 });
} // addFormPerson ( id )

- e a função que recebe terá de ser algo do genero:

$.when( addFormPerson ( "id" , 1  ) ).done( funcaoASerExecutadaApos() );

- no meu caso, precisei que uma função fosse executada várias vezes, mas só poderia ser executada uma nova vez após a anterior ter acabado, então cheguei a:

function selfCallerWithWaitOnReady ( func , total ) {

 // test if its over or not
 if ( total == 0 ) return true;
 // execute first and wait to execute next

 $.when.apply( func( total ) ).done ( function () {
	selfCallerWithWaitOnReady ( func , total-1 );
 });
} // selfCallerWithWaitOnReady ( func , total )

para chamar a função a cima, fiz:

var func = (function ( x ) {
 addContact ( "id" , 0 , 4-x );
 });
$.when(
addFormPerson ( "div.popupForm", 0 ) ).done(
	 selfCallerWithWaitOnReady ( func , 4 )
);
// há que reparar que na variavel entro com "4-x" e quando chamo a função entro com "4"
// para que na função addContact a numeração seja 0, 1, 2 ,3

Quero agradecer ao HappyHippyHippo pela a ajuda, por algum motivo não consegui entender quais foram as ideias proporcionadas, tirando a do script que era carregado já com os dados, q para o que pretendia não dava, em relação às outras ideias, não entendi.

Obrigado.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.