Php Yii：检测表单的变化

Question

我正在为 3 个相关模型实现编辑功能..

并划分工作..我使用引导扩展实现了 3 个选项卡...现在每个选项卡都包含文本字段、下拉菜单等，现在文本内容和下拉菜单、单选按钮等已预先加载用户;由于这是一个编辑功能，如果他们的选择被保留，他们只需要更改他们想要更改的特定字段，而不必重新执行整个表单，这对他们来说会很方便。

选项卡中的每个表单都有自己独立的“保存”按钮，用于保存模型，然后在刷新后切换到下一个选项卡。

这就是我想要做的，（而且很难过）.. 我敢肯定每个人都在这里有一个 facebook 帐户.. 还记得当您尝试编写状态更新，或者当您与某人聊天然后单击重定向到另一个页面的按钮时？

然后一个对话框（或模态？）会提醒你你还没有完成你的帖子，它让你选择是离开还是留在页面中？

类似于我正在尝试做的事情；我试图在用户切换到另一个选项卡之前提醒他/她是否想保存或放弃他的更改（如果进行了更改）。我真的不知道该怎么做..

关于小部件的工作原理..是抽象的（或者我至少还没有找到它），不像在 java 中我可以轻松搜索“事件”onChange() 或其他东西..我是 php 新手和 yii .. 任何关于如何做、使用什么或示例代码的想法都会非常有帮助的家伙.. 非常感谢！

Answer 1

您可以使用像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?';
});

另见：

• Dialog box runs for 1 sec and disappears?
• catching beforeunload confirmation canceled?

要捕捉标签更改，您可以使用默认确认 (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：

var 已保存 = true; var 确认 = 假；
var thistab = null;

函数检查保存（） { 返回已保存； }

$(函数 () { $('#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;
    }
});   
});