Nested HTML button will not execute javascript
Question
I'm using Datatables for a project I'm working on. I have my table using the 'responsive' plugin.
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. This html button executes some javascript. It works 100% of the time when I have responsive turned off. When I enabled it, it will no longer execute any javascript. The button becomes totally useless.
I really need to use the responsive feature. I cannot figure out why it breaks my javascript when it becomes nested. Does it have something to do with parent child nodes or something? I'm hoping you guys can shed some light on this for me.
Here is one record, I know it's a lot to sort through, but Datatables adds a lot of markup, I didn't want to leave anyout.
<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>
Here is my javascript:
<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>
Any help would be greatly appreciated. Thanks
EDIT:
If I view source the page, without the Datatables processing my table a record looks like:
<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>
My PHP for this is:
<textarea rows="2" cols="50" id="txtComment<?= $key ?>"
name="txtComment<?= $key ?>"><?php if (isset($data2->Comment)) {
echo $data2->Comment;
} ?></textarea>
2 answers
solution1
2 ACCPTED 2014-12-12 16:46:54
I think your click handler needs to be delegated .
Try adding this listener after the other .submitComment listener to test it.
$(".dataTables_scrollBody").on("click",".submitComment",function(event){
alert('abc');
});
If it works, replace alert with your code. Note that the event object and this will behave slightly different.
To understand this better, play around with: http://jsfiddle.net/1awnjewn/1/
solution2
0 2014-12-12 16:31:47
<textarea> is not self-closing, so you must write it as <textarea ...></textarea> instead of <textarea .../> .
Therefore, in your current code, the following button and input declarations are not elements, but they are part of the textarea's value:
<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=" "/>
In this case, the textarea doesn't close until its parent element is closed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
html button execute jquery and javascript?
Execute Javascript code on HTML button click
How do I execute a JavaScript function from clicking an HTML button?
How to execute JavaScript and Django concurrently from a single HTML button?
How can I execute a JavaScript from a html button click?
Can't execute javascript on dynamically created html button
HTML/Javascript - Button takes two clicks to execute click event
Execute javascript onclick button
Execute dynamic HTML/JavaScript
execute javascript in html
Related Tags