Problem upgrading from 1.9.4 to 1.10.5

micheld88 · March 2015

Hello.
My code was working fine with version 1.9.4. So I've upgraded to 1.10.5. But now I get a b.ntablewrapper is null the second time my code is executed.
Here is the code concerning Datatables:

$(document).ready(function() {
...
    $('#form').submit( function() {
            var id = $('#sql_req').children(":selected").attr("id");
            var val = $('#sql_req').children(":selected").text();
            if (id != 0) {

              $("body").css("cursor", "wait");
              $.ajax({
                  url: "getquery.php?reqsql="+encodeURIComponent(val),
                  dataType:'JSON',
                  success:function(json){
                         $("#example").find('thead tr th').remove(); 
                         $("#example").dataTable( {
                              "oLanguage": {
                                  "sEmptyTable":     "Pas de donn&eacute;es dans la table",
                                  "sInfo":           "Visualisation des enregistrements _START_ &agrave; _END_ sur un total de _TOTAL_",
                                  "sInfoEmpty":      "Visualisation des enregistrements 0 &agrave; 0 sur un total de 0",
                                  "sInfoFiltered":   "(filtr&eacutes sur _MAX_ enregistrements au total)",
                                  "sInfoPostFix":    "",
                                  "sThousands":      " ",
                                  "sLengthMenu":     "Afficher _MENU_ lignes par page",
                                  "sLoadingRecords": "Chargement...",
                                  "sProcessing":     "Traitement en cours...",
                                  "sSearch":         "Rechercher:",
                                  "sZeroRecords":    "Aucun enregistrement trouv&eacute;",
                                  "oPaginate": {
                                      "sFirst":      "D&eacute;but",
                                      "sLast":       "Fin",
                                      "sNext":       "Suivant",
                                      "sPrevious":   "Pr&eacute;c&eacute;dent"
                                  },
                                  "oAria": {
                                      "sSortAscending":  ": activer pour trier la colonne dans l'ordre ascendant",
                                      "sSortDescending": ": activer pour trier la colonne dans l'ordre descendant"
                                  }
                              },
                              "bDestroy": true,
                              "bProcessing": true,
                              "bPaginate": true,
                              "bDeferLoading": true,
                              "sPaginationType": "full_numbers",
                              "iDisplayLength": 50,
                              "aaData": json.aaData,
                              "aoColumns": json.aoColumns
                          } );
                  $("body").css("cursor", "default");
                  }
                } );
            }                        
            return false; // prevent the browser to submit the form by itself
        } );

I've read the release notes by I cannot see what has changed.

Any help would be appreciated.
Thanks.

allan · March 2015

Hi,

Can you link tot he page in question so I can draw and debug what is going wrong please? It might be that you need to add:

if ( $.fn.dataTable.isDataTable( "#example" ) ) {
  $('#example').DataTable().destroy();
}

at the very start of your success function.

Allan

micheld88 · March 2015

Hi Allan.
Thanks for quick response.
I've tried your trick but it doesn't solve the problem.
At the second run, I now get a "col is undefined" at jquery.datatbales.js line 6376 (if ( col.mData === i ) {)
then for the next run a "settings.nTableWrapper is null" error at line 8982 col 7 (var orig = settings.nTableWrapper.parentNode;)

I've no public link to the page but I give you the full html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>New dashboard</title>
   <style type="text/css" title="currentStyle">
            @import "media/css/demo_page.css";
            @import "media/css/demo_table.css";
      @import "extensions/TableTools/css/dataTables.tableTools.css";
        </style>   
    <script src="media/js/jquery.js"></script>
    <script src="media/js/jquery.dataTables.js"></script>
    <script src="extensions/TableTools/js/dataTables.tableTools.min.js"></script>
    <script type="text/javascript" charset="utf-8"> 

            $(document).ready(function() {
                $('#form').submit( function() {
            var id = $('#sql_req').children(":selected").attr("id");
            var val = $('#sql_req').children(":selected").text();
            if (id != 0) {
              $("body").css("cursor", "wait");
              $.ajax({
                  url: "getquery.php?reqsql="+encodeURIComponent(val),
                  dataType:'JSON',
                  success:function(json){
                          if ( $.fn.DataTable.isDataTable( "#example" ) ) {
                            $("#example").find('thead tr th').remove(); 
                            $('#example').DataTable().destroy();
                          }                         
                          $("#example").DataTable( {
                               "dom": 'T<"clear">lfrtip',
                             "tableTools": {
                                "sSwfPath": "extensions/TableTools/swf/copy_csv_xls_pdf.swf"
                             },
                             "oLanguage": {
                                "sEmptyTable":     "Pas de donn&eacute;es dans la table",
                                "sInfo":           "Visualisation des enregistrements _START_ &agrave; _END_ sur un total de _TOTAL_",
                                "sInfoEmpty":      "Visualisation des enregistrements 0 &agrave; 0 sur un total de 0",
                                "sInfoFiltered":   "(filtr&eacutes sur _MAX_ enregistrements au total)",
                                "sInfoPostFix":    "",
                                "sThousands":      " ",
                                "sLengthMenu":     "Afficher _MENU_ lignes par page",
                                "sLoadingRecords": "Chargement...",
                                "sProcessing":     "Traitement en cours...",
                                "sSearch":         "Rechercher:",
                                "sZeroRecords":    "Aucun enregistrement trouv&eacute;",
                                "oPaginate": {
                                    "sFirst":      "D&eacute;but",
                                    "sLast":       "Fin",
                                    "sNext":       "Suivant",
                                    "sPrevious":   "Pr&eacute;c&eacute;dent"
                                },
                                "oAria": {
                                    "sSortAscending":  ": activer pour trier la colonne dans l'ordre ascendant",
                                    "sSortDescending": ": activer pour trier la colonne dans l'ordre descendant"
                                }
                            },
                            "bDestroy": true,
                            "bProcessing": true,
                            "bPaginate": true,
                            "bDeferLoading": true,
                            "sPaginationType": "full_numbers",
                            "iDisplayLength": 50,
                            "aaData": json.aaData,
                            "aoColumns": json.aoColumns
                          } );
                  $("body").css("cursor", "default");
                  }
                } );
            }                        
            return false; // prevent the browser to submit the form by itself
                } );
                
          //get a reference to the select element
                $select = $('#sql_req');
          //request the JSON data and parse into the select element
          $.ajax({
            url: 'getsql.php',
            dataType:'JSON',
            success:function(data){
              //clear the current content of the select
              $select.html('<option id="0">Choisir une requ&ecirc;te</option>');
              //iterate over the data and append a select option
              $.each(data, function(key, val){
                //alert(key+' '+val); 
                $select.append('<option id="' + val.id + '">' + val.name + '</option>');
              })
            },
            error:function(){
              //if there is an error append a 'none available' option
              $select.html('<option id="-1">Aucune requ&ecirc;te disponible</option>');
            }
          });
          
          //$('#clicked').html('');
          $('#sql_req').change( function() {
             var id = $(this).children(":selected").attr("id");
             var val = $(this).children(":selected").text();
          });
                    
             } );
    </script>
</head>
<body id="dt_example">
<div id="container">
  <h1>Bugtracker dashboards</h1>  
  <div id="demo">
    <select id="sql_req" name="select"></select>
  
    <form id="form" style="display: inline-block;" action="getsql.php" method="POST">
      <!-- <input type="hidden" name="op" value="do"> -->
        <div style="text-align:center; padding-bottom:1em;">
                <button type="submit">Soumettre</button>
        </div>                      
    </form>
    <div>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>
    </div>
  </div>
</div>
</body>
</html>

Thanks.
Michel.

allan · March 2015

Can you put the destroy call before the remove please?

Allan

micheld88 · March 2015

I've swapped the lines and now has the following code:

                          if ( $.fn.DataTable.isDataTable( "#example" ) ) {
                            $('#example').DataTable().destroy();
                            $("#example").find('thead tr th').remove(); 
                          }

I've also emptied the bowser cache but the problem still remains.

allan · March 2015

I'm afraid I would need a link to the page in that case. I'm not sure why that wouldn't work and I'll need to debug it.

Allan

micheld88 · March 2015

Allan,

I've built a zip file with a simplified code that reproduce the problem. I cannot send you all my application since it needs mysql database, SQL scripts, php code, ... The zip file contains the datatable source I used and 1 html page and 2 php scripts used by the page. You don't need mysql to execute it but only apache2.2/PHP5.3.

The problem occurs when you choose a datatable with less columns than the previous one (for instance, choose 'test2' then 'test1' in the select box).

You can try this link to download the zip file:
http://ovh.to/xu4NNeu

Michel.

micheld88 · March 2015

The link has expired. You can now use http://ovh.to/8mS7mKL

Michel.

micheld88 · April 2015

Hello Allan.

Have you had time to investigate my problem ?
If you need that I reactivate the link to the archive, let me know.

Thanks.
Michel.

allan · April 2015

It would be great if you could post the page up on the web somewhere that I can just load and debug it please.

Allan

micheld88 · April 2015

Can you try http://testdatatables.pagesperso-orange.fr/ ?

you first select 'test2' in the combo (then click on submit) then 'test1' (and click on submit) and the problem occurs.

Michel.

allan · April 2015

                                if ($.fn.DataTable.isDataTable("#example")) {
                                    $('#example').DataTable().destroy();
                                    $("#example").find('thead tr th').remove();
                                }

There are no header cells, but there are cells in the tbody. Hence, DataTables gets confused.

Try:

                                if ($.fn.DataTable.isDataTable("#example")) {
                                    $('#example').DataTable().destroy();
                                    $("#example").find('thead, tbody').remove();
                                }

Allan

micheld88 · April 2015

YES ! it works fine now. Thanks a lot Allan.

This topic can be closed.

Michel.

Problem upgrading from 1.9.4 to 1.10.5

Problem upgrading from 1.9.4 to 1.10.5

Answers

Howdy, Stranger!

Categories

DataTables

Problem upgrading from 1.9.4 to 1.10.5

Problem upgrading from 1.9.4 to 1.10.5

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables