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にお手伝いください！
これは、 '' 'id =" cmtOpen {{deal_id}} "' ''と書かれているHTMLの「コメント」ボタンのidでやってみたものですが、私が押しているボタン – Austen