면도기 구문이 실행 된 후 스크립트 실행

Question

동적으로 html 테이블을 생성하고 그것을 생성하는 동안 데이터로 채우는 면도기 구문이 있습니다. MVC ASP.Net 컨트롤러에 jQuery ajax 호출을 만들어이 정확한 테이블의 다른 필드에 데이터를 입력해야했습니다. 지금 내가 뭘 하려던이 테이블의 자식 노드를 통해 반복하고로드 후이 행에있는 셀에 의해이 필드 셀을 추가하는 것입니다.

그러나 이것은 성공적이지 못합니다. 테이블에 자식 노드가없는 것처럼 표시됩니다. 즉, 그 시간까지 면도기 구문이 실행되지 않습니다.

html 테이블에 데이터가 채워진 후 추가 필드를 추가하는 스크립트가 실행되도록하려면 어떻게해야합니까? 이것은 내가 가진 코드입니다. 이것은 면도기 및 html 구문입니다.

@if (Model.ToList().Count > 0) { 
     <table id ="groupTable"> 
     <thead> 
      <tr> 
       <th>Group Name</th> 
       <th>Description</th> 
      </tr> 
     </thead> 

     <tbody id="innerTable"> 
     @foreach (var group in Model) { 
     // display a link with each GroupName as a list which directs to that group with that id 
     <tr>  
      <td> @Html.ActionLink(group.Group.GroupName,"DisplayGroup","Groups", new {id = group.GroupId},null) </td> 

      <td> 
       @if(group.Group.Description.Length > 40){ 
        @group.Group.Description.Substring(0, 40)     
        <span>...</span> 
       } 
       else 
       { 
        @group.Group.Description.Substring(0, group.Group.Description.Length - 1) 
       } 
      </td> 
     </tr> 
     } 
    </tbody> 
    </table> 
} 

그리고 자바 스크립트 만 클라이언트 브라우저에서 실행 될 수있는 바와 같이이 당신이 문서에 다음 자바 스크립트 배열에 그룹의 ID를 저장할 수 있으며, document.ready

$(document).ready(function() { 
    @foreach (var group in Model) 
    { 
    <text> 
    jQuery.ajax({ 
     type: 'POST', 
     url: '/Groups/GetInvitedFriends', 
     data: { groupId: '@group.Group.GroupId' }, 
     success: function (friendMembers) { 
      $.each(friendMembers, function (index, friendName) { 
       // append friend Members at row with index index at that cell 
       var tbody = $('#innerTable')[0]; 
       var trow = tbody.childNodes[index]; 

       if (trow.index() === 0) { 
        trow.append('<td> Members </td>'); 
       } else { 
        trow.append('<td>' + friendName + '</td>'); 
       } 
      }); 
     }, 
     traditional: true 
     }); 
    </text> 
    } 
}) 

Answer 1

에 실행되는 스크립트입니다 로드,이 배열에 반복하여 각 여분의 셀을 추가하십시오.

<script type="text/javascript"> 

    //List of groups id 
    var groupIds = []; 

    $(function() { 

     //Initializing the array with values 
     @foreach (var group in Model) { 
      <text>groupIds .push(@group.Group.GroupId);</text> 
     } 

     InsertExtraCells(groupIds.pop()); //Insert for the first groupid in the array 

    }); 

    function InsertExtraCells(groupId) { 
     jQuery.ajax({ 
      type: 'POST', 
      url: '/Groups/GetInvitedFriends', 
      data: { groupId: '@group.Group.GroupId' }, 
      success: function (friendMembers) { 

       //Do your work 

       $.each(friendMembers, function (index, friendName) { 
        // append friend Members at row with index index at that cell 
        var tbody = $('#innerTable')[0]; 
        var trow = tbody.childNodes[index]; 

        if (trow.index() === 0) { 
         trow.append('<td> Members </td>'); 
        } else { 
         trow.append('<td>' + friendName + '</td>'); 
        } 
       }); 


       //If ids remaining in the array, loop to the next group id 
       if (groupIds.length > 0) { 
        InsertExtraCells(groupIds.pop()); 
       } 
       else { 
        //Do whatever when finish 
       } 
      }, 
      traditional: true 
     }); 

    } 

</script>