1

関連する 3 つのモデルの編集機能を実装しています。

作業を分割するために..ブートストラップ拡張機能を使用して3つのタブを実装しました...各タブにはテキストフィールド、ドロップダウンなどが含まれ、テキストの内容とドロップダウン、ラジオボタンなどがユーザー用に事前にロードされます。これは編集機能であるため、選択内容が保持され、フォーム全体を実際にやり直すことなく、変更したい特定のフィールドのみを変更する必要があると便利です。

タブ内の各フォームには、モデルを保存し、更新後に次のタブに切り替える独自の独立した [保存] ボタンがあります。

これが私がやろうとしていることです (そしてかなり苦労しています)..誰もがここに Facebook アカウントを持っていると確信しています..近況報告を書こうとするとき、または誰かとチャットしているときを思い出してください。別のページにリダイレクトするボタンをクリックしますか?

次に、ダイアログ ボックス (またはモーダル?) が表示され、まだ投稿が完了していないことが警告され、ページを離れるか、ページにとどまるかを選択できます。

私がやろうとしていることに似ています。ユーザーが別のタブに切り替える前に、変更を保存または破棄するかどうか (変更が行われた場合) をユーザーに警告しようとしています..これを行う方法が本当にわかりません..

ウィジェットがどのように機能するかについて..抽象化されています（または少なくともまだ見つけていません）。「イベント」onChange（）などを簡単に検索できるJavaとは異なり..私はphpとyiiが初めてです。 . それを行う方法、何を使用するか、またはサンプル コードについての任意のアイデアは、本当に役に立ちます.. どうもありがとうございました!

4

1 に答える 1

3

グローバル変数を使用してvar saved=false、フォームが保存されたことを確認できます。フォームの変更をキャッチするには:

$('form :input').change(function(){saved=false;});

参照: jquery get all form elements: input, textarea & select

ユーザーがページを離れたときに、beforeunload を起動できます。

$(window).on('beforeunload', function() {
if(!saved)  return 'Leave page?';
});

以下も参照してください。

タブの変更をキャッチするには、デフォルトの確認 ( http://www.w3schools.com/js/js_popup.asp )を使用できます。

$('#myTab a').click(function (e) 
{
    e.preventDefault();

    if(!saved)
    {
        if(confirm('Leave tab?'))
        {
            $(this).tab('show');
        }   
    }   
    else
    {
    $(this).tab('show');
    }
});

または、独自の確認ダイアログを作成することもできます。

アンロード前にウィンドウをキャッチできないようですが、タブの変更のために注意してください。

html :

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile"><form><input type="text"><input type="submit" class="btn btn-success"></form></div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>


<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Form not saved!</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="leavetab" class="btn btn-primary">Leave tab</button>
</div>
</div>

JavaScript :

保存された変数 = true; var 確認済み = false;
var thistab = null;

function checkave() { 保存されたものを返します。}

$(function () { $('#myTab a:last').tab('show');

$('#myTab a').click(function (e) 
{
    e.preventDefault();
    thistab = $(this);

    if(!checksave()){ $('#myModal').modal(); return false;}
    thistab = null;


    if(saved || confirmed)
    {
    $(this).tab('show');
    saved = false;
    confirmed = false;  
    }
});


//see: https://stackoverflow.com/questions/12862601/jquery-get-all-form-elements-input-textarea-select
$('form :input').change(function(){saved=false; confirmed = false;});



$('#myModal').on('hidden', function () {
      return false;
});

// modal click set confirmed to true 
$('#leavetab').click(function()
{   
    {
    $('#myModal').modal('hide');
    thistab.tab('show');
    saved = false;
    confirmed = false;
    }
});   
});
于 2013-07-08T10:26:01.140 に答える