Below code works on normal page but it doesn't work on AJAX returned content. I tried returning the script along with the content, but it didn't work. I am not using jQuery. I want it to be done in JavaScript.
window.onload=function(){
var bulkdeletebutton = document.getElementById('bulkdeletebutton');
bulkdeletebutton.addEventListener('click',function(e){
if(document.querySelectorAll('.deleteclass:checked').length==0){
alert('Please Select atleast one item to delete');
e.preventDefault();return false;
}
if(confirm('Do you really want to Delete?')){
document.getElementById('categoryform').submit();
}
e.preventDefault();
});
}
following is the ajax
<script>
window.onload=function(){
document.getElementById('categoryname').addEventListener('change', function(){
var catid = (this).value;
loadsubcategory(catid);
});
}
function loadsubcategory(catid){
var xhr = new XMLHttpRequest();
var url = 'ajaxsubcategory.php?catid='+catid;
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && (xhr.status >=200 || xhr.status <=300 || xhr.status ==304)){
document.getElementById('fromajax').innerHTML=xhr.responseText;
}
}
xhr.open('get',url,true);
xhr.send(null);
}
var catid = document.getElementById('categoryname').value;
loadsubcategory(catid);
</script>
following is the page returned using ajax
<form method="post" id="categoryform">
<table width="100%" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th width="137" nowrap="nowrap">
S&Delete
</th>
<th width="130" class="column-title">ID</th>
<th width="130" class="column-title">Name</th>
<th width="130" class="column-title">Status</th>
<th width="89" class="column-title no-link"><span class="nobr">Action</span>
</tr>
</thead>
<tbody>
{section name=i loop=$subcategories}
<tr class="even pointer">
<td class="a-center ">
<input type="checkbox" class="flat deleteclass" name="table_records">
</td>
<td class=" ">{$smarty.section.i.index+1}</td>
<td class=" ">{$subcategories[i].name}</td>
<td class=" ">{$subcategories[i].status}</td>
<td class="">
<div class="table-icons">
<a href="editsubcategory?ID={$subcategories[i].id}&act=edit" target="_blank" title="View">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
<a href="subcategories?ID={$subcategories[i].id}&act=Delete" title="Delete">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
</div>
</td>
</tr>
{sectionelse}
<tr class="even pointer">
<td colspan="8" align="center" class="a-center ">No Result Found</td>
</tr>
{/section}
<tr class="even pointer">
<td class="a-center ">
<input type="checkbox" class="flat" id="deleteall">
</td>
<td class=" "></td>
<td class=" "></td>
<td class=" "></td>
<td class=" " align='left'>
<div class="table-icons">
<input type="submit" value="delete" id="bulkdeletebutton" name="submit"/>
</div>
</td>
</tr>
</tbody>
</table>
</form>
{literal}
<script>//below functions are not working
window.onload=function(){
document.getElementById("deleteall").addEventListener('click', function(){
var list = document.getElementsByClassName('deleteclass');
if((this).checked){
alert('checked');
for(var i=0; i<list.length;i++){
list[i].setAttribute('checked',false);
}
}else{
for(var i=0; i<list.length;i++){
list[i].setAttribute('checked',true);
}
}
});
document.getElementById('bulkdeletebutton').addEventListener('click',function(e){
if(document.querySelectorAll('.deleteclass:checked').length==0){
alert('Please Select atleast one item to select');
e.preventDefault();return false;
}
if(confirm('Do you really want to Delete?')){
document.getElementById('categoryform').submit();
}
e.preventDefault();
});
}
</script>
{/literal}
I have already referred
jQuery click() event not firing on AJAX loaded HTML elements
How to bind Events on Ajax loaded Content?
jQuery doesn't work after content is loaded via AJAX
But I don't find the answer.
