Datatables works and the follow day doesn't work

Datatables works and the follow day doesn't work

temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
edited July 2014 in Free community support

I have one datatable loaded with PHP. I created it on Thursday but yesterday doesn't work. I haven't changed anything in the code.
I have the following code:
<head>

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="css/styles.css">

    <link rel="stylesheet" href="css/demo_page.css">

    <link rel="stylesheet" href="css/jquery.dataTables.css">

    <link rel="stylesheet" href="css/dataTables.tabletools.css">

    <link rel="stylesheet" href="css/dataTables.editor.css">

    <script src="js/bootstrap.min.js"></script>

    <script src="js/jquery.js"></script>

    <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/ZeroClipboard.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/TableTools.js"></script>

    <script type="text/javascript">

        function mostrar(id) {

            var d = document.getElementById(id);

            d.style.display = "block";

            d.style.visibility = "visible";

        }

        function ocultar(id) {

            var d = document.getElementById(id);

            d.style.display = "none";

            d.style.visibility = "hidden";

        }

        window.onload = function () {

            ocultar("ad");

            ocultar("ed");

            ocultar("de");

        }

        $(document).ready( function () {

            var oTable=$('#COMPONENTES').dataTable( {

                "sDom": 'T<"clear">lfrtip',

                "oTableTools": {

                    "sRowSelect": "single"

                },

                "aoColumnDefs": [

                    { "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] },

                    { "bVisible": false, "aTargets": [ 0 ] }

                ]

            } );

            oTable.$('tr').click( function () {

                var data = oTable.fnGetData( this );

                var codigo=data[0];

                var nombre=data[1];

                var precio=data[2];

                var ruta=data[3];

                $("#codigo1").val(codigo); 

                $("#codigo2").val(codigo);

                $("#nombre1").val(nombre);

                $("#nombre2").val(nombre);

                $("#precio1").val(precio);

                $("#precio2").val(precio);

                $("#ruta").val(ruta);

                load();

              } );

        } );

    </script>

</head>

    <body>

                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="COMPONENTES" width="100%">

            <?php

                $ver=new Datatables;

                $ver->verComponentes();

            ?>

             </table>

The PHP code for load the datatable is the following:

function verComponentes(){

        include"conexion.php";

        $mysqli=new mysqli($servidor, $usuario, $clave, $basedatos);    

        $mysqli->set_charset("latin1");

        if($mysqli->connect_error){

            echo "Error nº ".$mysqli->connect_errno.": ".$mysqli->connect_error;

        }

        if($result=$mysqli->query("SELECT id, nombre, precio, imagen FROM 

componentes")){

            echo "<thead>";

            echo "<th>Codigo</th>";

            echo "<th>Nombre</th>";

            echo "<th>Precio</th>";

            echo "<th>Ruta</th>";

            echo "</thead>";

            echo "<tbody>";

            while($row=$result->fetch_array()){ 

                echo "<tr>";

                    echo "<td>".$row["id"]."</td>";

                    echo "<td>".$row["nombre"]."</td>";

                    echo "<td>".$row["precio"]."</td>";

                    echo "<td>".$row["imagen"]."</td>";

                echo "</tr>";

            }

            echo "</tbody>";

        }

        else{

            echo $mysqli->errno, $mysqli->error;

        }

        mysqli_close($mysqli);

    } 

Replies

  • allanallan Posts: 63,512Questions: 1Answers: 10,472 Site admin

    Hi,

    Have you checked the debug console in your browser. It's possible an error is being throw, particularly if you are using the Editor trial and it has just expired. The console will show a message if that is the case.

    Allan

  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0

    Hi Allan, I haven't used the editor. I Copy the code and the js files from other website. In this wbsite all works but in this doesn't.

  • allanallan Posts: 63,512Questions: 1Answers: 10,472 Site admin

    Thanks for the clarification. In that case we would need a link to the page to be able to debug what is going wrong.

    Allan

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    There are many errors in your HTML. DataTables requires valid HTML code.

  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    edited July 2014

    I can't see the errors but datatables works with this code and one day it doesn't work without any change

  • allanallan Posts: 63,512Questions: 1Answers: 10,472 Site admin

    If you look at the Javascript console in your browser you will see the problem:

    [Error] TypeError: 'undefined' is not a function (evaluating '$('#COMPONENTES').dataTable')

    The underlaying issue, is that, for whatever reason, jQuery is being loaded twice on the page. The second one is overwriting the first, which has DataTables attached to it.

    Allan

  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    edited July 2014

    I changed the jquery import and I coment the bootstrap import. Then I was debugging and I have other error now:

    TypeError: $(...).dataTable is not a function

  • allanallan Posts: 63,512Questions: 1Answers: 10,472 Site admin

    Look at the source - it is still importing jQuery twice...

    Allan

This discussion has been closed.