Este es el archivo function_roles.js:
var tableRoles;
document.addEventListener('DOMContentLoaded', function(){
tableRoles = $('#tableRoles').DataTable( {
"Processing":true,
"aServerSide":true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
},
"ajax":{
"url": ""+base_url+"/Roles/getRoles",
"dataSrc":""
},
"columns":[
{"data":"idrol"},
{"data":"nombrerol"},
{"data":"descripcion"},
{"data":"status"},
{"data": "options"}
],
"responsive":"true",
"bDestroy":true,
"iDisplayLength": 10,
"order":[[0,"desc"]]
});
//NUEVO ROL
formRol = document.querySelector("#formRol");
console.log(formRol);
formRol.onsubmit = function(e)
{
alert();
e.preventDefault();
var intIdRol = document.getElementById('idRol').value;
var strNombre = document.getElementById('txtNombre').value;
var strDescripcion = document.getElementById('txtDescripcion').value;
var intStatus = document.getElementById('listStatus').value;
if (strNombre == '' || strDescripcion=='' || intStatus=='')
{
swal("Atención", "Todos los campos son obligatorios", "Error");
return false;
}
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var ajaxUrl = base_url+'/Roles/setRol';
var formData = new FormData(formRol);
request.open("POST", ajaxUrl, true);
request.send(formData);
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200) {
var objData = JSON.parse(request.responseText);
if(objData.status){
$('#modalFormRol').modal("hide");
formRol.reset();
swal("Roles de usuario", objData.msg, "success");
tableRoles.ajax.reload(function(){
fntEditRol();
});
} else {
swal("Error", objData.msg, "error");
}
}
}
}
});
$('#tableRoles').DataTable();
function openModal()
{
document.querySelector('#idRol').value = "";
document.querySelector('.modal-header').classList.replace("headerUpdate", "headerRegister");
document.querySelector('#btnActionForm').classList.replace("btn-info", "btn-primary");
document.querySelector('#btnText').innerHTML = "Guardar";
document.querySelector('#titleModal').innerHTML = "Nuevo Rol";
document.querySelector("#formRol").reset();
$('#modalFormRol').modal('show');
}
window.addEventListener('load', function(){
fntEditRol();
fntDelRol();
}, false);
function fntEditRol(){
var btnEditRol = document.querySelectorAll(".btnEditRol");
btnEditRol.forEach(function(btnEditRol){
btnEditRol.addEventListener('click', function(){
document.querySelector('#titleModal').innerHTML = "Actualizar Rol";
document.querySelector('.modal-header').classList.replace("headerRegister", "headerUpdate");
document.querySelector('#btnActionForm').classList.replace("btn-primary", "btn-info");
document.querySelector('#btnText').innerHTML = "Actualizar";
var idrol = this.getAttribute("rl");
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var ajaxUrl = base_url+'/Roles/getRol/'+idrol;
request.open("GET", ajaxUrl,true);
request.send();
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200) {
var objData = JSON.parse(request.responseText);
if (objData.status)
{
document.querySelector("#idRol").value = objData.data.idrol;
document.querySelector("#txtNombre").value = objData.data.nombrerol;
document.querySelector("#txtDescripcion").value = objData.data.descripcion;
if (objData.data.status == 1)
{
var optionSelect = '<option value="1" selected class="notBlock">Activo</option>';
}else{
var optionSelect = '<option value="2" selected class="notBlock">Inactivo</option>';
}
var htmlSelect ='${optionSelect}
<option value="1">Activo</option>
<option value="2">Inactivo</option>
';
document.querySelector("#listStatus").innerHTML = htmlSelect;
$('#modalFormRol').modal('show');
}else{
swal("Error", objData.msg, "error");
}
}
}
});
});
}
function fntDelRol(){
var btnDelRol = document.querySelectorAll(".btnDelRol");
btnDelRol.forEach(function(btnDelRol){
btnDelRol.addEventListener('click', function(){
var idrol = this.getAttribute("rl");
swal({
title: "Eliminar rol",
text: "¿Realmente quiere eliminar el rol?",
type: "warning",
showCancelButton: true,
confirmButtonText: "Si, eliminar!",
calcelButtontext: "No, cancelar!",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if(isConfirm){
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var ajaxUrl = base_url+'/Roles/delRol/';
var strData = "idrol="+idrol;
request.open("POST",ajaxUrl,true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(strData);
request.onreadystatechange = function(){
if(request.readyState = 4 && request.status == 200){
var objData = JSON.parse(request.responseText);
if(objData.status){
swal("Eliminar!", objData.msg, "success");
tableRoles.ajax.reload(function(){
fntEditRol();
fntDelRol();
});
} else{
swal("Atencion!", objData.msg, "error");
}
}
}
}
});
});
});
}
y este es el archivo del modal:
<!-- Modal -->
<div class="modal fade" id="modalFormRol" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header headerRegister">
<h5 class="modal-title" id="titleModal">Nuevo Rol</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="tile">
<div class="tile-body">
<form id="formRol" name="formRol">
<input type="hidden" id="idRol" name="idRol" value="">
<div class="form-group">
<label class="control-label">Nombre</label>
<input class="form-control" id="txtNombre" name="txtNombre" type="text" placeholder="Nombre del rol" required="">
</div>
<div class="form-group">
<label class="control-label">Descripcion</label>
<textarea class="form-control" id="txtDescripcion" name="txtDescripcion" rows="2" placeholder="Descripcion del rol" required=""></textarea>
</div>
<div class="form-group">
<label for="exampleSelect1">Estado</label>
<select class="form-control" id="listStatus" name="listStatus" required="">
<option value="1">Activo</option>
<option value="2">Inactivo</option>
</select>
</div>
<div class="tile-footer">
<button id="btnActionForm" class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i><span id="btnText">Guardar</span></button> <a class="btn btn-secondary" href="#" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times-circle"></i>Cancelar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Por si te aclara algo te mando los dos archivos.
Gracias.
</body>
o colócalo en una función que se ejecute hasta que se haya cargado el DOM.