jQuery の非同期処理がうまくきません

Question

前提

jQuery で、Idが1つ以上ある場合はダイアログを表示させ、複数あるIdの中から一つを選択させてから次の処理を実行するというものを作成しています。
ただ現状のコードだとダイアログの表示がすべての処理が終わってから表示され、うまくいかない状況です。

実現したいこと

• [ 1 ] IDを取得
• [ 2 ] IDが複数ある場合は、ダイアログを表示させて一つのIDを選択させる
• [ 3 ] 取得したIDを使用した処理を行う

以上

発生している問題・エラーメッセージ

ダイアログが表示される前に処理が終わってしまう。

該当のソースコード

function searchItem(){
      mobileAjaxCommon(true,
          {
              url: '/demo/SearchId',
              data: data
          },
          function (data) {
　　　　　　　$.when(
　　　　　　　　　　　　data.IdCnt > 1 ? showSelectDialog($("#Code").val(), { resultId: data.Id }) : console.log(""))
　　　　　　　.done(function () {
　　　　　　　　　　　　$("#Id").val(data.Id);
　　　　　　　})
        },
        function (data) {
                   //エラー処理
       }
     );
}


function showSelectDialog(searcheData,targetObj){
//ダイアログ自体の表示はできているので内部処理は省略
//ダイアログが閉じられた段階で選択されたIDを返す
}

試したこと

jQueryやJavaScriptでの他の処理方法の検討しています。
※Promiseの使用も検討しましたが、require()を使用するのに必要なNode.jsを使用することができないため、when().done()を使用しています。

Comments

[Lhankor_Mhy]

showSelectDialog は何を返すのか教えてください。

[Lhankor_Mhy]

ご提示のコードはかっこが整合しないようです。
ネストが多いためこちらで判断するのも難しいので、正しい文法になるように書きなおしていただけますか？

[yambejp]

「Idが1つ以上ある場合はダイアログを表示させ、複数あるIdの中から一つを選択させてから次の処理を実行する」の意味が伝わってきません。
そもそもIdがあるとはどういう状態をさしているのでしょうか？

それとダイアログで選択させるということはなにかトリガーが必要ですよね？
なにをしたとき、どういう状態ならどういう仕組みでどうしたいのか
もう少しきちんと順序だてて説明したほうがいいと思います

[Ryuakira]

Lhankor_Mhy様
失礼いたしました、言葉足らずが過ぎました。
showSelectDialogが返す値に関してですが、検索処理を行った結果、data.IdCntの値が1以上であった際、("#Code").val()に紐づくデータをダイアログに表示させ、ユーザーが処理を行いたいデータを選択することで選択したデータのIDが返ってくるようになっております。

[Ryuakira]

yambejp様
ご指摘ありがとうございます。
内容を省きすぎており、内容がわからなくなってしまっていました。
質問の書きなおしさせていただきます。

[Lhankor_Mhy]

3つほど、補足願います。

・「ダイアログ」とは具体的にはなんですか？
・「データのID」とは文字列ですか？　Deferred ではなくて、それ自身が戻り値ということでいいのですね？
・いまのところ、「非同期処理」が登場していませんが、その部分についてもう少し説明してください。

[Lhankor_Mhy]

質問が編集されていたのですね。タイトルの「非同期処理」とは mobileAjaxCommon だと理解していいですか？

つまり、「ダイアログ」は「非同期処理」ではないということでいいのか、ということが一連の質問で確認したかったことです。

[int32_t]

showSelectDialog() の実装の詳細がわからないと的確な回答は難しいと思います。

Answer 1

jQueryのDeferredを今更使うくらいなら、async await Promise を使うべきだと思います。require()もNode.jsも不要です。

詳細がわかりませんが、たとえば「data.IdCnt にidの数が入っている」「data.Id に id 文字列1つか文字列のリストが入っている」とすると、以下のように showSelectDialog() を async 関数にして、選んだ値を返すようにすると await showSelectDialog() で素直に値を取れるようになります。

<dialog>
<form method="dialog">
<select id="list" size=4 required></select>
<button type=submit>決定</button>
</form>
</dialog>
<script>

... mobileAjaxCommon(..., async function(data) {
  let id = data.Id;
  if (data.IdCnt > 1)
    id = await showSelectDialog(data.Id);
  // 'id' を処理
  alert(id);
})

...

async function showSelectDialog(idList) {
  let list = document.querySelector('#list');
  list.textContent = '';
  for (let v of idList) {
    list.appendChild(new Option(v));
  }
  let d = document.querySelector('dialog');
  d.showModal();
  await new Promise(resolve => d.addEventListener('close', resolve, {once:true}));
  return list.value;
}

Comments

[Ryuakira]

ご教授いただきありがとうございます。
async、await、Promiseの件、require()を使ったやり方しか把握できておりませんでした…
まだ解決できておりませんが、ないただきありがとうございます。
async、await、Promiseの件、require()を使ったやり方しか把握できておりませんでした…
まだ解決までは至っておりませんが、ご教授いただいた内容をベースに組みなおしてみます！

Answer 2

おそらく全く命題と違うとは思いますが、idを選ばせるdialogのサンプルです

<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('[data-id]') && /^\[.*\]$/.test(t.dataset.id)){
    let html="";
    JSON.parse(t.dataset.id).forEach(x=>{
      html+=`<label><input type="radio" name="n" value="${x}">${x}</label>`
    })
      html+=`<br>\n`;
      html+=`<input type="button" value="キャンセル" onclick="dlg.close()">`;
      html+=`<br>\n`;
      html+=`<input type="button" value="決定" onclick="dlg.returnValue=document.querySelector('[name=n]:checked')?.value||'';dlg.close()">`;
      dlg.innerHTML=html;
    
    dlg.showModal();
    dlg.onclose=()=>{
      if(dlg.returnValue){
        t.textContent=dlg.returnValue;
      }
    };
  }
});
</script>
<dialog id="dlg"></dialog>
<span data-id="[1,2,3]">-</span>
<span data-id="[4,5,6]">-</span>
<span>7</span>

Comments

[yambejp]

わざわざモーダルを開かなくてもセレクトボックスで選択させればいいだけですよね・・・

[Ryuakira]

ダイアログのサンプルまで作っていただきありがとうございます。
参考にさせていただきます！
要望の都合上、画面上にセレクトボックスを設置させておいて選ばせるということができないんです…

[yambejp]

何をトリガーにどう選ばせるか書かないと回答者には想像ができませんので今後は
質問方法を工夫してもらえると回答がつきやすいかと・・・

Answer 3

　$.when()は、Deferred などを引数に取ります。
jQuery.when() | jQuery API Documentation

　ご提示のコードは、

　　　　　　　$.when(
　　　　　　　　　　　　data.IdCnt > 1 ? showSelectDialog($("#Code").val(), { resultId: data.Id }) : console.log(""))

　となっているので$.whenにひとつの引数を渡しており、その内容はshowSelectDialogの戻り値かundefinedです。

　showSelectDialogの戻り値は文字列だと思われますので、両方とも Deferred などではないです。$.whenに Deferred などではないものを渡した場合はresolved Deferredを返す、とドキュメントにありますから、「ダイアログ」の入力待ちの間に$.whenは解決し、.done()を実行することになります。

　ですので、showSelectDialogを非同期処理するのが解決策になるだろうと思います。

Comments

[Ryuakira]

$.when()の引数を正確に理解できていませんでした。
ご教授くださり、ありがとうございます！
showSelectDialogを非同期処理にするよう模索中です。