Bir AJAX işlemini tamamlamadan önce tüm bağlantıların nasıl yönlendirileceğini engelleme

Question

tinyMCE kullanan bir uygulamam var. Bu sayfada, kullanıcı bir mesaj oluşturacak ve başka bir sayfada önizleyecektir (tinyMCE'nin önizlemesini kullanmadan). Şu anda kullanıcı tinyMCE UI'sini tıkladığında içeriği kaydeden bir AJAX işlevine sahibim. Sorun şu ki, aynı sayfada farklı bağlantılar var, bazen bir kullanıcı bağlantıyı tıklattığında, AJAX işlevi yeniden yönlendirmeden önce içeriği kaydetmeyi başaramaz, dolayısıyla boş bir önizleme veya kaydedilmemiş mesaj ortaya çıkar.

<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> 

İşte JavaScript işleyicileri ve işlevleri.

<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

Birkaç şey, sizin save_message() işlevi tamamlamak ve o iş için bir yanıt geri göndermek için gereken bir AJAX çağrıdır. Bir bağlantı etiketini tıklattığınızda, işlev çağrılır (yukarıdaki kodunuza göre), ancak işlev yanıt vermeden önce sayfa yeniden yönlendirilir. Her çapa etiketi için artık olarak işlevini çağırarak gibi Ayrıca öyle görünüyor ki, niye Kodunuz mantığı iyi yani a.click(function(){ // your function here });

gibi, TÜM çapa etiketleri için bir kez demiyoruz, sadece yeniden yapısı ve basitleştirmek gerekiyor şöyle:

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

Sen bağlantılar yönlendirmek veya değil itibaren sekteye uğrarsa söyleyecektir bayrak değişkeni çeşit oluşturabilirsiniz. İletiyi kaydetmek için AJAX isteği göndermeden önce, bu değişkeni true olarak ayarlayın ve başarılı istekten sonra tekrar false olarak ayarlayın. Ayrıca, bu bayrak değişkenini kontrol edecek ve true'a eşitse, yönlendirmeyi engelleyen tüm bağlantılarda bir olay dinleyicisi ayarlayın.

örnek kod:

var linksDisabled = false; 

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

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