Ajaxでフォームをサブミットした後、Jquery/Ajax/CSSを表示/非表示divを

Question

Ajaxでフォームを投稿した後に隠れたDIVが表示される問題があります。セットアップはそうです。

index.htmlを - 私の内容と形式は、リソースページからのdivにロードされ

<div id="inst_stud_resource_change_success" style="display: none;"> 
      <div class="greenbox"> 
      Deleted! 
      </div> 
     </div> 
     <div id="inst_stud_resources_getpackages"> 
      <script type="text/javascript"> 
       $("#inst_stud_resources_getpackages").fadeOut("slow").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').fadeIn('slow'); 
      </script> 
     </div> 

/inst/stud/resources/getpackages.html - このページでは、フォーム、およびのために必要なコンテンツを持っていますindex.htmlのDIV

Jqueryはgetpackages.htmlと同様に使用されます。

<script type="text/javascript"> 
$(document).ready(function() { 

$('#delete_package').on('submit', function(event) { 

    $.ajax({ 
     data : { 
      stud_id : $('#stud_id').val(), 
      pck_id : $('#pck_id').val() 
     }, 
     type : 'POST', 
     url : '{{ url_for('mod_inst_stud.delete_package2') }}' 
    }) 
    .done(function(data) { 

     if (data.error) { 
      $('#errorAlert').text(data.error).show(); // IGNORE haven't gotten this far 
      $('#successAlert').hide(); // IGNORE haven't gotten this far 
     } 
     else { 
      $("#inst_stud_resources_getpackages").hide(); // doesn't seem to do anything 
      $('#inst_stud_resource_change_success').show(); // never shows the div on Index.html 
      $('#inst_stud_resource_change_success').delay(3200).hide(); // never hides, since it is never shown.. 
      $("#inst_stud_resources_getpackages").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').show(); // this seems to work since the div from index.html is updated with the new content from getpackages.html 
     } 

    }); 

    event.preventDefault(); 

}); 

}）;

何が起こっているのですか？私は実際にWeb開発でその詩ではない、私の背景はPython /フラスコではなく、Jquery/Ajax/CSSでより多くです。

私は解決策を見つけた

Answer 1

..

else { 
      $("#inst_stud_resources_getpackages").hide(); 
      $('#inst_stud_resource_change_success').fadeIn(1000); 
      $('#inst_stud_resource_change_success').delay(2600).fadeOut(3500); 
      $("#inst_stud_resources_getpackages").delay(7200).fadeIn().load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}'); 
     } 

はどうやら常に最前面に移動しますjqueryの内のキュー、しかし.LOAD（）があります。だから私の呼び出しの順序を否定していた。いくつかの行を移動し、.load（）にアニメーションを追加して、読み込みを遅らせる必要がありました。今はうまくいっているようだ。