CODEWITHSUNDEEP
jqueryjquery-jtable
Carla
Carla

Reputation: 3390

Connect jQuery to a REST Service


I'm trying to use a jQuery example that uses jtable to connect to a back-end service.(https://www.simplecodestuffs.com/pagination-in-java-web-applications-using-jquery-jtable-plugin/). I've adapted it to reach a REST Service that produces and consumes data as JSON: 

<!DOCTYPE html>
<html>
<head>
<link href="css/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"
    type="text/css" />
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#StudentTableContainer').jtable({
            title : 'Students List',
            paging: true, //Enable paging
            pageSize: 3, //Set page size (default: 10)           
            actions: {
                listAction: 'http://localhost:8080/Controller/list',
                createAction:'http://localhost:8080/Controller/create',
                updateAction: 'http://localhost:8080/Controller/update',
                deleteAction: 'http://localhost:8080/Controller/delete'
            },
            fields : {
                id : {
                    title : 'id',
                    sort :true,
                    width : '30%',
                    key : true,
                    list : true,
                    edit : false,
                    create : true
                },
                name : {
                    title : 'Name',
                    width : '30%',
                    edit : true
                },
                department : {
                    title : 'Department',
                    width : '30%',
                    edit : true
                },
                emailId : {
                    title : 'Email',
                    width : '20%',
                    edit : true
                }
            }
        });
        $('#StudentTableContainer').jtable('load');
    });
</script>

</head>
<body>
    <div
        style="width: 80%; margin-right: 10%; margin-left: 10%; text-align: center;">
        <h4>Pagination in Java Web Applications jTable</h4>
        <div id="StudentTableContainer"></div>
    </div>
</body>
</html>

Unfortunately, the jQuery code is unable to connect to the REST Service :"An error occured while communicating to the server." However, REST services are correctly working if I try to request them via curl. Can anyone give me a clue what is wrong with the above code?

EDIT: I've captured from the Firefox debugger a trace of what is happening. It seems there's an error when requesting a 'list?jtStartIndex=0&jtPageSize=3' with a POST. How can I configure it to use instead a GET http://localhost:8080/Controller/list ? enter image description here Thanks

Upvotes: 0

Views: 81

Answers (1)

misterP
misterP

Reputation: 185

Try using the jtable ajax settings as per documented example

ajaxSettings: {
    type: 'GET',
    dataType: 'json'
}

Upvotes: 0

Related Questions