How to Reload Table JSP with jQuery & Ajax

Question

I'm new at Web Development application.

I have develop application using Spring MVC & JSP, my method is still reload page. I want to use jQuery & Ajax to update my table without Page Reloading.

Heres my JSP:

    <form action="<c:url value="/admin/apw/ssar"/>" method="get" name='SsarTable' > 

            <div class="col-md-1">
                <!-- Submit button -->
                <div class="form-group">
                    <button class="btn btn-primary " name="submit" type="submit">Search</button>
                </div>
            </div>
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr style="background-color:#dedede;">
                                        <th data-field="tno">NO</th>
                                        <th data-field="seqplan">PLAN</th>
                                        <th data-field="seqactual">ACTUAL</th>
                                        <th data-field="evaluate">EVALUATE</th>
                                        <th data-field="remark">REMARK</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <c:forEach items="${lists}" var="ssar">
                                        <tr>
                                            <td>${ssar.tno}</td>
                                            <td>${ssar.seqplan}</td>
                                            <td>${ssar.seqactual}</td>
                                            <td>${ssar.evaluate}</td>
                                            <td>${ssar.remark}</td>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>

For Controller:

@RequestMapping(value = "/apw/ssar", method = RequestMethod.GET)
public ModelAndView getSsarTable(@RequestParam(required = false, value = "plandate") String planDate) {

    ModelAndView model = new ModelAndView("apw/ssar/table");

    List<Ssar> list = ssarService.getSsarTable("J20", planDate);
    model.addObject("lists", list);

    logger.info(authService.getAuthenticatedAdmin() + " executed getSsarTable()");
    return model;
}

Please to everybody help how I need to change my code, and how to make the Ajax script :(

Answer 1

Example from my project

Table

<button class="accordion" onclick="getSchedule()">Schedule</button>
<div class="panel">
    <table id="scheduleTable" align="left" class="order-table" style="width: 50%">
        <thead>
        <tr>
            <th align="left">Subject</th>
            <th align="left">Date</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

AJAX request

function getSchedule() {
            $.ajax({
                type: "GET",
                url: 'lecturerSchedule',
                dataType: "json",
                complete: [
                    function (response) {
                        $("#scheduleTable").find("tr:not(:first)").remove();
                        var trHTML = '';
                        var obj = $.parseJSON(response.responseText);
                        for (var i = 0; i < obj.length; i++) {
                            trHTML += '<tr><td><label>' + obj[i].subject + '</label></td><td>' + obj[i].stringDate + '</td></tr>';
                        }
                        $("#scheduleTable tbody").append(trHTML);
                    }
                ]
            });
        }

Controller method

    @RequestMapping(value = "/lecturerSchedule", method = RequestMethod.GET, produces = {"application/json"}, headers = "Accept=*/*")
    @ResponseBody
    public List<Lesson> showScheduleForLecturer() {
        List<Lesson> list = daoLesson.getLessonForLecturer(new Lecturer(ID, login.getNickname(), login.getPassword()));
        Collections.sort(list);
        return list;
    }

EDIT To pass some parameters you can add them to your AJAX request as(after "dataType")

data: {id: "someId"},

And then get by your Controller

@RequestMapping(value = "/getSubjectsForGroup", method = RequestMethod.GET, consumes = "application/json", produces = {"application/json"}, headers = "Accept=*/*")
    @ResponseBody
    public List<Subject> getSubjectsForGroup(@RequestParam("id") int id) {
        Object object = new Object(id);
        return daoSubject.showSubjectsForGroup(object);
    }

Or you can create var(for passing objects)

var lecturer = {
                    id: document.getElementById("lecturerId").textContent,
                    name:  document.getElementById("lecturerName").value,
                    login:  document.getElementById("lecturerLogin").value,
                    password: document.getElementById("lecturerPassword").value,
                    info:  document.getElementById("lecturerInfo").value,
                    degree:  document.getElementById("lecturerDegree").value,
                    works: document.getElementById("lecturerWorks").value,
                    interests:  document.getElementById("lecturerInterests").value,
                    cathedra:document.getElementById("selectCathedraOnEdit").options[document.getElementById("selectCathedraOnEdit").selectedIndex].text,
                    cathedraId:document.getElementById("selectCathedraOnEdit").options[document.getElementById("selectCathedraOnEdit").selectedIndex].value
                }

Then pass it with AJAX

data: JSON.stringify(lecturer),

And get in your Controller

@RequestMapping(value = "/updateLecturer", method = RequestMethod.POST, consumes = "application/json")
    @ResponseStatus(value = HttpStatus.OK)
    public void updateLecturer(@RequestBody Lecturer lecturer) {
        daoLecturer.updateLecturer(lecturer);
        daoObject.updateObject(new Object(lecturer.getId(), lecturer.getName(), "lecturer", lecturer.getCathedraId()));
    }