13

サイドバー (ファセットはチェック ボックス) に入力があり、ページのヘッダー (メイン クエリ ボックス) に入力があるファセット検索システムを構築しています。ユーザーが検索を送信すると、これらすべての入力が同時に送信されます。

これを機能させるために考えられる唯一の方法は、ページ全体を HTML フォーム タグでラップすることです。次の疑似 html のようなもの:

<form>
  <div id='header'>
    <logo/>
    <input id='q'/>
    <!-- a bunch more stuff -->
  </div>
  <div id='sidebar'>
    <div id='sidebar-facets-subsection'>
      <input id='facet1'/>
      <input id='facet2'/>
      <input id='facet3'/>
      <!-- a bunch more stuff -->
    </div>
    <div id='sidebar-form-subsection'>
      <form id='unrelated-form'>
        <input id='unrelated-input-1'/>
        <input id='unrelated-input-2'/>
      </form>
    </div>
  </div>
  <!-- a bunch more stuff -->
</form>

これは、次の 3 つの点を除いて機能します。

  1. 上で示したように、ページで他のフォームを使用する必要があります。
  2. さまざまな django テンプレートを使用してヘッダーとサイドバーを生成し、テンプレートが相互に依存するようにします。
  3. サイドバーは実際には 3 行ではなく約 100 行あるため、これは非常に混乱しています。

私が気付いていない、または巨大な HTML フォームを作成するのが標準であるより賢い方法はありますか? このような状況では、Javascript を使用して入力エントリをより通常の形式で生成する方がよいでしょうか? それともそれが唯一の選択肢ですか？

創造的な解決策やアイデアはありますか?

4

3 に答える 3

4

アクセス性を犠牲にすることなく、Javascriptで動作させることができます

  1. すべてのチェックボックスをヘッダーに配置し、それらをdivでラップします
  2. セットアップして空にしますが、サイドバーをきれいにします
  3. Javascriptを使用して、チェックボックスをヘッダーからサイドバーに移動します
  4. イベントにコールバックを添付しform.submit、ユーザーがフォームを送信したら、イベントをキャンセルし、検索フィールドとチェックボックスからデータを取得して、AjaxPOSTリクエストとして送信します。

jQueryのようなフレームワークを使用すると、15分の作業になります。

ユーザーがJSを有効にしている場合、フォームはリクエストを投稿し、すべてが機能します。ユーザーがJavaScriptを有効にしていない場合、チェックボックスはヘッダーに表示されるため、少しエレガントではないデザインの価格で機能します。

しかし、Javascriptを無効にしている人は変更を設計するために使用されるので、問題ありません。

于 2011-11-26T10:43:11.537 に答える
1

次の 2 つのオプションがあると思います。

1.) ページ全体のフォーム要素。すべての「送信」ボタンは同じフォームに送信され、サーバー側スクリプトはすべての入力された要素のフォームを処理します。ページ全体では、私は文字通りではありません...関連する入力はすべて同じフォームタグにあります。他のフォームは、他のフォーム タグに配置されます。

2.) 複数のフォーム。送信前に非表示のフォーム フィールドに他のフォームのデータを入力するクライアント側スクリプトを使用します。

1 はより多くの作業が必要ですが、2 はすべての訪問者に対して機能するとは限りません。

フォーム コンテナが 1 つあるからといって、必ずしもすべてをまとめてユーザーに表示する必要はないという事実を考慮してください。入力を div にカプセル化し、必要に応じて配置します。簡単ではないかもしれませんが、確実に可能です。

于 2011-11-22T23:54:48.327 に答える