動的

2017-11-28 50 views
1

は、私が検索し、多くのスタックを通じて検索し、私の問題解決することができていないきに生成されたテーブルの行からセル内のボタンにデータを添付:私はHTMLのテーブルを持っている動的

をその口ひげ値に基づいて生成されるので、同様に構成されています

  <tbody> 
      {{#Result.Rows}} 
      <tr id={{deal_id}}> 
       <td>{{azuqua_org_id}}</td> 
       <td>{{company_name}}</td> 
       <td>{{deal_title}}</td> 
       <td>{{deal_value}}</td> 
       <td>{{csm}}</td> 
       <td>{{days_until_renewal}}</td> 
       <td class="renewal">{{renewal_date}}</td> 
       <td class="dealId">{{deal_id}}</td> 
       <td>{{company_org_id}}</td> 
       <td>{{#comments}}{{comments}} - {{Comment Last Mod}}{{/comments}} 
       <a href="#commentModal" role="button" data-id="{{deal_id}}" id="cmtOpen{{deal_id}}" class="btn btn-custom btn-xs" data-toggle="modal">Comment</a> 
       </td> 
      </tr> 
      {{/Result.Rows}} 
     </tbody> 

各行の最後の列は、コメント欄であり、あなたが新しいを追加することができますモーダルウィンドウを示し、内部に小さなコメントボタンがありますそのセルにコメントする。次のようにモーダルウィンドウのHTMLは次のとおりです。ここで

<div id="commentModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="commentBox" aria-hidden="true"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title">New Comment</h4> 
       </div> 
       <div class="modal-body"> 
       <div class="deal-label" 
        <p><span type="text" class="label-sm" id="txtId"/></p> 
       <div class="form-group"> 
        <p>Type a new comment below:</p> 
        <textarea id="commentBody"></textarea> 
       </div> 
       <div class="modal-footer" id="modalButtons"> 
        <button class="trigger btn btn-default" type="close" data-dismiss="modal" aria-hidden="true">Cancel</button> 
        <button class="trigger btn btn-primary" type="submit" data-dismiss="modal" id="cmtSubmit">Submit</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 

であるHTMLのための私のJS:

$(document).ready(function() { 
 
    console.log('Document ready'); 
 
    studio.select("table-2").onPageLoadSuccess(attachKeyupHandler); 
 
}); 
 

 
var attachKeyupHandler = function() { 
 
    $("#searchBar").ready(function() { 
 
    console.log('searchBar is ready') 
 
    var sb = $("#searchBar"); 
 
    console.log(sb); 
 
    sb.keyup(function(event) { 
 
    console.log('key up on search bar'); 
 
    searchFilter(); 
 
    }); 
 
    
 
    $("#cmtOpen").ready(function() { 
 
    console.log('CommentBtn is ready') 
 
    var cmb = $("#cmtOpen{{deal_id}}"); 
 
    console.log(cmb); 
 
    cmb.on("click", function(event) { 
 
    console.log('comment modal opened'); 
 
    commentClick(); 
 
    }); 
 
    
 
    $(".btn btn-custom btn-xs").ready(function() { 
 
    console.log('Submit is ready') 
 
    var smb = $("#cmtSubmit"); 
 
    console.log(smb); 
 
    smb.on("click", function(event) { 
 
    console.log('Click on Submit Button'); 
 
    newComment(); 
 
    }); 
 
    }); 
 
    }); 
 
}); 
 
}; 
 

 
    var searchFilter = function() { 
 
    var input, filter, table, tr, td, i, select; 
 
    input = document.getElementById("searchBar"); 
 
    filter = input.value.toUpperCase(); 
 
    table = document.getElementById("renewals"); 
 
    tr = table.getElementsByTagName("tr"); 
 
    col = $("#colFilter option:selected").val(); 
 
    
 
    for (i = 0; i < tr.length; i++) { 
 
    td = tr[i].getElementsByTagName("td")[col]; 
 
    if (td) { 
 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     tr[i].style.display = ""; 
 
     } else { 
 
     tr[i].style.display = "none"; 
 
     } 
 
    } 
 
    } 
 
    }; 
 
    
 
    var commentClick = function() { 
 
     var commentId = $(this).data("id"); 
 
     $("#txtId").val(commentId); 
 
     console.log(commentId); 
 
    }; 
 
    
 
    var newComment = function() { 
 
    var sendCmt = $("#cmtSubmit") 
 
    sendCmt.on("click", function() { 
 
     var body = $(this).val("#commentBody"); 
 
     console.log(body); 
 
     /*var deal_Id = $(this).attr("data-deal-id"); 
 
     $.ajax({ 
 
     type: "POST", 
 
     url: "https://api.azuqua.com/flo/8f2907de23ab6b0c987afeea9e25b0a7/invoke?clientToken=21efb4ba9c3d7d36e951c2af850b0fcf56cd606913c98ef342f104da1eab6bce", 
 
     data: {"comment":body, 
 
       "deal_Id":deal_Id 
 
       }, 
 
     statusCode: { 
 
      200: function(){ 
 
      window.location.reload(true); 
 
      }; 
 
     }; 
 
     });*/ 
 
    }); 
 
    }; 
 

 
    
 
    
 

私が解決しようとしている問題(にモーダルウィンドウを追加することなく、表の各行)は、コメントボタンが押された行の列からのデータを.ajax()POST呼び出し(コメントアウトされたコード部分)を介して送信するペイロードとどのように関連付けるかです。その問題の一部は、私が押しているコメントボタンをJSに理解させることにもなっています。そこから、残りの部分を把握できるはずです。

私はJSとHTMLの新機能ですので、表示されているエラーや悪い習慣を教えてください。私は何が必要なのかよくわからなかったので、私はすべてを含んでいました。

ありがとうございましたDevWorldにお手伝いください!

答えて

0

すべての行のidを一意に識別し、そこからいくつかのjQueryの魔法を使うことができます。

+0

これは、 '' 'id =" cmtOpen {{deal_id}} "' ''と書かれているHTMLの「コメント」ボタンのidでやってみたものですが、私が押しているボタン – Austen