結合使用jQuery UI模式消息

Question

我無法結合與jQuery UI的模式消息jQuery的onbeforeunload事件jQuery的onbeforeunload事件。我想使用jquery onbeforeunload事件來檢查表單是否已經提交，如果尚未提交，用戶會詢問他們是否想保存更改。

的1RST功能提供系統提示和正常工作，但它是很難自定義樣式或按鈕文本，並且需要來自用戶的幾個點擊。

第二屆功能使用jQuery UI的對話框窗口小部件，但它目前的觸發，顯示該對話框時，而不是當用戶試圖離開頁面的任何字段被更改的功能。我該如何糾正這個功能，以便在用戶點擊離開頁面而不提交表單時觸發它？

我使用jQuery-1.8.2和jQuery-UI-1.9.1

<form name="form2" id="form2" method="post" action="form2-exec.php">   
    <!-- Form Elements --> 
    <div id="dialog-confirm" style="display:none;"> 
     Would you like to save your changes? 
    </div> 
    <a href="form1.php">BACK</a> 
    <a href="#"><input type="submit" value="SUBMIT" /></a> 
</form> 

原函數

$(function() { 
    // Set the unload message whenever any form elements are changed 
    $('input', 'select').change(function() { 
     setConfirmUnload(true); 
    }); 
    // Turn off the unload message whenever a form get submitted properly. 
    $('form').submit(function() { 
     setConfirmUnload(false); 
    }); 
}); 
function setConfirmUnload(on) { 
    var message = "You have unsaved data. Are you sure to leave the page?"; 
    window.onbeforeunload = (on) ? function() { return message; } : null; 
} 

新setConfirmUnload（上）功能（隱而不宣正確「T工作）

function setConfirmUnload(on) { 
    var message = $("#dialog-confirm").dialog({ 
     modal: true, 
     buttons: { 
      "Save": function() { 
       $("#form2").submit(); 
       $(this).dialog("close"); 
      }, 
      "Continue": function() { 
       $(this).dialog("close"); 
      } 
     } 
    });   
    window.onbeforeunload = (on) ? function() { return message; } : null; 
} 

Answer 1

嘗試對話的定義移動到window.onbeforeunload處理程序是這樣的：

function setConfirmUnload(on) { 
    var message;  
    if (on) { 
     window.onbeforeunload = function() { 
      message = $("#dialog-confirm").dialog({ 
       modal: true, 
       buttons: { 
        "Save": function() { 
         $("#form2").submit(); 
         $(this).dialog("close"); 
        }, 
        "Continue": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
      return message; 
     }; 
    } else { 
     window.onbeforeunload = null; 
    } 
}