editor.js not initiatializing

baggat · August 2015

I am trying to create a datatable on a sharepoint page and everything works well untill i try initializing the editor on the page and it is giving SCRIPT438: Object doesn't support property or method 'Editor' error. I am thinking the editor.js is not loading but the path is correct and js is sitting in sp library. Any ideas?

allan · August 2015

It does indeed sound like the Editor library is not loading. If you look at the console in your browser, what does it say.

Can you link to the page so we can take a look?

Allan

baggat · August 2015

unfortunately i am on company intranet sp site. Here is the code i am using

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="Passportpage,web">
    <meta name="description" content="Passport page">
    <title>Passport page</title>
<!--jquery-->
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

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

<link rel="stylesheet" type="text/css" href="https//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="../SiteAssets/css/dataTables.editor.css">
<link rel="stylesheet" type="text/css" href="../SiteAssets/css/dataTables.editor.min.css">



<!--Datatable jquery + javascript + CSS files-->

<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../SiteAssets/dataTables.editor.min.js"></script>
<script src="https//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->

<script src="../SiteAssets/jquery.SPServices-2014.02.js"></script>

<script src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>


<!--SpServices JavaScript get items from list 'Passport'-->

<script language="javascript" type="text/javascript">

//$(document).ready(function() {
$( window ).load(function() {

$('#example').DataTable( {

        "dom": 'Rlfrtip'

    } );
    
var editor = $.fn.dataTable.Editor( {} );


  var myQuery = 

       "<Query>" +

"<OrderBy>" +

"<FieldRef Name='Created On' />" +

"</OrderBy>" +

       "</Query>";

  $().SPServices({

    webUrl: "https://devsp2013.corp.com/sites/CBSP",

    operation: "GetListItems",

    async: false,

    listName: "Passport Template File",

    CAMLQuery: myQuery,

    CAMLRowLimit: 100,

    completefunc: function (xData, Status) {

 

var liHtml ="<tbody>";

      $(xData.responseXML).SPFilterNode("z:row").each(function() {

         liHtml =liHtml+ "<tr><td>" + $(this).attr("ows_Title") + "</td><td>" + $(this).attr("ows_UNIT") + "</td><td>" + $(this).attr("ows_COLUMN_NO") + "</td><td>" + $(this).attr("ows_EQ_REMARKS") +  "</td><td>" + $(this).attr("ows_CRIT_x0020_CAT") +"</td></tr>" ;
     
      });

    liHtml +="</tbody>";

   $("#example").append(liHtml);

    }

  });
  
   // Activate an inline edit on click of a table cell

  //  $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {

 //       editor.inline( this, {

 //           buttons: { label: '&gt;', fn: function () { this.submit(); } }
//
 //       } );

 //   } );

  

});

</script>
</head>
 <body>

<table id="example" class="display" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>Title</th>

                <th>Building</th>

                <th>Class</th>
                 
                <th>Test</th>
                
                <th>CAT IDs</th>                
                                                                
            </tr>

        </thead>

 

        <tfoot>

            <tr>

                <th>Title</th>

                <th>Building</th>

                <th>Class</th>
                
                 <th>Test</th>      
                 
                <th>CAT IDs</th>                 
                
                                 
                    
            </tr>

        </tfoot>

    </table>
    </body>
    </html>

baggat · August 2015

the console gives this mesage

SCRIPT438: Object doesn't support property or method '_constructor'
dataTables.editor.min.js, line 52 character 466

allan · August 2015

Ah. The issue is here:

var editor = $.fn.dataTable.Editor( {} );

It needs the new keyword:

var editor = new $.fn.dataTable.Editor( {} );

Allan

baggat · August 2015

Thanks so much Allan one last question, i hope, Does the editor have issues when it is instantiated in a sharepoint webpart. I read somewhere it cannot do table within a table.
Can you please confirm?

allan · August 2015

To be honest, I'm not sure. i haven't used Editor in SharePoint myself. However, given that it is being executed int he browser, I can't see why there would be any issues.

Allan

editor.js not initiatializing

editor.js not initiatializing

Answers

Howdy, Stranger!

Categories

DataTables

editor.js not initiatializing

editor.js not initiatializing

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables