文章/答案/技术大牛

发布

社区首页 >问答首页 >仅在DataTable的第一个表中附加了RadioButtons事件

问仅在DataTable的第一个表中附加了RadioButtons事件
EN

Stack Overflow用户

提问于 2017-08-09 23:47:59

回答 1查看 60关注 0票数 1

我已经在这个问题上寻找了几天的解决方案，到目前为止还没有成功。

我使用两个Bootstrap Modal中包含的带有DataTables的javascript动态填充了三个表，其中我有单选按钮来启用或禁用要使用Jquery和javascript编辑/删除的行，但由于某些原因，只有第一页中的单选按钮有事件，而不同页面中的其他单选按钮什么也不做。

这是我的jsp代码：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:include page="/RetreiveAlumno" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Consulta de alumnos</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

    <link rel="stylesheet" type="text/css" href="./css/prueba.css">
</head>
<body>

    <%@ include file="/WEB-INF/jspf/header.jspf" %>

    <div class="container">
        <div class="jumbotron">
            <h1>Consulta de alumnos</h1>
            <p></p>
            <form name="alumno" id="alumno" method="GET" action="RetreiveAlumno">
                <input type="submit" value="refrescar" />
            </form>
        </div>
        <div class="table-responsive">
            <div class="col-md-10">
                <table class="table table-condensed display" id="TablaAlumno">
                    <thead>
                        <tr>
                            <td><b>Nombre</b></td>
                            <td><b>Apellido paterno</b></td>
                            <td><b>Apellido materno</b></td>
                            <td><b>Carrera</b></td>
                            <td><b>Genero</b></td>
                        </tr>
                    </thead>
                    <%@ include file="/WEB-INF/jspf/tabla.jspf" %>
                </table>
            </div>
            <div class="col-md-2">
                <table class="table table-condensed" id="TablaAlumno">
                    <tr><td><b>Opciones</b></td></tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-primary btn-md btn-lang" data-toggle="modal" data-target="#Editar">
                                <span class="glyphicon glyphicon-pencil"></span>  Editar
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-danger btn-md btn-lang" data-toggle="modal" data-target="#Eliminar">
                                <span class="glyphicon glyphicon-trash"></span>  Eliminar
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <%@ include file="/WEB-INF/jspf/ModalMod.jspf" %>
    <%@ include file="/WEB-INF/jspf/ModalEli.jspf" %>

    <div class="loader">
    </div>

    <script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
    <script>window.jQuery || document.write('<script src="./js/jquery-3.2.1.min.js"><\/script>');</script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootbox.min.js"></script>
    <script src="./js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="./js/consultascript.js"></script>
</body>
</html>

Header.jspf

<%@ page pageEncoding="UTF-8" %>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">Front-End (Servlet)</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="registro.jsp">Registro</a></li>
            <li><a href="consulta.jsp">Consulta</a></li>
        </ul>
    </div>
</div>
</nav>

tabla.jspf

<%-- any content can be specified here e.g.: --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page pageEncoding="UTF-8" %>
<tbody>
<c:forEach items="${alumnos}" var="item">
    <tr>
        <td>${item.nombre}</td>
        <td>${item.ap_pat}</td>
        <td>${item.ap_mat}</td>
        <td>
            <c:choose>
                <c:when test="${item.carrera == 1}">
                    <p>SISTEMAS COMPUTACIONALES</p>
                </c:when>
                <c:when test="${item.carrera == 2}">
                    <p>QUIMICA</p>
                </c:when>
                <c:when test="${item.carrera == 3}">
                    <p>MECATRONICA</p>
                </c:when>
                <c:when test="${item.carrera == 4}">
                    <p>ELECTRONICA</p>
                </c:when>
                <c:when test="${item.carrera == 5}">
                    <p>ELECTROMECANICA</p>
                </c:when>
                <c:when test="${item.carrera == 6}">
                    <p>INDUSTRIAL</p>
                </c:when>
                <c:when test="${item.carrera == 7}">
                    <p>LOGISTICA</p>
                </c:when>
                <c:when test="${item.carrera == 8}">
                    <p>GESTION EMPRESARIAL</p>
                </c:when>
                <c:when test="${item.carrera == 9}">
                    <p>TICS</p>
                </c:when>
                <c:when test="${item.carrera == 10}">
                    <p>MAESTRIA EN CIENCIAS DE LA INGENIERIA</p>
                </c:when>
                <c:when test="${item.carrera == 11}">
                    <p>MAESTRIA EN CIENCIAS DE LA INGENIERIA AMBIENTAL</p>
                </c:when>
                <c:when test="${item.carrera == 12}">
                    <p>DOCTORADO EN CIENCIAS AMBIENTALES</p>
                </c:when>
            </c:choose>
        </td>
        <td>
            <c:if test="${item.genero}">
                <p>Hombre</p>
            </c:if>
            <c:if test="${!item.genero}">
                <p>Mujer</p>
            </c:if>
        </td>
    </tr>
</c:forEach>
</tbody>

modalmod.jspf

<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="UTF-8" %>
<div id="Editar" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Editar</h4>
        </div>
        <div class="modal-body">
            <p>¿Cuál es la tabla a modificar?</p>
            <form id="alu">
                <table id="TablaEdit" class="table table-condensed display">
                    <thead>
                        <tr>
                            <td><b>Opcion</b></td>
                            <td><b>Nombre</b></td>
                            <td><b>Apellido Paterno</b></td>
                            <td><b>Apellido Materno</b></td>
                            <td><b>Carrera</b></td>
                            <td><b>Genero</b></td>
                            <td><b>Boton</b></td>
                        </tr>
                    </thead>
                    <%@ include file="/WEB-INF/jspf/tablaMod.jspf" %>

                </table>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove"></span>  Cancelar
            </button>
        </div>
    </div>
    <div class="loader">
    </div>
</div>
</div>

modaleli.jspf

<%-- any content can be specified here e.g.: --%>
<%@ page pageEncoding="UTF-8" %>
<div id="Eliminar" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Eliminar</h4>
        </div>
        <div class="modal-body">
            <p>¿Cuál es la tabla a eliminar?</p>
            <form name="eliAlumno" id="eliAlumno" method="POST" action="DelAlumno">
                <table id="TablaElim" class="table table-condensed display">
                    <thead>
                        <tr>
                            <td><b>Opcion</b></td>
                            <td><b>Nombre</b></td>
                            <td><b>Apellido Paterno</b></td>
                            <td><b>Apellido Materno</b></td>
                            <td><b>Carrera</b></td>
                            <td><b>Genero</b></td>
                            <td><b>Boton</b></td>
                        </tr>
                    </thead>
                    <%@ include file="/WEB-INF/jspf/tablaEli.jspf" %>
                </table>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove"></span>  Cancelar
            </button>
        </div>
        <div class="loader">
        </div>
    </div>
</div>
</div>

consultascript.js

$(document).ready(function () {
var lang = {
    "sProcessing": "Procesando...",
    "sLengthMenu": "Mostrar _MENU_ registros",
    "sZeroRecords": "No se encontraron resultados",
    "sEmptyTable": "Ningún dato disponible en esta tabla",
    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
    "sInfoPostFix": "",
    "sSearch": "Buscar:",
    "sUrl": "",
    "sInfoThousands": ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst": "Primero",
        "sLast": "Último",
        "sNext": "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    }
};
$(".dep").attr('disabled', 'disabled');
$('#TablaAlumno').DataTable({
    "language": lang
});
$('#TablaElim').DataTable({
    "language": lang
});
$.fn.dataTableExt.ofnSearch['html-input'] = function (value) {
    return $(value).val();
};

var table = $("#TablaEdit").DataTable({
    columnDefs: [
        {"type": "html-input", "targets": [1, 2, 3]}
    ],
    "Language": lang
});

$("#TablaEdit td input").on('change', function () {
    var $td = $(this).parent();
    $td.find('input').attr('value', this.value);
    table.cell($td).invalidate().draw();
});
$("#TablaEdit td select").on('change', function () {
    var $td = $(this).parent();
    var value = this.value;
    $td.find('option').each(function (i, o) {
        $(o).removeAttr('selected');
        if ($(o).val() === value)
            $(o).attr('selected', true);
    });
    table.cell($td).invalidate().draw();
});

$("#alumno").submit(function (event) {
    event.preventDefault();
    document.getElementsByClassName("loader")[2].style.display = "block";
    setTimeout(receive, 3000);

    function receive() {
        document.getElementsByClassName("loader")[2].style.display = "none";
        location.reload();
    }
});

var check = 0;
function ar() {
    $(".radioButton").each(function (index) {
        if ($(this).is(":checked")) {
            check = parseInt($(this).val());
        }
    });
}
;

var checkDel = 0;
function arDel() {
    $(".radioButtonEli").each(function (index) {
        if ($(this).is(":checked")) {
            checkDel = parseInt($(this).val());
        }
    });
}
;

$(".radioButton").change(function () {
    $(".dep").attr('disabled', 'disabled');
    ar();
    $("input[name='nombre" + check + ".0']").removeAttr('disabled');
    $("input[name='ap_pat" + check + ".0']").removeAttr('disabled');
    $("input[name='ap_mat" + check + ".0']").removeAttr('disabled');
    $("select[name='carrera" + check + ".0']").removeAttr('disabled');
    $("select[name='genero" + check + ".0']").removeAttr('disabled');
    $("input[name='submit" + check + ".0']").removeAttr('disabled');
});

$(".radioButtonEli").change(function () {
    $(".dep").attr('disabled', 'disabled');
    arDel();
    $("input[name='eli" + checkDel + ".0']").removeAttr('disabled');
});

$("#alu").submit(function (event) {
    event.preventDefault();
    document.getElementsByClassName("loader")[0].style.display = "block";
    setTimeout(modify, 3000);

    function modify() {
        document.getElementsByClassName("loader")[0].style.display = "none";
        $.ajax({
            url: "ModAlumno",
            data: $("#alu").serialize(),
            type: "POST"
        })
                .done(function (json) {
                    bootbox.alert({
                        size: "small",
                        title: "Exito",
                        message: "El alumno ha sido modificado adecuadamente."
                    });
                    location.reload();
                })
                .fail(function (xhr, status, errorThrown) {
                    bootbox.alert({
                        size: "large",
                        title: "Error",
                        message: "El alumno no se modifico adecuadamente\n\
información del error: <br>" + errorThrown
                    });
                });
    }
});
$("#eliAlumno").submit(function (event) {
    event.preventDefault();
    document.getElementsByClassName("loader")[1].style.display = "block";
    setTimeout(del, 3000);

    function del() {
        document.getElementsByClassName("loader")[1].style.display = "none";
        $.ajax({
            url: "DelAlumno",
            data: $("#eliAlumno").serialize(),
            type: "POST"
        })
                .done(function (json) {
                    bootbox.alert({
                        size: "small",
                        title: "Exito",
                        message: "El alumno ha sido eliminado adecuadamente."
                    });
                    location.reload();
                })
                .fail(function (xhr, status, errorThrown) {
                    bootbox.alert({
                        size: "large",
                        title: "Error",
                        message: "El alumno no se eliminó adecuadamente\n\
información del error: <br>" + errorThrown
                    });
                });
    }
});
});

编辑:似乎每个页面都有另一组独立于其他页面但没有事件的RadioButtons

twitter-bootstrap

jsp

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2017-08-10 00:35:47

从外观上看，正在发生的事情是，您的事件并不绑定到动态元素。您需要将您的事件绑定到始终存在的元素。尝试像这样绑定您的事件：

$(document).on('event','.radiobuttonclass', function(e){
   //code for event here.
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45595307

复制

相似问题

问仅在DataTable的第一个表中附加了RadioButtons事件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅在DataTable的第一个表中附加了RadioButtons事件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅在DataTable的第一个表中附加了RadioButtons事件
EN