1

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

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

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

这就是我正在尝试做的事情，（并且很难过）..我敢肯定每个人都有一个Facebook帐户在这里..记住当你尝试写一个状态更新，或者当你和某人聊天然后您单击重定向到另一个页面的按钮？

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

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

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

4

1 回答 1

3

您可以使用全局变量var saved=false来检查您的表单是否已保存。要了解表格的变化：

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

请参阅：jquery 获取所有表单元素：输入、文本区域和选择

当用户离开页面时，您可以触发 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：

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

函数 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;
    }
});   
});
于 2013-07-08T10:26:01.140 回答