ユーザーが名前を入力して検索（送信）をクリックすると、基本的に「薬」を検索する小さなアプリケーションがあります。コントローラーはデータベース内の小さな関数を呼び出し、<li></li>検索の下のより多くの要素で見つかったすべての関連データを表示します<li></li>。
<li></li>これは、検索入力フィールドと送信ボタンを含む最初のものです。
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" style="text-align:center">Search</li>
<li>
<div class="ui-grid-b">
<div class="ui-block-a"><input type="Search" id="medName" name="medName" placeholder="Medicine Name..." /></div>
<div class="ui-block-c"><input id="Submit" type="Submit" data-icon="search" data-iconpos="notext" /></div>
</div>
</li>
この下には@foreach、コントローラーを呼び出して、見つかったデータをリストビューに入力するステートメントがあります。
@foreach (//Code that connects to database in controller)ViewBag.MedicineList)
{
<li><a href="#" onclick="storeMedName(); return true;" >
<p><strong id="selectedMed">@m.DESC</strong></p>
</a>
</li>
}
</ul>
検索は完全に機能します。私の問題は、生成され<li></li>た. これは、内部で見つかった薬の名前を取得し、<strong id="selectedMed">@m.DESC</strong>それを sessionStorage に保存して、最終的にリダイレクトされる次のページに表示することになっています。
ただし、次の単純な JavaScript を使用しているにもかかわら<li></li>ず、どちらをクリックしても、最初に見つかったものしか保存されません。
function storeMedName() {
var medicine = document.getElementById('selectedMed').innerHTML;
if (window.sessionStorage) {
try {
sessionStorage.setItem('medicineName', medicine);
//To check if it got saved
document.getElementById("result").innerHTML = "You have saved " + sessionStorage.medicineName + " to the session.";
}
catch (err) {
// error code 22 QUOTA_EXCEEDED_ERR ran out of space
if (err.code == QUOTA_EXCEEDED_ERR) {
result.innerHTML = 'sessionStorage ran out of memory.';
// perform any other handling we want to here
}
}
}
else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
JS を少し変更するだけで代わりに localStorage を使用しようとしましたが、同じ問題が解決しません。インターネットで解決策を探すと、静的要素を使用する記事しか見つかりません。ばかばかしいほど簡単なものが欠けていると思いますが、この種の機能を扱うのは初めてのアプリケーションです。
このように動作する理由id="selectedMed"は、見つかったすべての薬で同じであるため、JSが最初に見つけた薬を保存する必要があるためだと最初に考えましたが、解決するのに役立つ方法について頭を働かせることはできませんこの問題。
どんなアイデアや解決策も大歓迎です！ご不明な点がございましたら、お知らせください。