修改一個div是由Ajax響應

Question

HTML是這樣在與內容的模式裏面的HTML：簡單的登錄表單。

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" 
       tabindex="-1"> 
       <div class="modal-header"> 
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> 
        <h3 id="myModalLabel">Registered Member - Please Login</h3> 
        <div id="login_error"></div> 
       </div> 
       <div class="modal-body"> 
        <form role="form" id="login-form" data-bind="submit: login_user"> 
         <div class="row"> 
          <div class="span3"> 
           <div class="form-group"> 
            <div class="input-group"> 
             <input class="form-control" placeholder="name" name="name" type="text" 
               autofocus> 
            </div> 
           </div> 
           <div class="form-group"> 
            <div class="input-group"> 
             <input class="form-control" placeholder="Password" name="password" 
               type="password" value=""> 
            </div> 
           </div> 
           <div class="form-group"> 
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 

表單提交後，使用KNOCKOUT JS綁定來觸發應該返回數據的ajax調用。

Java腳本代碼是這樣以下幾點：

this.login_user = function(formElement){ 
      var formData = new FormData($('#login-form')[0]); 
      $.ajax({ 
       url: 'site_api/user_login.php', 
       type: 'POST', 
       processData: false, 
       contentType: false, 
       cache: false, 
       data: formData, 
       success: function(res) 
       { 
        if(res > 0){ 
         window.location = "http://r"; 
        } else { 
         $('#login_error').html('Invalid Credentials. Please try again.'); 
        } 

       }, 
       error: function(xhr, ajaxOptions, thrownError) 
       { 

        alert (xhr.status); 

       } 
      }); 
     }; 

$（ '＃login_error'）HTML（ '無效的憑證，請再試一次。'）; 這不起作用。我得到正確的Ajax響應，但不知何故，我無法正確設置HTML。

Answer 1

我認爲ID login_error是來自同一個頁面上的多個時間。所以這兩個ID與彼此衝突。我已經在你的代碼做了一些修改，請檢查一下

更新的HTML是這樣如下：簡單的登錄表單。

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" 
       tabindex="-1"> 
       <div class="modal-header"> 
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> 
        <h3 id="myModalLabel">Registered Member - Please Login</h3> 
        <div id="login_error" class="login_error"></div> 
       </div> 
       <div class="modal-body"> 
        <form role="form" id="login-form" data-bind="submit: login_user"> 
         <div class="row"> 
          <div class="span3"> 
           <div class="form-group"> 
            <div class="input-group"> 
             <input class="form-control" placeholder="name" name="name" type="text" 
               autofocus> 
            </div> 
           </div> 
           <div class="form-group"> 
            <div class="input-group"> 
             <input class="form-control" placeholder="Password" name="password" 
               type="password" value=""> 
            </div> 
           </div> 
           <div class="form-group"> 
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 

更新的Java Script代碼是這樣如下：

this.login_user = function(formElement){ 
      var formData = new FormData($('#login-form')[0]); 
      $.ajax({ 
       url: 'site_api/user_login.php', 
       type: 'POST', 
       processData: false, 
       contentType: false, 
       cache: false, 
       data: formData, 
       success: function(res) 
       { 
        if(res){ 
         window.location = "http://r"; 
        } else { 
         $('#myModal.login_error').html('Invalid Credentials. Please try again.'); 
        } 

       }, 
       error: function(xhr, ajaxOptions, thrownError) 
       { 

        alert (xhr.status); 

       } 
      }); 
     };