CODEWITHSUNDEEP
javajqueryspringjspspring-mvc
Mikhail
Mikhail

Reputation: 2935

JQuery to update a <c:forEach> in Spring MVC

I сreated a jsp page with the table. I would like to refresh table after click the button using Jquery. But in result i see two views at the same time. How to avoid this problem ?

My Controller

@Controller
@RequestMapping("/")
public class HelloController {

    private final Logger log = LoggerFactory.getLogger(getClass());

    @Autowired
    private UserServiceDao userServiceDao;

    @RequestMapping(method = RequestMethod.GET)
    public String printWelcome(ModelMap model) {
       model.addAttribute("Message","first");
       model.addAttribute("list",userServiceDao.findAll());
       log.trace("NUMBER:::::::::::::::::::::"+userServiceDao.findAll().size());
        return "main";
    }

    @RequestMapping("/table")
    public ModelAndView renderTable(HttpServletRequest request) {

        String name = request.getParameter("nameSearch");
        log.trace("1: "+name);
        List<User> people = userServiceDao.find(name);
        log.trace("2: "+people.size());
        return new ModelAndView("main", "list", people);
    }
}

MY view with the Jquery script

<body>

<div class="sear">
<input class=" int datasearch" type="search" value="an" id="dataSearch">
<input class="int search" type="button" value="Search" id="search">
<input class="int create"  type="button" id="err" value="Create user">
</div>
<h1>List of users: </h1>

<div class="table" >
       <c:forEach var="item" items="${list}">
    <div class="row"  >

        <div  id="tabl" class="cell" style="width:300px;"><c:out value="${item.name}"/>></div>
        <div class="cell" style="width:100px;" ><input class="delete" type="button" value="Delete user"></div>
        <div class="cell"><input class="edit" type="button" value="Edit user"></div>

    </div>
       </c:forEach>
</div>

<script type="text/javascript">

    $('#err').click(function(){
        window.location.href='/registration';

    })
    $('#search').click(function(){

        $(function() {
            var myTableContainer = $("#tabl");

            var renderTable = function(container) {
                var data = $('#dataSearch').val();
                var postReqData = {}; // Create an empty object
                postReqData['nameSearch'] = data;

                $.get("/table",postReqData, function(data) {

                    container.empty().html(data);
                })
            };

            /* This is called on document ready */
            renderTable(myTableContainer);

            /* Use the same renderTable function when the refresh button is clicked */
            $("#search").click(function() {
                renderTable(myTableContainer);
            });
        })
    })

Upvotes: 0

Views: 1821

Answers (1)

soulcheck
soulcheck

Reputation: 36777

Ok, this might be a bit too long for comments.

Your main problem is that both @RequestMapping(method = RequestMethod.GET) and @RequestMapping("/table") render the same view.

That is: the view containing all your search inputs, <c:forEach> table and javascript.

So when you do the search and when the ajax call returns, you replace contents of div#tabl with all those search inputs, <c:forEach> and javascript.

You end up with two pieces of everything nested in the wrong way.

My advice would be to do one RequestMapping that renders the basic jsp, and the other one that renders only the search results (or even returns json and render it as html in javascript).

Upvotes: 1

Related Questions