Question

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

并划分工作..我使用bootstrap扩展实现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

当用户离开页面时，您可以触发前载：

$(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 ：

var saved = true; var confirmed = false;
var thistab = null;

function checksave（） { 返回保存; }

$（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;
    }
});   
});

Php Yii：检测表格的变化

1 个答案:

或者您可以尝试构建自己的确认对话框：