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를 얻고 있으며, 거기에서 나머지를 파악할 수 있어야한다고 생각합니다.
나는 JS와 HTML에 매우 익숙하다. 그래서 내가보고있는 어떤 오류나 나쁜 습관에 대해서 알려주기 바란다. 나는 아직도 배우고있다! 나는 무엇이 필요할 것이 확실하지 않았기 때문에 모든 것을 포함 시켰습니다.
DevWorld에 협조 해 주셔서 감사합니다!
그게'''id = "cmtOpen {{deal_id}}"'''라고 말한 HTML의 'Comment'버튼의 ID로하려했으나 JS가 인식하게하는 문제입니다 내가 누르는 버튼 – Austen