Click here to Skip to main content
15,887,898 members
Search within:


Datatable in modal form suddenly not function
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
jQuery
I have a datatable, from DataTable pluggin of JQuery.
In a modal form i have one datatable that had worked perfectly until one day.


Other details is that the html code is generated, as you can see in the image below:

https://ibb.co/qy6hcnS
I have other modal like this but with other table of customer accounts and it works perfectly:

JavaScript
 $(window).on('shown.bs.modal', function() { 

 $('#resultadomodalCC_filter label input').focus();

     });
$(document).ready(function() {  
 
 $("a[name=agregar]").on('click',function(){
          
           var id = $(this).attr("id");
            var acta = $("input[name="+id+"]").val();
          
        $.ajax({
        type: "POST",
            url: "../gestionn/views/modules/cliente/procesodeuda.php",
            data: {"accion":"acreditar","idc":id,"monto":acta,"sesion":$("#sesion").val()}, 
          

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
        window.location.reload();
            }
            });
});
    accion="listar";
	 $.ajax({
	  
            type: "POST",
            url: "../gestionn/views/modules/cliente/includes/editarCliente.php",
            data: { "accion": accion}, 
            dataType: "json",
error: function(){
                alert("error petición ajax");
            },
            success: function(data){
                 t=  $('#resultadomodalCC').DataTable({
 
    data:data,
               
 
        columns: [
        {data:"CUIT", title: "CUIT" },
        {"data": "nombre", title: "NOMBRE " },
        {"data": "deduda", title: "DEUDA" },
        {"title": "ENTREGO" ,  render: function (data, type, row,meta) {
            return '<input type="text" name="'+row.idcliente+'" class="editableM"/>';
            $(".editableM").maskMoney({prefix:'$', allowNegative: true, thousands:',', decimal:'.', affixesStay: false});
         } },
        {title: "PAGO",  render: function (data, type, row,meta) {
            return "<a class='btn btn-primary' id="+row.idcliente+" name='agregar' >+</a>";
            
         }  }
         ],
 
        language:{
                        "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"
                        }
                        },
   
          responsive: true }); } });
    });


in the template.php file, the main file i have:

PHP
<?php error_reporting(E_ALL);
ini_set('display_errors', '1');?>
<html>
<head>
   <title>GESTION</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="exit.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <!-- jQuery CDN - Slim version (=without AJAX) -->
     <script src="includes/jquery-3.3.1.js"></script>
    <!-- Popper.JS -->
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
<script src="views/jquery.maskMoney.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"/>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
  <div class="modal fade" id="modalstockprod" role="dialog">
    <div class="modal-dialog modal-lg"style="width: 75%;">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
<h4 class="modal-title">BUSQUEDA DE ARTICULO</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
                
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">CERRAR</button>
            </div>
        </div>
    </div>
</div>
  <div class="modal fade" id="myModala" role="dialog">
    <div class="modal-dialog modal-lg"style="width: 75%;">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
<h4 class="modal-title">BUSQUEDA DE ARTICULO</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
                
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">CERRAR</button>
            </div>
        </div>
    </div>
</div>
  <div class="modal fade" id="myModalCC" role="dialog">
    <div class="modal-dialog modal-lg"style="width: 75%;">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
<h4 class="modal-title">CUENTAS</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
                
            </div>
            <div class="modal-bodyCC">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">CERRAR</button>
            </div>
        </div>
    </div>
</div>
 <nav class = "navbar" role = "navigation">
         <div class = "navbar-header" >
         
            <a class = "navbar-brand" href = "#">GESTION WEB</a>
          <button type="button" id="sidebarCollapse" class="navbar-btn">M</button>
         </div>
         <div>
          <ul class="nav navbar-top-links navbar-right">
                
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                         <?php echo " " .$_SESSION ['username']; ?> 
                    </a>
                    <ul class="dropdown-menu dropdown-user" >
                        
                        
                        <li><a  id="exit"></div>

        <div class="sidebar-header">
            <h3>MENU PRINCIPAL</h3>
        </div>

        <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#myModala" href="" >
             ^__i class="glyphicon glyphicon-search"__^</i__^<span  id="art"> ARTICULO - F2</span>
        </a>
            </ul>
                <ul>
                <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#miModals" href="" >
            ^__i class="fas fa-wrench"__^<span  id="serv"> SERVICIO - F7</span>
        </a>
            </ul>
                <ul>  
                
            <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#myModalCC" href="" >
             ^__i class="glyphicon glyphicon-list"__^<span  id="CC"> CUENTAS   - F4</span>
        </a>
            </ul></ul></ul>
                <ul>  
            <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" href="" >
             ^__i class="glyphicon glyphicon-usd"__^<span  id="VENTA"> VENTA   -   F6</span>
        </a>
            </ul> </ul>       
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">   ^__i class="glyphicon glyphicon-plus"__^
      <span>ABM</span></a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href="index.php?controller=cliente&action=index">
        ^__i class="glyphicon glyphicon-user"__^<span>Cliente</span>
        </a></li>
        <li><a href="index.php?controller=articulo&action=index">
        ^__i class="glyphicon glyphicon-list-alt"__^<span>Articulo</span>
        </a>
               
                </li>
        <li ><a class="opcion" href="index.php?controller=proveedor&action=index"> ^__i class="glyphicon glyphicon-user"__^<span>Proveedores</span></a></a></li>
       <!-- <li ><a href="index.php?controller=envase&action=todos">^__i class="fas fa-prescription-bottle"__^Envases</a></li>
        <li ><a href="index.php?controller=medida&action=index">^__i class="fas fa-ruler"__^Medidas</a></li>
        <li ><a href="index.php?controller=canilla&action=index">^__i class="fas fa-oil-can"__^Canillas</a></li> --!>
       <li ><a class="opcion" href="index.php?controller=user&action=index"> ^__i class="glyphicon glyphicon-user"__^<span>Usuarios</span></a></li>
      </ul>
    </li>


    </li>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">^__i class="fas fa-cash-register"__^ Estado de cajas</a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href="">^__i class="fas fa-money-check"__^Chequera</a></li>
         <li><a href="index.php?controller=caja&action=index">^__i class="fas fa-cash-register"__^CAJA</a></li>
    <!--    <li><a class="opcion" href="index.php?controller=caja&action=gasto">^__i class="fas fa-sign-out-alt"__^Nuevo Gasto</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=abrir">^__i class="fas fa-lock-open"__^Abrir caja</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=index">^__i class="fas fa-lock"__^Cerrar caja</a></li>
       --> <li><a class="opcion" href="index.php?controller=cliente&action=cuenta">^__i class="fas fa-file-invoice-dollar">Cuenta Corriente</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=indexgrande">^__i class="fas fa-file-invoice">Caja Grande</a></li>
        <li><a class="opcion" href="">^__i class="far fa-credit-card">Posnet</a></li>
      </ul>
    </li>

<li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">^__i class="fas fa-store">Compra de stock</a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href="index.php?controller=stock&action=index">Productos</a></li>
        <li><a class="opcion" href="index.php?controller=stock&action=indexb">Barril</a></li>
        <li><a class="opcion" href="index.php?controller=stock&action=canilla">Cambio de canilla</a></li>
      </ul>
    
    </li>
  </ul>


      <input type="hidden" id="cajero" value="<?php if (isset($_SESSION["userid"])){
        
        echo $_SESSION['userid'];
      }?>"/> 
       <input type="hidden" id="sesion" value="<?php if (isset($_SESSION["idsesion"])){
        
        echo $_SESSION['idsesion'];
      }?>"/> 
       <input type="hidden" id="inicio" value="<?php if (isset($_SESSION["inicio"])){
        
        echo $_SESSION['inicio'];
      }?>"/> 

    </nav>
 
    <!-- Page Content -->
    <div id="content">

   <?php  if (isset($_GET['controller'])&&isset($_GET['action'])) {

        $controller=$_GET['controller'];

        $action=$_GET['action'];

        if (isset($_GET['id'])){
            
            $id=$_GET['id'];
            call($controller,$action,$id);
        }else{
            
        call($controller,$action,0); }

    }?>
     
    </div>
    <!-- Dark Overlay element -->
    <div class="overlay"></div>
</div>



   
</body>

</html>

some suggest?

What I have tried:

The code of modalform is this:

JavaScript
<pre>$(window).on('shown.bs.modal', function() { 

 $('#resultadomodala_filter label input').focus();

  $('#resultadomodala_filter input').on('keypress', function(event){
   
     if (event.keyCode ===13){
        
           $('.cantidad:first').focus();
         }
     });});
$(document).ready(function() {

     $.ajax({
	  
            type: "POST",
            url: "../gestionn/views/modules/articulo/filtroP.php",
            data: { "tf": "todos"}, 
            dataType: "json",
            error: function(){
                alert("error petición ajax");
            },
            success: function(data){
                
           t=  $('#resultadomodala').DataTable({

    data:data,
 
        columns: [
        {"data":"codalfa", title: "COD.:" },
        {"data": "nombre", title: "NOMBRE" },
        {"data": "marca", title: "MARCA" },
        {"title": "P/U" ,  render: function (data, type, row,meta) {
            return '<label class="editable">$ '+row.precio+'</label>';
         } },
        {"data": "detalle", title: "CAT.:" },
        {"data": "subcategoria", title: "SUBCAT.:" },
          {  title:"CANT",
              data:null,
                render: function (data, type, row,meta) {
            return "<input type='text' style='width:50px;' name='"+row.idproducto+"' class='cantidad' value='1' tabindex='3' placeholder='cant'/>";
   
            }},
               {  title:"AGREGAR",
              data:null,
                render: function (data, type, row,meta) {
            return "<a  class='btn btn-primary' onclick='agregarProducto("+row.idproducto+");' name='agregar' >+</a>";
   
            }}
    ], 
 
  
  
    language:{
                        "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"
                        }
                        },
   
          responsive: true });

        },
    });

});
 function agregarProducto(idproducto){
    var cantidad=0;
    cantidad=$("input[name="+idproducto+"]").val();
    
    id=idproducto;
   
  
         if (cantidad!==""){
    var accion = "agregar";
 
    $.ajax({
	  
            type: "POST",
            url: "/gestionn/views/modules/facta/procesoFactA.php",
            data: {"accion":accion,"id":id,"cant":cantidad}, 
         

            error: function(){
                alert("error petición ajax");
            },
            success:function(){
                window.location.href="index.php?controller=facturaa&action=index";
            },
           
        });





    
  } else{
    alert("ingrese cantidad");
  }

}

But i have been prooving the same code passing a JSON Array instead of ajax request:

http://live.datatables.net/puxiyotu/1/edit

and as you can see it works perfectly.
Posted
Updated 3-Nov-19 5:30am
v2
Add a Solution
Comments
RickZeeland 3-Nov-19 3:25am    
Did you try in another browser ?
Member 10177561 3-Nov-19 7:16am    
Obviously.. But is the same
Richard Deeming 5-Nov-19 10:36am    
Check your browser's developer console for errors.

Check the network tab to see what your AJAX request is doing.

If it was working, and then stopped, then something must have changed. Either you changed the code, or you changed the database, or you updated the browser. Try to work out what changed when the code stopped working to see if that gives you any clues.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise
Privacy
Cookies
Terms of Use
Last Updated 3 Nov 2019
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900