jQuery Mobile - Criando elementos de formulário dinamicamente

Question

Estou criando um aplicativo da Web off-line baseado em banco de dados da Web direcionado a dispositivos iOS.Estou tentando utilizar o jQuery Mobile, mas estou com um problema na criação dos diversos formulários.

As opções do formulário são retiradas de uma consulta ao banco de dados, portanto são inseridas na página após seu carregamento, para que a "jQuery-Mobilification" não aconteça.Dando uma rápida olhada na fonte, não parece haver nenhuma maneira óbvia de abordar isso neste estágio (é claro que é uma versão alfa, e acho que essa seria uma solicitação razoavelmente comum, então estou esperançoso de que virá).Existe algum tipo de solução alternativa que eu possa implementar para fazer isso?Estou particularmente interessado em botões de opção, caixas de seleção e listas de seleção.

Answer 1

Isso é uma bagunça interna não documentada, mas o seguinte está funcionando para mim:

$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });

Existem métodos equivalentes para botões, caixas de seleção, etc.

Dê uma olhada no _enchanceControls [sic] método em http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.

Atualização para 1.0Alpha2:Como é de se esperar ao brincar com o interior de uma biblioteca, isso não funciona mais na versão mais recente.Mudando customTextInput() para textinput() corrige um pouco, mas o tema não é totalmente aplicado por algum motivo.Fomos avisados...

Answer 2

ATUALIZAR

Beta2 tem um create evento. Vou atualizar minhas perguntas frequentes quando o Beta2 for lançado. Ver http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team update-week-of-july-18th/

Perguntas frequentes atualizadas: http://jquerymobiledictionary.pl/faq.html

---

Como cafeine -lueled proposto - .page() é a maneira de fazer o JQM funcionar com qualquer parte do HTML

.page() pode ser chamado apenas uma vez para um elemento. Chame isso em um elemento de embrulho que você adiciona à página. Deve lidar com tudo.

Answer 3

A resposta atual selecionada está um pouco desatualizada. Use 'Atualizar', não 'página', para modelar o conteúdo adicionado dinamicamente (listas ou formulários).

Se você adicionar itens a um ListView, precisará chamar o método refresh () para atualizar os estilos e criar quaisquer listas aninhadas adicionadas. Por exemplo, $('ul').listview('refresh');

através do JQuery Mobile Docs, 1.0.4a

Answer 4

Após a sua chamada Ajax terminar e você insere os elementos do formulário, tente chamar:

$("#the-page-id").page();

Acredito que a equipe JQuery-Mobile adicionará um método .refresh () nos vários elementos da interface do usuário para resolver esse problema no futuro.

Answer 5

Sim, a questão é como você descreveu. A 'mobilização' é demitida quando o documento está pronto. Mas como suas consultas offline de banco de dados são assíncronas, ele termina após o documento. Portanto, o DOM é atualizado posteriormente no processo e não possui o CSS extra adicionado a todos os itens Divs e listar.

Eu acho que você teria que alterar a fonte do JS móvel para não executar no documento pronto, mas executar quando você o pedir para ser executado. Então você teria que chamar essa função no seu retorno de chamada de banco de dados.

Parece que essa é a única opção no momento.

Tradicionalmente, eu usava JQTouch e agora Sencha. Não joguei muito com o JQuery Mobile.

Como alternativa - você pode escrever seu HTML depois de consultar o banco de dados com os estilos CSS necessários. Se você usar o plug -in Firebug para o Firefox, poderá ver quais estilos / classes estão sendo aplicados quando a mobilização é executada. Você pode apenas escrever seu HTML usando essas convenções. Não é o ideal, mas funcionaria.

Answer 6

Naugtur está certo, você deve ligar para .Page () em qualquer elemento que você adicionar ao DOM, então ele funciona bem:

var el = $('<input type="text"/>')
el.page();
$('#something').append(el);

Answer 7

Isso funcionou para mim (jQueryMobile1.7.0):

$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');  
$('#name').textinput();

Atualmente, existem as chamadas funções do plug -in para todos os tipos de elementos de formulário (por exemplo, controle deslizante, textinput etc.) para criá -los.

Answer 8

Aqui está um link para os documentos para esse recurso sobre o qual Tom falou. Não tenho certeza exatamente quando eles foram adicionados, mas estou usando e funciona para mim!

http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html