2017-09-13 44 views
0

我使用jquery ajax從我的數據庫動態生成複選框來調用我的web api。問題是,我正在嘗試獲取複選框數組的長度,但在調試時不斷接收數組長度爲零。請問我的代碼可能有什麼問題。 HTML代碼爲什麼我的複選框數組在jquery ajax返回零長度

     <div class="panel-body"> 
         <form method="post"> 
          <div class="form-group"> 
           <label>Add Role Name</label> 
           <input type="text" class="form-control" placeholder="Role Name" /> 
          </div> 
          <div class="col-md-6"> 
           <div class="well"> 
            <fieldset id="appName"> 

            </fieldset> 

           </div> 
           <input id="saveUrl" type="button" value="Add Role" class="btn btn-success pull-right" /> 
          </div> 

         </form> 

        </div> 

jQuery代碼

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      method: 'GET', 
      url: 'http://localhost:61768/api/users/GetUrls', 
      headers: { 
       'Authorization': 'Basic ' + btoa(localStorage.getItem('ApplicationId') + ":" + localStorage.getItem('ApiKey')) 
      }, 
      success: function (data) { 
       if (Object.keys(data).length == 0) { 
        alert("Ewoo"); 
       } else { 

        $.each(data, function (index, value) { 
         var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>'); 
         $('#appName').append(input); //Where I generate the checkboxes 
        }); 
       } 

      }, 
      error: function() { 
       alert("DonDy"); 
      } 
     }); 
     var $checkboxes = $('input[name="chk[]"]:checked'); //Checkbox array 
     $('#saveUrl').click(function() { 
      if ($checkboxes.length > 0) { 
       alert("Good"); 

      } else { 
       alert("Bad"); //Result. 
      } 
     }); 
    }); 

</script> 

的結果點擊保存按鈕報警AJAX調用內部的壞

+1

Ajax調用是異步的。意味着你的'$('#saveUrl')。click'可能會在ajax調用可能已經獲取複選框之前執行。嘗試將該代碼塊添加到ajax調用的成功處理程序中。 – kaushik94

+0

@ kaushik94提到的內容是相當真實的,因爲它是'異步',最好將click事件移入成功調用,而+,你可能需要將'click'事件綁定到文檔而不是複選框點擊,因爲動態生成複選框可能不在'DOM'中 – Se0ng11

回答

1

在這段代碼複選框被越來越添加數據,但你不勾選複選框

var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + value.UrlName + '</label><br>'); 

在這裏,你正在檢查檢查checkbox..hence提醒的長度差:

var $checkboxes = $('input[name="chk[]"]:checked'); 

試試這個,到內部保存網址點擊功能:

$('#saveUrl').click(function() { 
    var $checkboxes = $('input[name="chk[]"]'); 
       if ($checkboxes.length > 0) { 
        alert("Good"); 

       } else { 
        alert("Bad"); //Result. 
       } 
      }); 
0

由於要填充/創建複選框,則應該有$checkboxes裏面#saveUrl函數,bec在這之前,當JS被加載時它將是空的。你需要的是點擊#saveUrl當這個變量,因此它應檢查checked輸入時的#saveUrl被觸發:

$('#saveUrl').click(function() { 
    var $checkboxes = $('input[name="chk[]"]:checked'); //Checkbox array 
    if ($checkboxes.length > 0) { 
    alert("Good"); 

    } else { 
    alert("Bad"); //Result. 
    } 
});