, bir sonraki sayfa yüklenene kadar form gönderildikten sonra modal gösterir ... safari'de çalışmaz mı?

Question

Bu

<form action="/category" method='GET'> 
    <button type="submit" class="btn btn-default render"> 
     name 
    </button> 
</form> 

gibi bir düğme var ve düğme bu sadece kullanıcının bir sonraki sayfa yüklenirken bildirmek için ... tıklandığında zaman bir kalıcı başlatır bazı javascript var. İşte

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".render").click(function(evt){ 
      $('#render_page').modal('show'); 
     }); 
    }); 
</script> 

modal

<div class="modal fade" id="render_page" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="form-horizontal"> 

       <div class="modal-body"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <div id="user_msg" align="left">Rendering Page... </div> 
       </div> 

      </div>         
     </div> 
    </div> 
</div> 

Bu, tüm Firefox ve Chrome üzerinde çalışıyor html, ancak Safari modal göstermiyor? Formu düğmenin içine koyarsam, modal başlatır, ancak formu göndermez. Yani her iki açıdan, form gönderimi ve modal işe yarıyor, ama safari ikisini de yapmak istemiyor mu?

Answer 1

bu

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".render").click(function(evt){ 
      evt.preventDefault(); 
      $('#render_page').modal('show'); 
     }); 
    }); 
</script> 

https://jsfiddle.net/y64qyjzo/

Güncelleme deneyin: eklendi zamanlayıcı kalıcı fark etme yetkisi verir:

$(document).ready(function() { 
    $(".render").click(function(evt) { 
    evt.preventDefault(); 
    $('#render_page').modal('show'); 
    setTimeout(function() { 
     $('#testForm').submit(); 
    }, 1000) 
    }); 
}); 

(forma id 'Testform' ekleyin)

https://jsfiddle.net/y64qyjzo/3

Answer 2

1'de verilen diğer bazı yöntemler aşağıda verilmiştir: 1 form gönderiminde bir işlevi çağırabilirsiniz. Sadece form etiketinde işlev adıyla (ör. MyFunction) onsubmit="myFunction()" ekleyin.

<form action="/category" method='GET' onsubmit="myFunction()"> 
    <button type="submit" class="btn btn-default render"> 
     name 
    </button> 
</form> 





<script> 
function myFunction() { 
    $('#render_page').modal('show'); 
} 
</script> 

2 aşağıda verilmiştir gibi: Ayrıca Gönder düğmesini de onclick="myFunction()" ekleyerek bu işlevi çağırabilir.

<form action="/category" method='GET'> 
    <button type="submit" class="btn btn-default render" onclick="myFunction()"> 
     name 
    </button> 
</form> 




<script> 
function myFunction() { 
    $('#render_page').modal('show'); 
} 
</script> 

Bunlardan birinin sorununuzu çözeceğinden eminim.

Answer 3

overkill olabilir, ancak herhangi bir sorun olmadan krom ve safaride test edilmiş olabilir ve gerçek formun gönderilmesinden önce geçen süreyi kontrol edebilirsiniz. Seni hissediyorum

Güncelleme sadece .. Yeni pencerede sonrası her zaman işe yaramaz açarak dışarı toastr

Güncelleme 2 kontrol bildirim sistemi değil, kalıcı bir istiyorum. prop('target', 'blank') satırını kaldırın ve tekrar deneyin.

KodExample

// Code goes here 
 
var CustomTimeout = 200; // 200 miliseconds 
 

 
$(document).ready(function() { 
 
    $(".render").click(function(evt) { 
 
    // Stop Form from sending 
 
    evt.preventDefault(); 
 
    // Open Modal 
 
    showModal().then(function() { 
 
     // Send Form 
 
     sendForm(evt, CustomTimeout).then(whateverYouWantToDoNextFunction) 
 
     // fake function 
 
     function whateverYouWantToDoNextFunction() {}; 
 
    }) 
 
    }); 
 
}); 
 

 
function showModal() { 
 
    return new Promise(function(resolve, reject) { 
 
    resolve($('#render_page').modal('show')); 
 
    }) 
 
} 
 

 
function sendForm(e, timeout) { 
 
    return new Promise(function(resolve, reject) { 
 
    console.log("Sending Form", e); 
 
    // Set Your Action and Method manuall 
 
    $("form").prop('action', "/category"); 
 
    $("form").prop('method', "GET"); 
 

 
    // Opens a new window for the submission 
 
    $('form').prop("target", "_blank"); 
 

 
    // Set Timeout 
 
    function submit() { 
 
     setTimeout(function() { 
 
     $('form').submit(); 
 
     // Resolve Submission for chaining 
 
     resolve(console.log("Form Sent Successfully")); 
 
     }, timeout); 
 
    } 
 

 
    // Submit it 
 
    submit(); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 

 
    <form> 
 
    <button type="submit" class="btn btn-default render"> 
 
     name 
 
    </button> 
 
    </form> 
 

 
    <div class="modal fade" id="render_page" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="form-horizontal"> 
 

 
      <div class="modal-body"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <div id="user_msg" align="left">Rendering Page...</div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 4

Dene:

$(document).ready(function(e) { 
 
\t $(".render").click(function(evt){ 
 
\t \t \t evt.preventDefault(); 
 
      $('#render_page').modal('show'); 
 
\t \t \t setInterval(function(){ $("#formID").submit(); }, 3000); \t \t \t 
 
     }); 
 
});

<form action="/category" method='GET' id="formID"> 
 
    <button class="btn btn-default render"> 
 
     name 
 
    </button> 
 
</form>

seçiminize göre zamanlayıcı değerini değiştirin.