locked
asp.net jtable not firing the load method RRS feed

  • Question

  • User1402853653 posted

    I'm trying to list my criteria using jtable but nothings showing on run. What i'm doing wrong.

    I Also try to put the script on head but still nothing. There's break point on the loadData method but it's not hitting the method sorry i'm kinda new in this.

    What I have tried:

    i try to put alert on the top of creating jtable and the alert shows
    but when i try to put it on the end the alert not showing

    Here's my code

    Design part:

    <form id="form1" runat="server">
        <div>
        <div  id="tablecon"></div>
        </div>
    
        </form>
         <script type="text/javascript">
    
             $(document).ready(function () {
                 $('#tablecon').jtable({
                     title: 'Criteria',
                     paging: false,
                     pageSize: 10,
                     sorting: false,
                     actions: {
                         listAction: '/WebForm1.aspx/loadData'
    
                     },
                     fields: {
                         CriteriaCode: {
                             key: true,
                             edit: false,
                             list: false
                         },
                         CriteriaDisplay: {
                             title: 'Criteria',
                             edit: false,
                             width: '23%'
                         },
                         CriteriaPerc: {
                             title: 'Percentage',
                             width: '13%'
                         },
                         CriteriaGoal: {
                             title: 'Goal',
                             width: '13%'
                         }
                     }
    
                 });
    
                 //Load list from server
                 $('#tablecon').jtable('load');
    
             });
    
    
        </script>

    Load Method:

     [WebMethod(EnableSession= true)]
            public static object loadData(double jtStartIndex =0,double jtPageSize=0,string jtSorting=null) {
                try {
                    DataAccess Da = new DataAccess();
                    List<getset> list = Da.loadData();
    
                    //return result to j table
                    return new { Result = "ok", Records = list, TotalRecordCount = 12 };
    
                }
                catch(Exception ex){
                    return new { Result = "ERROR", Message = ex.Message };
                }
            }

    Script source:

     <script src="Scripts/jtable/jquery.jtable.js"></script>
        <link href="Scripts/jtable/themes/basic/jtable_basic.css" rel="stylesheet" />
        <script src="Scripts/jtable/external/json2.js"></script>
        <script src="Scripts/jtable/jquery.jtable.js"></script>
        <script src="Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.js"></script>
    Friday, September 20, 2019 2:37 AM

Answers

  • User-719153870 posted

    Hi kimivanbayan,

    Obviously, the path of your jtable related references are incorrect.

     

    In your current project, the folder in Scripts folder that contain all your jtable related files is called "jtable", but in your code, the url is to jtable.2.4.0.

    It's my bad that i should have told you this problem, because i can see in your first post, the url is right which points to the jtable folder, i'm so sorry for that.

    Please update your code to the right url, it should be like below: (or you can also refer to the url in your first post)

    <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Scripts/jtable/themes/basic/jtable_basic.css" rel="stylesheet" />
        <%--<script src="Scripts/jquery-3.3.1.js"></script>--%>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <%--<script src="Scripts/jquery-ui.js"></script>--%>
        <script src="Scripts/jtable/external/json2.js"></script>
        <script src="Scripts/jtable/jquery.jtable.js"></script>
        <script src="Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>

    Also, there's no bootstrap.css in your Content folder, you can replace it with below code from Bootstrap if necessary.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    Sorry again.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 23, 2019 7:31 AM

All replies

  • User-719153870 posted

    Hi kimivanbaya,

    but nothings showing on run.

    This seems a front code related issue and you can use the dev tool(F12 ) in your browser to see if any error message in your console.

     <script src="Scripts/jtable/jquery.jtable.js"></script>
        <link href="Scripts/jtable/themes/basic/jtable_basic.css" rel="stylesheet" />
        <script src="Scripts/jtable/external/json2.js"></script>
        <script src="Scripts/jtable/jquery.jtable.js"></script>
        <script src="Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.js"></script>

    I built a demo to test your code and seems the problem is you are adding the references to several jQuery and jtable files in the wrong order and missing a jquey-ui reference.

    Please refer to my below code and update yours:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Scripts/jtable.2.4.0/themes/basic/jtable_basic.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.js"></script>
        <script src="Scripts/jquery-ui.js"></script>
        <script src="Scripts/jtable.2.4.0/external/json2.js"></script>
        <script src="Scripts/jtable.2.4.0/jquery.jtable.js"></script>
        <script src="Scripts/jtable.2.4.0/extensions/jquery.jtable.aspnetpagemethods.js"></script>
    </head>

    You can download the jQuery-ui at here. And please notice that you added the jquery.jtable.js twice.

    Notice, the order of these references are also very important.

    Hope this could help.

    Best Regard,

    Yang Shen

    Friday, September 20, 2019 5:26 AM
  • User1402853653 posted

    Thank you for answer but sill not showing anything , but i see error when i press F12

    this:

    TypeError: $(...).jtable is not a function

    Friday, September 20, 2019 7:05 AM
  • User-719153870 posted

    Hi kimivanbayan,

    TypeError: $(...).jtable is not a function

    This is an error when you put the jquery.jtable.js reference before the jquery.js and jquery-ui.js references.

    Please check if the js and css refences in your current page is in the right order as i posted early.

    Like below:

        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Scripts/jtable.2.4.0/themes/basic/jtable_basic.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.js"></script>
        <script src="Scripts/jquery-ui.js"></script>
        <script src="Scripts/jtable.2.4.0/external/json2.js"></script>
        <script src="Scripts/jtable.2.4.0/jquery.jtable.js"></script>
        <script src="Scripts/jtable.2.4.0/extensions/jquery.jtable.aspnetpagemethods.js"></script>

    Best Regard,

    Yang Shen

    Friday, September 20, 2019 7:46 AM
  • User1402853653 posted

    Here's the order of it now

    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Scripts/jtable.2.4.0/themes/basic/jtable_basic.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery-ui-1.9.2.js"></script>
    <script src="Scripts/jtable.2.4.0/external/json2.js"></script>
    <script src="Scripts/jtable.2.4.0/jquery.jtable.js"></script>
    <script src="Scripts/jtable.2.4.0/extensions/jquery.jtable.aspnetpagemethods.js"></script>

    Friday, September 20, 2019 7:55 AM
  • User-719153870 posted

    Hi kimivanbayan,

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery-ui-1.9.2.js"></script>

    Are you sure the version of your jquery file in folder Scripts is 1.9.1? Since, in your first post, it's Scripts/jquery-3.4.1.js, please check.

    Also, i thought it was because of the old version of your jquery.js(1.9.1) and jquery-ui.js(1.9.2), but i tested them in my demo and the demo worked well.

    Thus the version is ok, but i still recommand that you can use the latest version of these two files, the latest version for jquery-ui is 1.12.1.

    Best Regard,

    Yang Shen

    Friday, September 20, 2019 8:24 AM
  • User1402853653 posted

    jQuery-1.9.1.js and the UI is the dependencies og my JTable

    Monday, September 23, 2019 12:31 AM
  • User-719153870 posted

    Hi kimivanbayan,

    If you insist the 1.9.1 version, please also try the online reference, like below:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Scripts/jtable.2.4.0/themes/basic/jtable_basic.css" rel="stylesheet" />
        <%--<script src="Scripts/jquery-3.3.1.js"></script>--%>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <%--<script src="Scripts/jquery-ui.js"></script>--%>
        <script src="Scripts/jtable.2.4.0/external/json2.js"></script>
        <script src="Scripts/jtable.2.4.0/jquery.jtable.js"></script>
        <script src="Scripts/jtable.2.4.0/extensions/jquery.jtable.aspnetpagemethods.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="tablecon"></div>
            </div>
        </form>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#tablecon').jtable({
                    title: 'Criteria',
                    paging: false,
                    pageSize: 10,
                    sorting: false,
                    actions: {
                        listAction: '/JTableDemo.aspx/loadData'
    
                    },
                    fields: {
                        CriteriaCode: {
                            key: true,
                            edit: false,
                            list: false
                        },
                        CriteriaDisplay: {
                            title: 'Criteria',
                            edit: false,
                            width: '23%'
                        },
                        CriteriaPerc: {
                            title: 'Percentage',
                            width: '13%'
                        },
                        CriteriaGoal: {
                            title: 'Goal',
                            width: '13%'
                        }
                    }
    
                });
    
                //Load list from server
                $('#tablecon').jtable('load');
    
            });
        </script>
    
    </body>
    </html>

    Best Regard,

    Yang Shen

    Monday, September 23, 2019 1:18 AM
  • User1402853653 posted

    i still getting that jtable is not a function

    i tryed using that online reference and the reference is in corect order

    Monday, September 23, 2019 1:36 AM
  • User-719153870 posted

    Hi kimivanbayan,

    This situation is really strange, we now need all your latest front code of your current page to find the root of the problem.

    Or if you are also using the Master page, please provide the master page front code too.

    Best Regard,

    Yang Shen

    Monday, September 23, 2019 1:56 AM
  • User1402853653 posted

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Scripts/jtable.2.4.0/themes/basic/jtable_basic.css" rel="stylesheet" />
    <%--<script src="Scripts/jquery-3.4.1.js"></script>
    <script src="Scripts/jquery-ui-1.9.2.js"></script>--%>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="Scripts/jtable.2.4.0/external/json2.js"></script>
    <script src="Scripts/jtable.2.4.0/jquery.jtable.js"></script>
    <script src="Scripts/jtable.2.4.0/extensions/jquery.jtable.aspnetpagemethods.js"></script>


    </head>
    <body>
    <div id="tablecon" class="m-lg-auto"></div>
    <div>

    <input type="button" id="aa" />
    </div>

    <script type="text/javascript">

    $(document).ready(function () {

    $('#tablecon').jtable({
    title: 'a',
    paging: true, //Enables paging
    pageSize: 10, //Actually this is not needed since default value is 10.
    sorting: true, //Enables sorting
    actions: {
    listAction: '/WebForm1.aspx/loadData'

    },
    fields: {
    CriteriaCode: {
    key: true,
    edit: false,
    list: false
    },
    CriteriaDisplay: {
    title: 'Criteria',
    edit: false,
    width: '23%'
    },
    CriteriaPerc: {
    title: 'Percentage',
    width: '13%'
    },
    CriteriaGoal: {
    title: 'Goal',
    width: '13%'
    }
    }

    });

    //Load list from server
    $('#tablecon').jtable('load');

    });


    </script>
    <%-- <script type="text/javascript">
    $(document).ready(function () {

    $('#tablecon').jtable({
    tittle:'s',
    actions: {
    listAction: 'WebForm1.aspx/loadData'
    },
    field: {
    CRITERIACODE: {
    tittle: 'criteria',
    width: '13%'
    },
    CriteriaDisplay: {
    tittle: 'Display',
    width: '13%'
    },
    CriteriaPerc: {
    tittle: 'Percent',
    width: '13%'
    },
    CriteriaGoal: {
    tittle: 'Percent',
    width: '13%'
    }

    }
    });
    alert('why')
    $('#tablecon').jtable('load');
    });
    </script>--%>
    </body>
    </html>

    do you also need the code behind file?

    Monday, September 23, 2019 2:53 AM
  • User-719153870 posted

    Hi kimivanbayan,

    I think this is a reference related problem so behind code is not necessray.

    I have tested your code and didn't met the error: TypeError: $(...).jtable is not a function. Are you sure this is the only error message in your dev tool?

    Here are several solutions you can try:

    1. Clean your browser's cache and rebuild your current project (WebApplication2) in VS Solution Explorer then try to browse this page again to see if this works.
    2. Check in your dev tool Network to see if any reference you added is lost in current page or any incorrect file path error.

    Please tell which browser you are using.

    If possible, please also provide a screenshot of your solution explorer Scripts folder so that we can check if the references are in the right position, like below:

    Best Regard,

    Yang Shen

    Monday, September 23, 2019 5:24 AM
  • User1402853653 posted

    sorry but stupid question how can i post pictures here sorry im new here

    https://photos.google.com/share/AF1QipNG4CvBTaI6uy1CAtl1TCUIBBpfZzEO1IBwfuMNwLJvaajaNS3YkC8Npd3hJCEWKQ/photo/AF1QipO_fpfEh4RxD3_A6ZP-qge1k_JWXZaaPdgr5707?key=X0RZYkhFSEZyRGVZNWpwVHdiaUZNSlhYYTdhbmpR

    https://photos.google.com/share/AF1QipNG4CvBTaI6uy1CAtl1TCUIBBpfZzEO1IBwfuMNwLJvaajaNS3YkC8Npd3hJCEWKQ/photo/AF1QipMlyHlmvSxyydtxdp8rs1zw9KfigYoiiIyzujXX?key=X0RZYkhFSEZyRGVZNWpwVHdiaUZNSlhYYTdhbmpR

    Monday, September 23, 2019 5:49 AM
  • User1402853653 posted

    Sorry but stupic question how can i upload pictures?

    Monday, September 23, 2019 6:04 AM
  • User-719153870 posted

    Hi kimivanbayan,

    Please don't feel sorry for this problem, upload pictures in asp.net forum is really complex and confusing.

    You can follow below steps to upload pictures here:

    1. Find any random thread in Stack Overflow.com like this one.
    2. Click the Image icon in the answer area, like below:
    3. Click Browse and choose a picture you want to upload, and click Add picture (the blue button):
    4. After few seconds, you will get the url of this picture, copy (Ctrl + C) the url like below:
    5. Now, come back to our asp.net forum in your current post, click the image icon right in the middle:
    6. Paste your picture's url you copyed from SO forum here and click OK the blue button,

    Hope this could help.

    Best Regard,

    Yang Shen

    Monday, September 23, 2019 6:45 AM
  • User1402853653 posted

    i think this is also a error 

    Monday, September 23, 2019 6:48 AM
  • User-719153870 posted

    Hi kimivanbayan,

    Obviously, the path of your jtable related references are incorrect.

     

    In your current project, the folder in Scripts folder that contain all your jtable related files is called "jtable", but in your code, the url is to jtable.2.4.0.

    It's my bad that i should have told you this problem, because i can see in your first post, the url is right which points to the jtable folder, i'm so sorry for that.

    Please update your code to the right url, it should be like below: (or you can also refer to the url in your first post)

    <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Scripts/jtable/themes/basic/jtable_basic.css" rel="stylesheet" />
        <%--<script src="Scripts/jquery-3.3.1.js"></script>--%>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <%--<script src="Scripts/jquery-ui.js"></script>--%>
        <script src="Scripts/jtable/external/json2.js"></script>
        <script src="Scripts/jtable/jquery.jtable.js"></script>
        <script src="Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>

    Also, there's no bootstrap.css in your Content folder, you can replace it with below code from Bootstrap if necessary.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    Sorry again.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 23, 2019 7:31 AM
  • User1402853653 posted

    thank you so much  for the patience on helping me,

    Monday, September 23, 2019 8:19 AM