.show（）在ajax調用後不工作

Question

好的，所以我試圖在用戶導航到我的頁面然後提交表單時初始隱藏表格，然後使用Ajax處理它並顯示結果表格。

但是，當我運行代碼時，它刷新頁面並默認顯示無設置。

這裏是我的CSS和JavaScript：

JS：

<script> 

     var frm = $('#myform'); 
     frm.submit(function() { 
      $('#loader').show(); 
      $('#results-table').hide(); 
      e.preventDefault(); 
      $.ajax({ 
       type: frm.attr('method'), 
       url: frm.attr('action'), 
       data: frm.serialize(), 
       async: true, 
       success: function (data) { 
        $('#loader').hide(); 
        $('#results-table').show(); 
        $("#results-table").html(data); 
       }, 

      }); 
      return false; 

     }); 

    </script> 

CSS：

 #results-table { 
     display: none; 

     } 

HTML：

<table class="table table-bordered table-striped table-hover table-responsive" id="results-table" > 

<form action="{% url 'results-view' %}" method="POST" class="autocomplete-me ui-widget" id="myform" > 

Answer 1

您需要防止的形式提交，通過將事件傳遞給fu並防止它：

var frm = $('#myform'); 
     frm.submit(function (e) { 
      e.preventDefault(); 
      $('#loader').show(); 
      $('#results-table').hide(); 
      e.preventDefault(); 
      $.ajax({ 
       type: frm.attr('method'), 
       url: frm.attr('action'), 
       data: frm.serialize(), 
       async: true, 
       success: function (data) { 
        $('#loader').hide(); 
        $('#results-table').show(); 
        $("#results-table").html(data); 
       }, 

      }); 
      return false; 
     }); 

return false不會伎倆。