javascriptの実行順（Dexie.js）

Question

編集画面で編集したデータをローカルのindexedDBに一時保存し、確定ボタンで全てサーバーサイドのDBに登録する画面を作ろうとしています。
indexedDBの操作にはDexie.jsを使用しています。

確定ボタンでindexedDBの中身を全件検索し、json形式の文字列に変換してtextareaにセットしsubmitしているのですが、サーバーでデバッグすると何も入っていない状態で困っています。

以下「試してみたこと」から、根本的に私がjavaScriptの関数の実行順を理解を間違っている気がするのですが、どうすればいいのかがサッパリわからず手詰まりになっています。
ヒントになるような情報をご存知の方、ぜひ教えてください！

なお、ajaxじゃなくて普通のsubmitでやろうとしているのは、処理終了後に一覧画面に遷移＆再検索して今登録したデータが出てきて欲しいので、submitじゃないとダメなんじゃないかなという素人考えからです。

###該当のソースコード
■Formタグ

<?php
	echo form_open("action", array("onsubmit"=>"regist(); return true;"));
?>

■jsonにしてtextareaに入れる部分

function regist(){
	db.tablename
		.toArray()
		.then(function(data){
			$("#jsonData").val(JSON.stringify(data));
		});
	db.close();
	return true;
}

■サーバーサイド

public function action(){
  // ここで確認しても値が入ってません・・・
  $post_param = $this->input->post();
}

###試したこと
●textareaに送りたいjson文字列がセットされているか？

textareaを表示にした上で、submitをreturn falseにして確認しました。
欲しい情報が入っているのを確認しました。

●そもそも、そのtextareaの値がサーバーに渡せるか？

JSのjson文字列をセットしている処理をコメントアウトし、
手入力で文字列を入力して試してみました。
入力した文字列がサーバーで受け取ることができました。

●json文字列に送れない文字が含まれてるんじゃないか？

JSのjson文字列をセットしている箇所で、
固定文字列「aaa」をtextareaにセットしてみました。
サーバーで受け取ることができませんでした。

●一縷の望みをかけてonsubmitの処理をボタンのonclickに移してみる

望みは潰えました。

以上から、「then」が呼ばれてるときにはすでにsubmitされてる？と予測までは立てたのですが、手詰まりになりました・・・。

###補足情報(言語/FW/ツール等のバージョンなど)
PHP 7
CodeIgniter3
Dexie.js(IndexedDBの操作用ライブラリ）
jQuery

Answer 1

「then」が呼ばれてるときにはすでにsubmitされてる？

はい、IndexedDBは非同期で動作しますので（MDN）、onsubmitから呼び出すと

1. IndexedDBのデータ取得が動き出す
2. （データ取得中に）onsubmitが終了する
3. 送信が行われる
4. IndexedDBの処理が終了して、値をセットする

という流れになります。3の送信には間に合いません。

解決策としては、送信ボタンをただのボタンにして、onclickからregistを呼んで、その.thenの中でフォームを.submit()させるようにすれば、確実にデータセット後の実行となりますl.

Comments

[SystemAjisai]

ありがとうございます！
リンク貼っていただいたMDNのページは一番最初に読んでたんですが、IndexedDBが非同期って「サーバーと繋がってないからサーバーサイドの処理には影響しないよ！」って意味だと理解してしまっていました。
.thenの中にブレークポイントを置くと画面が見えている状態で止まるので「やっぱsubmit前に呼ばれてるのか…」と思ったりもしてたんですが、ご指摘いただいてからよくよく考えてみたら、PHP側もブレークポイント入れてるからsubmitの処理がそこで止まってるだけでした。
非同期の処理を安易なデバッグで追いかけると混乱するといういいお勉強になりました…。

ご指摘の通りに実装したら無事に送信できるようになりました！
ありがとうございました！