Editor Question

markscott · April 2015

I am using Bootstrap and DataTables/Editor.

In Google Chrome the table renders ok within a normal Bootstrap container and has Bootstrap styling, but in Internet Explorer the table renders as full width and doesn't have Bootstrap styling.

I have been using Bootstrap for some time and I have never seen these inconsistencies in browsers when using it so there must be something in my code that is breaking Internet Explorer - but I don't know what.

Here is the code:

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Editor</title>

  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
  <link rel="stylesheet" type="text/css" href="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">

  <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/dataTables.editor.min.js"></script>
  <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
  <script type="text/javascript" language="javascript" src="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>

  <script type="text/javascript" class="init">
  var editor; // use a global for the submit and return data rendering in the examples

  $(document).ready(function() {
      editor = new $.fn.dataTable.Editor( {
          ajax: "php/table.php",
          table: "#table",
          fields: [
          {
           "label": "column1",
           "name": "column1",
           "type": "text"
          },
          {
           "label": "column2",
           "name": "column2",
           "type": "text"
          },
          {
           "label": "column3",
           "name": "column3",
           "type": "text"
          },
          {
           "label": "column4",
           "name": "column4",
           "type": "text"
          },
          {
           "label": "column5",
           "name": "column5",
           "type": "text"
          },
          {
           "label": "column6",
           "name": "column6",
           "type": "column6"
          },
          {
           "label": "column7",
           "name": "column7",
           "type": "text"
          },
          {
           "label": "column8",
           "name": "column8",
           "type": "text"
          }
          ]
      } );

      var table = $('#table').DataTable( {
          lengthChange: false,
          ajax: "php/table.php",
          columns: [
          {
           "data": "column1"
          },
          {
           "data": "column2"
          },
          {
           "data": "column3"
          },
          {
           "data": "column4"
          },
          {
           "data": "column5"
          },
          {
           "data": "column6"
          },
          {
           "data": "column7"
          },
          {
           "data": "column8"
          },
          {
           "data": "column9"
          }
          ]
      } );

      var tableTools = new $.fn.dataTable.TableTools( table, {
          sRowSelect: "os",
          aButtons: [
              { sExtends: "editor_create", editor: editor },
              { sExtends: "editor_edit",   editor: editor },
              { sExtends: "editor_remove", editor: editor }
          ]
      } );
      $( tableTools.fnContainer() ).appendTo( '#table_wrapper .col-sm-6:eq(0)' );
  } );
  </script>
    </head>
    <body>
        <div class="container">
            <h1>
                Editor
            </h1>

            <table class="table table-bordered" id="table">
                <thead>
                    <tr>
      <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                        <th>Column 5</th>
                        <th>Column 6</th>
                        <th>Column 7</th>
                        <th>Column 8</th>
      <th>Column 9</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

allan · April 2015

Sounds very odd! What happens on this example page for you in IE?

Are you able to give me a link to the page you are working on?

Thanks,
Allan

markscott · April 2015

Hi Allan

That example works ok, strange.

Here is a screenshot: http://picpaste.com/pics/Capture-7Q0f1SpA.1428569356.PNG

allan · April 2015

Very odd. If you look in the console in IE does it show any error messages perhaps? Is the HTML valid (per the W3C validator)?

Without a way to reproduce the issue I'm afraid I can only really guess at the moment!

Allan

markscott · April 2015

I'll check all your suggestions and report back. I have no problem showing you, but problem is this is an Internal site (LAN only) so it'll be some work to open it up. I'll reply when I've had a look :-)

markscott · April 2015

The generator misses some tags in this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

Once I replaced the block with the above from the Bootstrap examples it works ok.

I can't get date picker working in Internet Explorer though (again works ok in Google Chrome):

                {
                 "label": "Date",
                 "name": "date",
                 "type": "date",
                 def: function () {
                  var d = new Date();
                  var pad = function ( i ) {
                   return i<9 ? '0'+i : i;
                  }
       
                  return d.getFullYear() +'-'+ pad(d.getUTCMonth()+1) +'-'+ pad(d.getUTCDate());
                  }
                }

Screenshot in Internet Explorer: http://picpaste.com/pics/Capture-6m1chjF2.1428583394.PNG

allan · April 2015

Sounds like you IE might be setup to render by default in an old version of the rendering engine. Good to hear you got it working though.

Regarding the date input - have you included jQuery UI's date picker?

Allan

markscott · April 2015

I am using the same code (above) for both IE and Chrome. In Chrome I get a date picker http://picpaste.com/pics/Capture-PSHkXf5G.1428589783.PNG and in Internet Explorer I don't http://picpaste.com/pics/Capture-6m1chjF2.1428583394.PNG ?

allan · April 2015

Are you using Generator's code unmodified? Are you able to show me a screenshot of your Generator configuration so I can try to reproduce the error?

Allan

markscott · April 2015

Yes using the generated code I have a date field in Chrome this automatically shows a date picker but in IE I just get a little sort-of broken text box as the screenshots ? I haven't included datepicker or anything since it worked without it in Chrome ... do I need it?

allan · April 2015

I don't see the jQuery UI library in your code above. Did you select the "Date (jQuery UI)" option for the column in Generator?

Chrome has its own HTML5 date picker built-in. None of the other browsers currently support that, which is why Editor supports the jQuery UI date picker.

I've just tried Generator with a date field and it appears to work as expected in IE. Are you able to show me a screenshot of your Generator configuration so I can try to reproduce the error?

Allan

markscott · April 2015

Included jQuery UI works. I didn't realise that Chrome had it built in, that explains a lot! Should I be able to just use Bootstrap date picker instead of jQuery UI?

allan · April 2015

Sure. There are two different Bootstrap date picker plug-ins available for Editor: https://editor.datatables.net/plug-ins/field-type/ .

I didn't realise that Chrome had it built in

I really wish the other browsers would hurry up and implement it as well!

Allan

Editor Question

Editor Question

Answers

Howdy, Stranger!

Categories

DataTables

Editor Question

Editor Question

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables