javascript - Bootstrap switch inside datatables plugin with ajax call catch event -
i'm using datatables plugin , have problem bootstrap switch. javascript code, create switch value retrieved ajax call:
$(document).ready(function() { if ( ! $.fn.datatable.isdatatable( '#userstable' ) ) { usertable = $('#userstable').datatable({ responsive: true, //fix problem responsive table "autowidth": false, "ajax": "table", "columns": [ { "data": "username" }, { data: "enabled", render: function ( data, type, row ) { if (data) { return '<input data="username" type="checkbox" name="my-checkbox" checked>'; } else { return '<input data="username" type="checkbox" name="my-checkbox">'; } } }, { "data": "role.role"}, { "data": "clientversion.name" }, { data: null, classname: "center", defaultcontent: '<button type="button" class="btn btn-danger" id="deletelicense" data-toggle="modal" th:attr="data-href=${license.idclientlicense}" data-target="#deletelicensemodal">delete</button>' } ], "fndrawcallback": function() { //initialize checkbos enable/disable user $("[name='my-checkbox']").bootstrapswitch({size: "small", oncolor:"success", offcolor:"danger"}); } }); } else { usertable.ajax.url("table").load(); } $('input[name="my-checkbox"]').on('switchchange.bootstrapswitch', function(event, state) { //csrf attribute spring security var token = $("meta[name='_csrf']").attr("content"); var header = $("meta[name='_csrf_header']").attr("content"); $.ajax({ type : "post", url : "status"+(this).attr("data"), data : form.serialize(), beforesend:function(xhr) { xhr.setrequestheader(header, token); }, // right rest call success : function(data) { // no exception occurred if (data.status==true){ // field right(for e.g. form value) if(data.success==true){ // il risultato sta in data.result // window.location.reload(true); //reset select 2 choise because can set old user no longer exist // reload tag id carstable, table } else{ // code if there error form example } } else { // code exception notifymessage(data.result, 'error'); } }, // error during rest call error : function(data) { window.location.href = "/ats/500"; } }); }); }); and html code:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>administration users</title> <!-- tell browser responsive screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- spring csrf --> <meta name="_csrf" th:content="${_csrf.token}" /> <!-- default header name x-csrf-token --> <meta name="_csrf_header" th:content="${_csrf.headername}" /> <!-- bootstrap core css --> <link th:href="@{/static/assets/bootstrap/css/bootstrap.css}" rel="stylesheet"> <!-- font awesome --> <link rel="stylesheet" th:href="@{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}"> <!-- ionicons --> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <!-- datatables --> <link rel="stylesheet" th:href="@{/static/assets/plugins/datatables/datatables.bootstrap.css}"> <link rel="stylesheet" th:href="@{/static/assets/plugins/datatables/extensions/responsive/css/responsive.bootstrap.min.css}"> <!-- theme style --> <link rel="stylesheet" th:href="@{/static/assets/dist/css/adminlte.min.css}"> <!-- adminlte skins. choose skin css/skins folder instead of downloading of them reduce load. --> <link rel="stylesheet" th:href="@{/static/assets/dist/css/skins/_all-skins.min.css}"> <!-- select2 --> <link rel="stylesheet" th:href="@{/static/assets/plugins/select2/select2.min.css}"> <!-- bootstrap switch --> <link rel="stylesheet" th:href="@{/static/assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css}"> <!-- jquery 2.1.4 --> <script th:src="@{/static/assets/plugins/jquery/jquery-2.1.4.min.js}" type="text/javascript"></script> <!-- bootstrap 3.3.5 --> <script th:src="@{/static/assets/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script> <!-- datatables --> <script type="text/javascript" th:src="@{/static/assets/plugins/datatables/jquery.datatables.min.js}"></script> <script type="text/javascript" th:src="@{/static/assets/plugins/datatables/datatables.bootstrap.min.js}"></script> <script type="text/javascript" th:src="@{/static/assets/plugins/datatables/extensions/responsive/js/datatables.responsive.min.js}"></script> <script type="text/javascript" th:src="@{/static/assets/plugins/datatables/extensions/responsive/js/responsive.bootstrap.min.js}"></script> <!-- page script --> <!-- slimscroll --> <script type="text/javascript" th:src="@{/static/assets/plugins/slimscroll/jquery.slimscroll.min.js}"></script> <!-- fastclick --> <script type="text/javascript" th:src="@{/static/assets/plugins/fastclick/fastclick.min.js}"></script> <!-- bootstrap-growl --> <script type="text/javascript" th:src="@{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script> <!-- adminlte app --> <script type="text/javascript" th:src="@{/static/assets/dist/js/app.min.js}"></script> <!-- adminlte demo purposes --> <script type="text/javascript" th:src="@{/static/assets/dist/js/demo.js}"></script> <!-- select2 --> <script type="text/javascript" th:src="@{/static/assets/plugins/select2/select2.full.min.js}"></script> <!-- bootstrap switch --> <script type="text/javascript" th:src="@{/static/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js}"></script> <script type="text/javascript" th:src="@{/static/assets/js/user.js}"></script> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <!-- header nd menu fragment --> <div th:replace="../fragments/dashboard-header :: dashboard-header"></div> <!-- content wrapper. contains page content --> <div class="content-wrapper"> <!-- content header (page header) --> <section class="content-header"> <h1>administration</h1> <ol class="breadcrumb"> <li><a th:href="@{/}"><i class="fa fa-dashboard"></i> home </a></li> <li class="active">user</li> </ol> </section> <!-- main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">users</h3> </div> <!-- /.box-header --> <div class="box-body"> <!-- -users table --> <table id="userstable" class="table table-bordered table-striped"> <thead> <tr> <th>username</th> <th>enable</th> <th>role</th> <th>version</th> <th>delete</th> </tr> </thead> </table> <!-- create 2 equals button because when on desktop show text add fleet otherwise + , tooltip. need because otherwise text goes out button --> <button id="adduserbutton" type="button" class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11" data-toggle="modal" data-target="#addusermodal">add user</button> <button id="addlicensebutton" type="button" class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11" data-toggle="modal" data-target="#addusermodal"> <span class="glyphicon glyphicon-plus" data-toggle="tooltip" title="add user"></span> </button> </div> </div> </div> <!-- /.col --> </div> <!-- /.row --> </section> <!-- /.content --> </div> </div> </body> </html> i read several questions , answer think problem linked "fndrawcallback": function() because tried solutions , none worked. might switch isn't correctly setted? table 
cause
pages other first not exist in dom @ time of initialization, why handler never gets called.
solution
you need use event delegation providing selector second argument in on() call, see example below:
$('#userstable').on('switchchange.bootstrapswitch', 'input[name="my-checkbox"]', function(event, state) { // ... skipped ... }); from jquery on() method documentation:
delegated events have advantage can process events descendant elements added document @ later time.
see "direct , delegated events" in jquery on() method documentation , jquery datatables – why click event handler not work more information.
notes
custom controls , responsive extension require special handling. if column containing custom control becomes hidden or visible, should re-initialized. see jquery datatables – responsive extension , custom controls more information.
Comments
Post a Comment