Editor is showing as undefined or null reference

HardCorps88

I have editor.bootstrap.js in my bundle and verified its in my Scripts folder but still get error. Not sure what Im missing?

allan

Can you link to the page so I can debug the issue please? Have you also included dataTables.editor.js?

Allan

HardCorps88

I can't link to the page since its in a secure environment. I did include the datatables.editor.js in the bundle. Could a version of jquery that I use 2.1.4 cause the issue?

allan

The current released of DataTables and Editor should be fully compatible with jQuery 2.1.4.

Can you show the full HTML for the page?

Allan

HardCorps88

Lemme see...

HardCorps88

Thanks for your help Allan. I found out that due to trying to load my table via my model directly then thru Ajax I can't do edits. So...I am rebuilding using ajax to load and perform my edits and adds. Been looking through the forum to see what all my steps are so far.

allan

It sounds like you might have been injected HTML into the document and it didn't have event listeners on it, so nothing would happen. Is that about right? I'd need to be able to see some code in order to be able to offer any assistance I'm afraid.

Allan

HardCorps88

public ActionResult GetCurrentUserHours()
        {
          List<TimeSheetDetail> myTimeSheet = TimeSheetService.Instance.GetCurrentTimeSheet(curUser).TimeSheetDetails;
 Allan here is what I am trying to do. I just wanted to get my items to display just to get the hang of it so I trimmed it down somewhat.  Little trouble in getting it to return back to the view and display in the table.  Somehow my data is not formatted correctly I guess.  The commented out portions are what I am going to do once I get a hang of how this is loaded.  

public ActionResult GetCurrentUserHours()
        {
          List<TimeSheetDetail> myTimeSheet = TimeSheetService.Instance.GetCurrentTimeSheet(curUser).TimeSheetDetails;
var result = myTimeSheet.Select(x => new [] { x.TimeSheet.TimeSheetId.ToString(), x.Task.TreeNodeId.ToString(), x.Task.Text, x.Date.ToShortDateString(), x.Hours.ToString() });

            return Json( result, JsonRequestBehavior.AllowGet);
        }

<div class="table-responsive">
    <table class="table table-bordered table-alt" id="TimeTable">
        <thead>
            <tr>
                  <th>Id</th>
                <th>TaskId</th>
                <th>Task</th>
                <th>Date</th>
                <th>Hours</th>
                
                @*<th>TaskID</th>
                <th>Task</th>
                <th>S</th>
                <th>M</th>
                <th>T</th>
                <th>W</th>
                <th>T</th>
                <th>F</th>
                <th>S</th>
                <th>Total</th>
                <th>S</th>
                <th>M</th>
                <th>T</th>
                <th>W</th>
                <th>T</th>
                <th>F</th>
                <th>S</th>
                <th>Total</th>
                <th>Grd_Total</th>*@
            </tr>
        </thead>

       
    </table>
    <br />
</div>

@section scripts {
    <script>
        //hide the message after client clicks
        $(function() {
            $(document).click(function() {
                $('.alert-success').hide();
                $('.alert-danger').hide();
            });
        });

        $(document).ready(function() {

            editor = new $.fn.dataTable.Editor({
            //    ajax: "/Home/GetCurrentUserHours",
            //    table: "#TimeTable",
            //    fields: [
            //        {
            //            label: "Task:",
            //            name: "Task"
            //        }, {
            //            label: "S:",
            //            name: "Sun"
            //        }, {
            //            label: "M:",
            //            name: "Mon"
            //        }, {
            //            label: "T:",
            //            name: "Tue"
            //        }, {
            //            label: "W:",
            //            name: "Wed"
            //        }, {
            //            label: "T:",
            //            name: "Thu"
            //        }, {
            //            label: "F:",
            //            name: "Fri"
            //        }, {
            //            label: "S:",
            //            name: "Sat"
            //        }, {
            //            label: "Total:",
            //            name: "Total"
            //        }, {
            //            label: "S:",
            //            name: "Sun2"
            //        }, {
            //            label: "M:",
            //            name: "Mon2"
            //        }, {
            //            label: "T:",
            //            name: "Tue2"
            //        }, {
            //            label: "W:",
            //            name: "Wed2"
            //        }, {
            //            label: "T:",
            //            name: "Thu2"
            //        }, {
            //            label: "F:",
            //            name: "Fri2"
            //        }, {
            //            label: "S:",
            //            name: "Sat2"
            //        }, {
            //            label: "Total2:",
            //            name: "Total2"
            //        }, {
            //            label: "Grand_Total:",
            //            name: "GrandTotal"
            //        }
            //    ]
            });

            $('#TimeTable').on('click', 'tbody td:not(:first-child)', function(e) {
                editor.inline(this);
            });

            @*var paydate = "@Model.CurTimeSheet.PayPeriod.StartDate";*@
            
            $('#TimeTable').DataTable({
                "sAjaxSource": "/Home/GetCurrentUserHours",


                "columns": [
                    { "data": "TimeSheetId" },
                    { "data": "TaskId" },
                    { "data": "Task" },
                    { "data": "Date" },
                    { "data": "Hours" }
                    //{ "data": "T" },
                    //{ "data": "W" },
                    //{ "data": "T" },
                    //{ "data": "F" },
                    //{ "data": "S" },
                    //{ "data": "Total" },
                    //{ "data": "S" },
                    //{ "data": "M" },
                    //{ "data": "T" },
                    //{ "data": "W" },
                    //{ "data": "T" },
                    //{ "data": "F" },
                    //{ "data": "S" },
                    //{ "data": "Total2" },
                    //{ "data": "GrandTotal" }
                ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ],
                //"fnServerParams": function(aoData) {
                //    //aoData.push({ "name": "paydate", "value": paydate});
                  
                //},

            });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

So is the full HTML view (I presume that is what the above HTML code chunk is) written into the document in some way? The JS would need to be run after that is inserted, and it should only really be inserted once in the life-time of the page.

Allan