web-dev-qa-db-ja.com

jQueryMobile-フォーム要素を動的に作成する

IOSデバイスを対象としたWebデータベース駆動のオフラインWebアプリを作成しています。 jQuery Mobileを使おうとしていますが、さまざまなフォームの作成に問題があります。

フォームオプションはデータベースクエリから取得されるため、ページが読み込まれた後にページに挿入されるため、「jQuery-Mobilification」は発生しません。ソースをざっと見てみると、この段階でこれを呼び出す明確な方法はないようです（もちろん、これはアルファリリースであり、これはかなり一般的な要求だと思うので、私はそれを期待しています来る）。これを行うために実行できる回避策はありますか？特にラジオボタン、チェックボックス、選択リストに興味があります。

javascriptjqueryjquery-mobile
16
Jon

これは文書化されていない内部で混乱していますが、以下が私のために働いています：

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

ボタン、チェックボックスなどには同等の方法があります。

http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js の__enchanceControlscustomTextInput()をtextinput()に変更すると少し修正されますが、何らかの理由でテーマが完全に適用されていません。警告されました...

2
Tom

[〜＃〜]更新[〜＃〜]

Beta2にはcreateイベントがあります。 beta2がリリースされたら、よくある質問を更新します。 http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/ を参照してください

更新されたFAQ： http://jquerymobiledictionary.pl/faq.html

CaffeineFueledが提案したように-.page()は、JQMをHTMLの任意の部分で機能させる方法です。

.page()は、要素に対して1回だけ呼び出すことができます。ページに追加するラッピング要素で呼び出します。それはすべてを処理する必要があります。

12
naugtur

現在選択されている回答は少し古くなっています。動的に追加されたコンテンツ（リストまたはフォーム）のスタイルを設定するには、「ページ」ではなく「更新」を使用します。

リストビューにアイテムを追加する場合は、リストビューでrefresh（）メソッドを呼び出してスタイルを更新し、追加されるネストされたリストを作成する必要があります。たとえば、$('ul').listview('refresh');

jQuery Mobile docs、1.0.4a 経由

3
AlexeyMK

AJAX呼び出しが終了し、フォーム要素を挿入した後、呼び出してみてください：

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

Jquery-mobileチームは、将来この問題を解決するために、さまざまなUI要素に.refresh（）メソッドを追加すると思います。

2
Josh Rickard

これは私のために働いた（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();

現在、あらゆる種類のフォーム要素（スライダー、テキスト入力など）を作成するためのいわゆるプラグイン関数があります。

1
CBG

ええ、問題はあなたが説明した通りです。 「動員」は、ドキュメントの準備ができたときに発生します。ただし、オフラインDBクエリは非同期であるため、document.readyが起動された後に終了します。そのため、DOMはプロセスの後半で更新され、すべてのdivとリストアイテムに追加のCSSが追加されることはありません。

モバイルjsのソースを変更して、ドキュメント対応で実行せず、実行するように指示したときに実行する必要があると思います。次に、データベースのコールバックでその関数を呼び出す必要があります。

現時点では、それが唯一の選択肢のようです。

伝統的に私はjqtouchを使用し、現在は煎茶を使用していました。私はjQuerymobileであまり遊んだことがありません。

代わりに-必要なCSSスタイルを使用してデータベースからHTMLをクエリした後、HTMLを書き出すことができます。 Firefox用のFirebugプラグインを使用すると、モビリゼーションの実行時にどのスタイル/クラスが適用されるかを確認できます。これらの規則を使用してHTMLを書き出すことができます。理想的ではありませんが、機能します。

1
Ryan Doom

naugturは正しいです。domに追加する要素に対して.page（）を呼び出す必要があります。そうすれば、うまく機能します。

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

トムが話したこの機能のドキュメントへのリンクは次のとおりです。それらがいつ追加されたかは正確にはわかりませんが、私はそれを使用していて、それは私のために働きます！

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

0
Spike