0
저는 현재 작업중인 프로젝트에 Datatables을 사용하고 있습니다. 내 테이블 '반응 형'플러그인을 사용하여.중첩 된 HTML 버튼이 자바 스크립트를 실행하지 않습니다
This nests my data and the user needs to click a + button to expand the record. Nested within this is a textarea, some hidden fields, and a html button.이 html 버튼은 일부 자바 스크립트를 실행합니다. 반응 형 스위치가 꺼진 시간은 100 % 작동합니다. 활성화하면 더 이상 자바 스크립트가 실행되지 않습니다. 버튼이 완전히 쓸모 없게됩니다.
정말 반응 형 기능을 사용해야합니다. 중첩 될 때 내 자바 스크립트가 왜 깨지는 지 알 수 없습니다. 그것은 부모 자식 노드 또는 무언가와 관련이 있습니까? 너희들이 나를 위해 이것에 대해 밝힐 수 있기를 바란다.
여기 하나의 레코드가 있는데, 정렬 작업이 많이 필요하다는 것을 알고 있지만 Datatables는 많은 마크 업을 추가합니다. 아무 것도 남기고 싶지 않습니다. 어떤 도움을 크게 감상 할 수
<div id="frmNotifications">
</div>
<script>
$(document).ready(function() {
$('#contentTable').DataTable({
"paging": false,
"jQueryUI": true,
"responsive": true,
"scrollx": true,
"scrollY": 500,
columnDefs: [
{
targets: [ 0 ],
orderData: [ 0, 1 ]
},
{
targets: [ 1 ],
orderData: [ 1, 0 ]
},
{
targets: [ 4 ],
orderData: [ 4, 0 ]
}
]
});
//anything with the class submitComment will fire this javascript event
$('.submitComment').click(function (event) {
//Pull the record # ID that is generated from the key of the array associated with each record
var activeRecord = getId($(this).attr('name'));
//grab the associated data from given field for instance value 32 from #txtComment32
var comment = $('#txtComment' + activeRecord).val();
var lot = $('#lotNumber' + activeRecord).val();
var sublot = $('#subLot' + activeRecord).val();
var brand = $('#brand' + activeRecord).val();
//assign this data into an array
var postData = {'lot_num': lot,
'sub_lot': sublot,
'brand': brand,
'comment': comment};
//post the data to the controller if the comment field is filled out
if (comment) {
$.ajax({
url: "?url=LotReport/saveComment",
type: "POST",
data: postData,
success: function (data) {
//modal dialog status of update/insert
$('#frmNotifications').html(data);
$('#frmNotifications').dialog({
buttons: {}
})
}
});
} else {
//in case of error display modal dialog
$('#frmNotifications').html('Enter a valid comment');
$('#frmNotifications').dialog({
buttons: {}
})
}
event.preventDefault();
});
//this function strips the element name and only returns the unique id for the record. For instance: #txtComment32 after this function will return (int)32
//we then append this value to all the other fields so we can pull data from them.kk
function getId(value) {
value = value.replace(/[^\d.]/g, '');
value = parseInt(value);
return value;
}
});
</script>
:
<table>
<thead>
<tr>
<th colspan="3" align="center"/>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="7be885">< 5</td>
<td bgcolor="f0ee48">6 - 7</td>
<td bgcolor="e87b7b">> 7</td>
</tr>
</tbody>
</table>
<div id="contentTable_wrapper" class="dataTables_wrapper no-footer">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr">
<div id="contentTable_filter" class="dataTables_filter">
<label>
Search:
<input type="search" class="" placeholder="" aria-controls="contentTable"/>
</label>
</div>
</div>
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1234px; padding-right: 0px;">
<table width="90%" class="dt-responsive dataTable no-footer" cellspacing="0" role="grid" style="margin-left: 0px; width: 1234px;">
<thead>
<tr role="row">
<th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 52px;" aria-sort="ascending" aria-label="Prod #:: activate to sort column descending">
<div class="DataTables_sort_wrapper">
Prod #:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 51px;" aria-label="Origin:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Origin:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 218px;" aria-label="Description:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Description:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<td class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 88px;" aria-label="Commodity:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Commodity:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</td>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 86px;" aria-label="Brand:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Brand:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 58px;" aria-label="Vendor:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Vendor:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 30px;" aria-label="WH:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
WH:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 69px;" aria-label="Date:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Date:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 85px;" aria-label="Lot-Sublot:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Lot-Sublot:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 44px;" aria-label="Code:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Code:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 31px;" aria-label="OH:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
OH:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="overflow: auto; height: 500px; width: 100%;">
<table width="90%" id="contentTable" class="dt-responsive dataTable no-footer collapsed dtr-inline" cellspacing="0" role="grid" aria-describedby="contentTable_info" style="width: 1234px;">
<thead>
<tr role="row" style="height: 0px;">
<th class="sorting ui-state-default sorting_asc" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 52px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-sort="ascending" aria-label="Prod #:: activate to sort column descending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Origin:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 218px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Description:: activate to sort column ascending">
<td class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 88px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Commodity:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 86px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Brand:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 58px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Vendor:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 30px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="WH:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 69px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Date:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 85px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Lot-Sublot:: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
<div class="DataTables_sort_wrapper">
Lot-Sublot:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</div>
</th>
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 44px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Code:: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
<div class="DataTables_sort_wrapper">
</div>
</th>
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 31px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="OH:: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
<div class="DataTables_sort_wrapper">
</div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td class="sorting_1 sorting_2">00184</td>
<td>NC</td>
<td>MICRO SWEET POTATO</td>
<td>SWEET POTATO</td>
<td/>
<td>SCOFA</td>
<td>GA</td>
<td>/ /</td>
<td bgcolor="e87b7b">79169201-</td>
<td/>
<td>0</td>
</tr>
<tr class="child">
<td class="child" colspan="11">
<ul data-dtr-index="35">
<li data-dtr-index="11">
<span class="dtr-title">Commit::</span>
<span class="dtr-data">0</span>
</li>
<li data-dtr-index="12">
<span class="dtr-title">Avail::</span>
<span class="dtr-data">0</span>
</li>
<li data-dtr-index="13">
<span class="dtr-title">Expect::</span>
<span class="dtr-data">0</span>
</li>
<li data-dtr-index="14">
<span class="dtr-title">Cost::</span>
<span class="dtr-data">$0.00</span>
</li>
<li data-dtr-index="15">
<span class="dtr-title">Ext Cost::</span>
<span class="dtr-data">$0.00</span>
</li>
<li data-dtr-index="16">
<span class="dtr-title">Comments::</span>
<span class="dtr-data">
<textarea rows="2" cols="50" id="txtComment35" name="txtComment35"/>
<button type="button" class="submitComment" name="btnSubmit35" id="btnSubmit35">Save</button>
<input type="hidden" name="lotNumber35" id="lotNumber35" value="79169201"/>
<input type="hidden" name="subLot35" id="subLot35" value=" "/>
<input type="hidden" name="brand35" id="brand35" value=" "/>
</span>
</li>
</ul>
</td>
</tr>
여기 내 자바 스크립트입니다. 감사합니다
편집 :
나는 Datatables이 같은 기록이 보인다 내 테이블을 처리하지 않고, 페이지 소스 볼 경우:
이<td>
<textarea rows="2" cols="50" id="txtComment0"
name="txtComment0"></textarea>
<button type="button" class="submitComment" name="btnSubmit0"
id="btnSubmit0">Save
</button>
<input type="hidden" name="lotNumber0" id="lotNumber0"
value="79153801">
<input type="hidden" name="subLot0" id="subLot0"
value="R0">
<input type="hidden" name="brand0" id="brand0"
value="WALT ">
</td>
이에 대한 나의 PHP는 다음과 같습니다
<textarea rows="2" cols="50" id="txtComment<?= $key ?>"
name="txtComment<?= $key ?>"><?php if (isset($data2->Comment)) {
echo $data2->Comment;
} ?></textarea>
콘솔에 오류가 있습니까? – pmandell
js 콘솔에서 @pmandell 오류가 없습니다 – Waragi
작동중인 (작동하지 않는) 샘플을 작성할 수 있습니까? js 파일이나 뭐? – Ted