Update table/part of table using Ajax

Question

I know this question was asked bunch of times. I hope one more example and solution will not make harm.

<head>
    <meta charset="UTF-8">
    <title>Book Store</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#call').click(function ()
            {
                    $.ajax({
                        type: "post",
                        url: "books",
                        data: $('#buyBookForm').serialize(),
                        success: function(data) {
                            var s = $(data).find('#buyBookForm');
                            $('#buyBookForm').html($(data).find('#buyBookForm'));
                        }
                    });
            });
        });
    </script>
</head>
<body>
<h1>Book Store</h1>

<form id="buyBookForm" action="books" method="post">
<table width="70%" border="1">
    <c:forEach items="${books}" var="book">
        <tr>
            <th>Book Name</th>
            <th>Author</th>
            <th>Genre</th>
            <th>Price</th>
            <th>Sold</th>
            <th>Bought By</th>
        </tr>
        <tr>
            <td>
            <input type="checkbox" name="book${book.getName()}"
                   value="${book.getBook_id()}"> <label>${book.getName()}</label>
            </td>
            <td>${book.getAuthor().getName()}</td>
            <td>${book.getGenre()}</td>
            <td>${book.getPrice()}</td>
            <td>${book.isBought()}</td>
            <td id = "bought_column"><c:choose>
                <c:when test="${book.getUsers().size() >= 1}">
                    Bought ${book.getUsers().size()} times.
                    <br />
                </c:when>
                <c:otherwise>
                    Have never been bought.
                    <br />
                </c:otherwise>
            </c:choose></td>
        </tr>
    </c:forEach>
</table>
</form>
<input type="button" value="Purchase using AJAX" name="Purchase using AJAX" id="call"/>

My back-end return row html. Please, help me to see:

How can I reorganize my ajax call to reload whole table #buyBookForm?
How can I reload only part of table #bought_column?

Yan Pak · Accepted Answer · 2016-07-21 12:38:03Z

1

How can I reorganize my ajax call to reload whole table #buyBookForm?

$('#call').click(function ()
  {
    $.ajax({
    type: "post",
    url: "books",
    data: $('#buyBookForm').serialize(),
    success: function(data) {
      $('#buyBookForm > table').html(data); //assumed that you get whole table from the ajax call
    }
  });
});

How can I reload only part of table #bought_column?

assumed that you get array of data (in JSON notation) that belongs to bought_column

$('#call').click(function ()
  {
    $.getJSON({
    url: "books",
    data: $('#buyBookForm').serialize(),
    success: function(data) {
      // Takes every 4-th td element of 6-columns table 
      $('#buyBookForm > table td').filter(function(a,b){return (a+3)%6 == 0;}).each(function(a,b){$(b).html(data[a])});
    }
  });
});

answered Jul 21, 2016 at 12:38

Yan Pak

1,8772 gold badges22 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update table/part of table using Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related