앵커 태그에서 포스트 백이 발생하면 회 전자를 표시하는 방법을 클릭하십시오.

Question

내 웹 사이트에 스피너가 있습니다. 클릭 구속에 바인더 스피너가 있고 href 속성이 있는지 확인하십시오. 괜찮 았어, 나는 패스를 확인하고 다시 게시가 발생하면 앵커 클릭에 대한 유효성을 부여했습니다. 내 문제는 유효성 검사를 통과하지 못하고 스피너가 표시하는 경우입니다. 유효성 검사를 통과하지 못할 경우 중지하는 방법.

내 jQuery를 :

여기 내 코드입니다

var myVar, 
     ShowProgress = function() { 
      myVar = setTimeout(function() { 
       var modal = $('<div />'); 
       modal.addClass("modal"); 
       $('body').append(modal); 
       var loading = $(".loading"); 
       loading.show(); 
       var top = Math.max($(window).height()/2 - loading[0].offsetHeight/2, 0); 
       var left = Math.max($(window).width()/2 - loading[0].offsetWidth/2, 0); 
       loading.css({ 
        top: top, 
        left: left 
       }); 
      }, 200); 
     }; 

    $(document).ready(function() { 
     $(this.getElementById('form1')).submit(ShowProgress); 
     $('a').click(function (evt) { 
      var hrf = $(this).attr('href'); 
      if (hrf != "#" && hrf != "") { 
       ShowProgress(); 
       evt.preventDefault(); 
       return false; 
      } 
     }); 
    }); 

내 HTML 내가 제대로 이해하면

function Validate { 
     if (!CheckDDL('<%= ddlDepartment.ClientID %>', 'Alert - pls select a department!!!')) {    
      return false; 
     } 
     if (!CheckDDL('<%= ddlDesignation.ClientID %>', 'Alert - pls select a designation!!!')) { 
      return false; 
     } 
     if (!CheckDDL('<%= ddlType.ClientID %>', 'Alert - pls select type!!!')) { 
      return false; 
     } 
    } 

MY HTML은 ...

<table> 
       <tr> 
        <td style="width: 103px;">Departmnet : <span class="errorStar">*</span> 
        </td> 
        <td> 
         <asp:DropDownList ID="ddlDepartment" runat="server" Width="330px"></asp:DropDownList> 
        </td> 
       </tr> 
       <tr> 
        <td>Designation : <span class="errorStar">*</span> 
        </td> 
        <td> 
         <asp:DropDownList ID="ddlDesignation" runat="server" Width="330px"></asp:DropDownList> 
        </td> 
       </tr> 
       <tr> 
        <td>Type : <span class="errorStar">*</span> 
        </td> 
        <td> 
         <asp:DropDownList ID="ddlType" runat="server" OnSelectedIndexChanged="ddlType_SelectedIndexChanged" AutoPostBack="True"> 
          <asp:ListItem Value="">[ -- SELECT TYPE -- ]</asp:ListItem> 
          <asp:ListItem Value="Goal">Goal</asp:ListItem> 
          <asp:ListItem Value="Competencies">Competencies</asp:ListItem> 
         </asp:DropDownList> 
        </td> 
       </tr> 
       <tr> 
        <td>Perspective : <span class="errorStar">*</span> 
        </td> 
        <td> 
         <asp:DropDownList ID="ddlPerspective" runat="server" Width="330px"></asp:DropDownList> 
        </td> 
       </tr> 
       <tr> 
        <td></td> 
        <td> 
         <asp:Button ID="btnAdd" runat="server" Text="Add" Width="80px" OnClick="btnAdd_Click" OnClientClick="return Validate();" /> 
         <asp:Button ID="btnBack1" runat="server" OnClick="btnBack1_Click" Text="Back" Width="80px" /> 
        </td> 
       </tr> 
       <tr> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
       </tr> 
      </table> 

Answer 1

, clearTimeout(myVar) 님이 내 문제를 해결해야합니다. 흠집.

documentation on jQuery을 읽어보십시오.

는 UPDATE : 여기

이 코드의 업데이트 된 버전입니다 : 모든

$(document).ready(function() { 
    var progressTimer, 
     showProgress = function() { 
      progressTimer = setTimeout(function() { 
       var modal = $('<div />'); 
       modal.addClass("modal"); 
       $('body').append(modal); 
       var loading = $(".loading"); 
       loading.show(); 
       var top = Math.max($(window).height()/2 - loading[0].offsetHeight/2, 0); 
       var left = Math.max($(window).width()/2 - loading[0].offsetWidth/2, 0); 
       loading.css({ top: top, left: left }); 
      }, 200); 
     }, 
     hideProgess = function() { 
      clearTimeout(progressTimer); 
     }; 

    $('a').click(function() { 
     var hrf = $(this).attr('href'); 
     if (hrf != "#" && hrf != "") { 
      showProgress(); 
     } else { 
      hideProgess(); 
     } 
    }); 

    $("#form1").submit(function (event) { 
     showProgress(); 
    }); 
});