AJAXプロセスを完了する前にすべてのリンクがリダイレクトされないようにする方法

Question

tinyMCEを使用するアプリケーションがあります。このページでは、ユーザーがメッセージを作成し、別のページでプレビューします（tinyMCEのプレビューは使用しません）。私は現在、ユーザーがtinyMCE UIから離れてクリックするとコンテンツを保存するAJAX関数を持っています。問題は、この同じページにさまざまな種類のリンクがあることです。ユーザーがリンクをクリックすると、AJAX関数がリダイレクトする前にコンテンツを保存できないため、空白のプレビューや保存されていないメッセージが表示されます。

<div> 
<textarea id='msg'></textarea> 
<a id='preview'>Preview</a> 
<a id='other_page'>Other Page</a> 
<a id='another_page'>Another Page</a> 
</div> 

ここにJavaScriptのハンドラと関数があります。

<script> 
    // INITIALIZE TINYMCE 
    tinyMCE.init({ 
    // SAVE CONTENT ON BLUR 
      editor.on('blur', function() { save_message(this); }); 
    }) 

    function save_message(){ 
     var msg= tinyMCE.get('msg ').getContent(); 
     $.ajax({ 
        statusCode : { 404: function(){alert('Not Found');} }, 
        type  : 'post', 
        data  : {msg:msg}, 
        url  : '<script_that_handles_save>', 
        success : function(res){ // DO SOMETHING } 
      }); 
    } 

// WHEN PREVIEW IS CLICKED 
$('a.preview).click(function(){ 
      save_message(); 
}); 

$('a.other_page).click(function(){ 
      save_message(); 
}); 

$('a.another_page).click(function(){ 
      save_message(); 
}); 
</script> 

Answer 1

いくつかのこと、あなたのsave_message()機能が完了し、それを動作させるための応答を返送する必要がAJAX呼び出しです。アンカータグをクリックすると、関数が呼び出されます（上のコードに従って）が、関数が応答を返す前にページがリダイレクトされます。あなたは、各アンカータグのための冗長機能を呼び出しているよう はまた、それはそう、なぜあなたのコードロジックが良いですのでa.click(function(){ // your function here });

のように、ALLアンカータグのために一度にそれを呼び出すことはありませ、あなただけそれを再構成し、簡素化する必要があり、ように：

tinyMCE.init({ 
// SAVE CONTENT ON BLUR 
     editor.on('blur', function() { save_message(this); }); 
}) 
$('a').click(function(e){ 
     // prevent the redirect 
     e.preventDefault(); 
     var msg= tinyMCE.get('msg ').getContent(); 
     var location = $(this).attr('href'); 
     // execute ajax 
    $.ajax({ 
       statusCode : { 404: function(){alert('Not Found');} }, 
       type  : 'post', 
       data  : {msg:msg}, 
       url  : '<script_that_handles_save>', 
       success : function(res){ 
           // redirect on success 
           window.location.href = location 
         } 
     }); 
}); 

Answer 2

フラグ変数を作成すると、リンクのリダイレクトを防止するかどうかを判断できます。メッセージを保存するAJAX要求を送信する前に、この変数をtrueに設定し、要求が成功した後にfalseに設定し直してください。また、すべてのリンクにイベントリスナーを設定します。このリスナーはこのフラグ変数をチェックし、それがtrueに等しい場合、リダイレクトを防ぎます。

例コード：

var linksDisabled = false; 

function save_message() { 
    linksDisabled = true; 
    $.ajax({ 
    success: function() { 
     linksDisabled = false; 
    } 
    // some other options 
    }) 
} 

$("a").click(function(event) { 
    if (linksDisabled) { 
    event.preventDefault(); 
    } 
});