2

jqueryモーダルダイアログに関する多くのページを確認しましたが、必要な方法で機能するものはまだ見つかりません.

ユーザーが変更を加えてサイトの内部リンクをクリックすると、保存、破棄、キャンセルの 3 つのボタン オプションが表示されるダイアログが表示されます。ユーザーが [保存] をクリックすると、保存機能が呼び出され、ページから離れます。

ただし、ページにはタブが設定されており、各タブは異なる php ページをマスター ページにロードします。リンクはハード リンクではなく、ページをリロードしません。それらは、ページ内のアンカー リンクのようなものです (これにより、php ページが読み込まれます)。そのため、アンカー リクエストをキャプチャして、後でアドレス バーに送信することはできません。

私はすでにモーダルとして設定されたダイアログを持っています。しかし今、別のタブをクリックすると、タブが読み込まれ、同時にダイアログがポップアップします。ダイアログでボタンがクリックされるまで、タブをロードしないようにします。

confirm() 関数はこれを完全に行います。しかし、私のモーダル ダイアログでは、他のタブを読み込むことができます。この場合の確認機能のように機能するモーダル ダイアログの設定を手伝ってもらえますか?

ここに私のJavascript関数があります:

        function fw_chkTabStatusFmla() {
        if (jsg_fwTabWatchFmla == false) {

           $(function() {
              $( "#tabWarnFmla" ).dialog({
                  resizable: false,
                  height:240,
                  width:400,
                  modal: true,
                  buttons: {
                    Cancel: function() {
                      $( this ).dialog( "close" );
                    },
                    "Discard": function() {
                            $( this ).dialog( "close" );
                           //discard changes and continue
                    },
                    "Save": function() {
                            $( this ).dialog( "close" );
                           //function to save changes and continue
                    },
                  }
              });
          });
      }
 }

これは私が使っていた古いものです。動作は正しく停止しますが、2 つのボタンしか使用できません。

        function fw_chkTabStatusFmla() {
        if (jsg_fwTabWatchFmla == false) {
            var x = confirm("If you leave this tab without saving you may lose your changes.\n\nClick 'OK' to proceed without saving.");
            if (x == true)         {
                jsg_fwTabWatchFmla = true;
                setConfirmUnload(false);
                return true;
            } else {
                return false;
            }
        }
    }

関連するフィールドで変更が行われたときに、jsg_fwTabWatchFmla 変数を false に設定しています。

これが関数を実行するために必要なものです。

    $(document).ready( function() {
            $('#tabs').tabs({
            select: function(event, ui) {                    
                return fw_chkTabStatusFmla();
            }
            });
    }
4

1 に答える 1