Question

这是我的代码：

var tableSTART=$(".tbody").html();
$( ".selector" ).tabs({activate: function(event, ui) {
  var current=$(".tbody").html();
  if (current!= tableSTART) {
       BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'You have not saved the changes.Do you want to save it?.',
            type: BootstrapDialog.TYPE_WARNING,
            draggable: true,
            callback: function(result) {
                if(result) {
                    //var index = $('.selector a[href="'+"#"+tableCRAWLTYPE+'"]').parent().index();
                    var index = $('#tabs a[href="#your-tab"]').parent().index();
                    $( ".selector" ).tabs( "option", "active", index );
                    var tab = $( ".innerTab ul>li a:contains("+extractType+")" );
                      if(tab[0]) {
                        var tabid = tab[0].id;
                        var tabIndex = tabid.substr(tabid.length - 1);
                        $('.innerTab').tabs('option', 'active' , tabIndex-1);
                      }
                    //}
                    tableSTART=current;
                }
            }
        }); 
   //end dialog
        }
        else
        {   
            alert("not changed");

        }
    }
});

我想要的是，当我在另一个标签内的标签内的表格中进行一些更改，并尝试移动到其他标签而不保存时，会出现一条警告消息，说“你想要保存”。如果用户单击“确定”它应该保持在同一页面上，如果“否”，则应该允许它切换到其他选项卡。

当我在其他选项卡的内部选项卡中进行一些更改时运行以上操作，然后出现警告消息，如果我单击“是”，则再次出现弹出窗口（我认为因为我正在制作活动选项卡）就像我点击的那样，再次调用.tabs()）

如何正确地做到这一点以及如何以更好的方式做到这一点？

PS：我正在比较变更前后的.tbody html内容。 tableSTART是页面加载时的初始内容，然后我动态添加一些div（这些div内的文本字段等）。和current检查innertab的.tbody

中的当前html

对于另一个选项卡内的选项卡内未保存更改的警告

0 个答案: