0

Ajax/PHP を介して MySQL データベースと対話することになっている jQuery Mobile を使用して複数ページのポーリングを作成しようとしていますが、しばらくの間問題が発生しています。フォームを複数のページに分割した結果、フォームの送信に問題があるようです。私が必要とする 1 つの要件は、ページがページをリロードできないことです。

最初の試みでは、ページを次のように分割しようとしました。

<div id="page1" data-role="page">

ただし、これは、どのようにコーディングしようとしても、何度も失敗しました。送信ボタンが機能しません。フォームをいくつかの div "ページ" に分割したことが原因である可能性があります。また、「次、次、次...送信」ではなく、次/送信ボタンを作成して、一時データをセッションに保存できるようにしましたが、失敗しました。

戦略全体を、アクティブでない質問 div を非表示にするコードに作り直しました。つまり、ページに設定されたデータ ロールを持つ 1 つの div があり、その中に次のボタンでフォームをクリックすることで非表示/表示されるコンテンツのデータ ロールを持ついくつかの div があります。このようにして、フォーム全体を送信し、いくつかの PHP コードで完全に印刷される小さなサンプル フォームを作成することができました。ただし、このバージョンの検証にはまだ成功していません。スクリプトで最後のページを検証することしかできませんが、それでもすべてのチェックボックスをオンにする必要がありますが、これは無意味です。このバージョンを実際のプロジェクトに実装しようとしたとき、それを .php スクリプトにまったく送信できませんでしたが、それは単に構文エラーである可能性があり、探し続けます。

それで、誰かが似たようなことをしましたか？この問題を解決するための潜在的な他の戦略を探しています。または、前述の試みが失敗した理由について誰かが理論を持っている可能性があります。jQuery Mobile 内で Ajax フォームの送信を行うのは難しいようですか?

また、誰かがこれに欠陥を見つけることができる場合に備えて、提出に使用するこのコードを添付しました。これを関数にする簡単な方法はありますか? それともそれは無意味ですか？

$(document).ready(function()
    {
            $("#submit").click(function() 
            {
                var data_string = $('#form').serialize();
                $.ajax(
                {
                    type:'POST',
                    url:'add.php',
                    data:data_string,
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });         
            })
    });

また、window.onload 中にこの関数を使用して、長い .php スクリプトでポーリングを生成します。基本的に、それは質問を次のように生成します。他のすべての質問の種類には name="answers[question_id]" しかありません。

function getQuestions(id)
        {
            var xmlhttp = getHttpRequestObj();
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById(id).innerHTML=xmlhttp.responseText;
                }
              }
            xmlhttp.open("GET","poll2.php",true);
            xmlhttp.send();
        }

フォームは次のようになります。

<form id="form">
  <div data-role="content" id="form'.$page.'" class="section">
    <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="'.$question_id.'">
      <input type="checkbox" name="answers['.$question_id.']['.$alt_id.']" id="'.$question_id.'_'.$alt_id.'" value="'.$alt_id.'"/>
        <label for="'.$question_id.'_'.$alt_id.'">'.$alt_desc.'</label>
    </fieldset>
    <input type="button" name="next" value="Next" id="next" onClick="toggleVisibility(\'form'.($page+1).'\')" class="next-btn"/>
  </div>

最後のページには、次のボタンの代わりに次のコードがあります。

</div><input type="button" id="submit" value="Submit" class="submit-btn"/></form>
4

1 に答える 1

1

私の意見では、他のオプションを非表示にして 1 つずつ開く方が良い方法です (マルチ ステップ フォームとも呼ばれます)。

検証のために、javascript を使用してクライアント側で実行するか、適切なイベントでトリガーされ (検証のために送信する必要はありません)、サーバー側で検証する ajax を使用できます。

あなたは正しい軌道に乗っています。ここで目にする問題は、検証を行う方法ですが、それはフォームの構造によって異なります。

于 2012-07-16T07:00:17.857 に答える