jquery file error while loading jtable in MVC 4 application ASP.net

1.1k Views Asked by At

I am developing web application in asp.net MVC 4. I am populating a jtable with JSON data.

But I am getting error "

Cannot call method 'data' of Undefined jtable/jquery.jtable.js:436

" I have been searching for the solution of this error but not able to solve I am a newbie on MVC and jQuery as well. So I am sharing my code below for controller and view both. And I have debug and check while my data base return the data problem is while loading the jtable

View file code for loading jtable

@{
ViewBag.Title = "Patients";
}



 <div id="StudentTableContainer1">
 </div>


 <script type="text/javascript">

  $(document).ready(function () {

    $('#StudentTableContainer1').jtable({
        title: 'Patients List',
        actions: {
            listAction: '  @Url.Action("PatientsList")',
            deleteAction: '@Url.Action("DeleteStudent")',
            updateAction: '@Url.Action("UpdateStudent")',
            createAction: '@Url.Action("CreateStudent")'
        },
        fields: {
            PatientId: {
                key: true,
                create: false,
                edit: false,
                list: false
            },

            MedicalRegNo: {
                title: 'MedicalRegNo',
                width: '23%'
            },
            OldMedicalRegNo: {
                title: 'OldMedicalNo',
                width: '23%'
            },

            FirstName: {
                title: 'FirstName',
                width:'12%'

            },

            Gender:{
                title: 'Gender',
                width:'13%'
            },
           DOB: {
               title: 'DOB',
               width:'13%'
           },
           CNIC: {
               title: 'CNIC',
               width:'11%'
           }
        }
    });

    //Load student list from server
    $('#StudentTableContainer1').jtable('load');
});

</script>

Controller code

 [HttpPost]
    public JsonResult PatientsList()
    {
        try
        {
            Thread.Sleep(200);
            var Patients = obj_class.GetPatients();
            return Json(new {Result = "OK", Records = Patients});
        }
        catch (Exception ex)
        {

            return Json(new {Result = "ERROR", Message = ex.Message});
        }
    }
1

There are 1 best solutions below

1
On

Actually I solved it the error was that the columns which I was using for displaying in jtable were different ,they should have to be same as the JSonResult method object returns to view.

Like I want to give an example for this:

I have a jtable:

<div id="Mytable"></div>

$(document).ready(fucntion(){
$('#Mytable').jTable{
 title:'My Jtable',
 actions:
{
       listAction:'@url.Action("MytableData")'
},
fields:{

   ID:{
   title:'ID',
   widthL'20%'  
      },

       Name:{
       title:'My name',
   width:'20%'      

      }
    }
   });
  $('#Mytable').jTable.('load')
  });

And My controller which is returning the JSON Object for MytableData is:

 using System.Web.Mvc;  
 using System.Web.SessionState;
 using System.Linq;

   namespace CrudPlugInDevelop.Controllers
 {
  public class DemoController : RepositoryBasedController
    {

     PatientsModel obj_data=new PatientsModel();

    public JsonResult MyTableData(string name)
    { 
            List<DB_Patient> obj_data = context.PatientsList(name);

            return Json(new { Result = "OK", Records = obj_data });
        }
        catch (Exception ex)
        {

            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }
}

And My Model Class

        using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using mEMR.Core.Interfaces;

namespace mEMR.Core.Models.PatientSearch
    {
     public class PatientSearchViewModel : IPatientSearchModel
    {
    public int ID { get; set; }

    [DisplayName("First Name")]
    public string Name { get; set; }

So here you go if In model you have name column in jtable column it should be name if you change it by first name or any thing else it will not show the data in jtable. I just figured it out.