uncaught exception: DataTables Editor - remote hosting of code not allowed and $.fn.dataTable.Editor

Jorge toro

The problem is that it does not work $ .fn.dataTable.Editor is not a constructor

            <link href="plugins/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
    <link href="plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
    <link href="plugins/xcharts/xcharts.min.css" rel="stylesheet">
    <link href="plugins/select2/select2.css" rel="stylesheet">
    <link href="plugins/justified-gallery/justifiedGallery.css" rel="stylesheet">
    <link href="css/style_v1.css" rel="stylesheet">
    <link href="plugins/chartist/chartist.min.css" rel="stylesheet">
    <link href="plugins/responsive/responsive.bootstrap.min.css" rel="stylesheet"> 


    <!-- DataTable -->
    <link href="css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="css/buttons.dataTables.min.css" rel="stylesheet">
    <link href="css/select.dataTables.min.css" rel="stylesheet">
    <link href="css/editor.dataTables.min.css" rel="stylesheet">



<!--    <link href="plugins/datatables/dataTables.bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
            <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
            <script src="http://getbootstrap.com/docs-assets/js/respond.min.js"></script>
    <![endif]-->



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--<script src="http://code.jquery.com/jquery.js"></script>-->
    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="plugins/justified-gallery/jquery.justifiedGallery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="plugins/bootstrap/bootstrap.min.js"></script> 
    <script src="plugins/tinymce/jquery.tinymce.min.js"></script>
    <script src="plugins/tinymce/tinymce.min.js"></script>


    <script src="plugins/datatables/jquery.dataTables.js"></script>
    <script src="plugins/datatables/ZeroClipboard.js"></script>
    <script src="plugins/datatables/TableTools.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.js"></script>   
    <!--<script src="plugins/responsive/responsive.bootstrap.min.js"></script> --> 
    <script src="plugins/responsive/dataTables.responsive.min.js"></script>

    <!-- DataTable -->

    <!-- <script src="js/jquery-1.12.4.js" type="text/javascript" language="javascript" ></script> -->
    <script src="plugins/js/jquery.dataTables.min.js" type="text/javascript" language="javascript" ></script>
    <script src="plugins/js/dataTables.buttons.min.js" type="text/javascript" language="javascript" ></script>
    <script src="plugins/js/dataTables.select.min.js" type="text/javascript" language="javascript"></script>
    <script src="plugins/js/dataTables.editor.min.js" type="text/javascript" language="javascript"></script>


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

$(document).ready(function() {

CargaUsuarios(); 

});

function CargaUsuarios()
{
var editor = new $.fn.dataTable.Editor( {
ajax: "pruetabla.php",
table: "#TablaUsuarios",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );

// Activate an inline edit on click of a table cell
$('#TablaUsuarios').on( 'click', 'tbody td:not(:first-child)', function (e) {
    editor.inline( this );
} );

$('#TablaUsuarios').DataTable( {
    dom: "Bfrtip",
    ajax: "pruetabla.php",
    order: [[ 1, 'asc' ]],
    columns: [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },
        { data: "first_name" },
        { data: "last_name" },
        { data: "position" },
        { data: "office" },
        { data: "start_date" },
        { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
    ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
} );

}

allan

It sounds like you've downloaded the Editor Javascript file directly from the Editor web-site's demos. Instead, get the file from the Editor download page which will run locally.

Regards,
Allan

Jorge toro

Thanks Regards, download it from Download Editor by selecting one of the packages below: version Editor-PHP-1.6.2 (2) .zip