うまく機能している既存のjQueryMobileサイトがあります。ここで、HTMLフォームの1つを変更して、AJAXを使用して、PHPスクリプトを介して取得されるコンテンツでページを更新する必要があります。
私は過去にjQueryMobile以外のサイトでこれを行っており、通常はヘッドセクションにJavascriptを追加し、この属性をフォーム要素(この特定の場合は入力テキストフィールド)に追加します。
onchange="updateFormContent(this.value)"
実際のスクリプトは次のようになります。
function updateFormContent(str)
{
if (str=="")
{
document.getElementById("Name").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Name").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","nameSearch.php?name="+str,true);
xmlhttp.send();
}
jQueryMobileサイトのHTMLフォームで同じことをしようとしていますが、行き詰まります。これが私のHTMLフォームの簡単な例です:
ユーザーが[名前]フィールドに何かを入力すると、 "nameSearch.php?name =" phpページがトリガーされ、データベースで一致する名前が検索され、同じページに結果が表示され、その過程でDIVが更新されます。
私を正しい方向に向けるためのヒントや、同様のことを行うjQueryMobileフォームページの実際の例に感謝します。