By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,548 Members | 1,120 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,548 IT Pros & Developers. It's quick & easy.

Show More button pagination, AJAX/jQuery/JAVA

P: 6
I have a function, say A() that calls some elements from the database depending on the range provide.
What I want to do is, on the UI, there is a 'Load More' button, which when clicked, displays next set of items, by calling the above function A() by making an AJAX call using jQuery.
I went through some forums, but was not able to get a clear understanding of how to do it.

Thank you
Aug 16 '13 #1
Share this Question
Share on Google+
12 Replies

Expert Mod 5K+
P: 8,639
it all depends on how you select the elements out of the DB. if (e.g.) you use a LIMIT clause and pass the amount of sets and a starting number, you simply need to increase the starting number parameter in the AJAX call.
Aug 16 '13 #2

P: 6
Ya, but what I want to know is, like I mention the URL in the AJAX call which calls the corresponding controller function. Now that function sends an Object as a result, and I want only certain fields of that object to be merged with the original html table that was created during the page loading. How do I do that?
Aug 17 '13 #3

Expert Mod 5K+
P: 8,639
impossible to say without code.
Aug 17 '13 #4

P: 6
Expand|Select|Wrap|Line Numbers
  1. myFunction(){
  2.     $   .ajax({                            
  3. type:POST',                
  4. url : 'myURL',
no the URL controller that will be executed, will return the Object.
I already have a table,
Expand|Select|Wrap|Line Numbers
  1. <fieldset>
  2.         <table>
  3.             <tbody>
  4.                 <c:forEach var="box" items="${boxItems}">
  5.                      <tr>
  6.                         <td width="10%">
  7.                             <div id="boxDetails">
  8.                                 <a //some data;</a>
  9.                             </div>
  10.                         </td>
  11.                         <td width="30%">
  12.                             <c:out value= //some value" />
  13.                         </td>
  14.                         <td width="30%">
  15.                            <span //some value
  16.                            </span>
  17.                         </td>
  18.                         <td width="30%">
  19.                         </td>
  20.                     </tr>
  21.                     <c:forEach items="${boxChanges}" var="property" varStatus="status" >
  22.                         <tr>
  23.                            <td width="10%">
  24.                            </td>
  25.                            <td width="30%">
  26.                                <c:out value="${item.key}" escapeXml="false"/>
  27.                            </td>
  28.                            <td width="30%">
  29.                                <c:out value="${item.value.oldValue}" escapeXml="false"/>
  30.                            </td>
  31.                            <td width="30%">
  32.                                <c:out value="${item.value.newValue}" escapeXml="false"/>
  33.                            </td>
  34.                         </tr>
  35.                     </c:forEach>
  36.                 </c:forEach>
  37.             </tbody>
  38.         </table>
  39.     </fieldset>
Now, I want to append similar table by having AJAX call to this table creating during the first call.
Aug 18 '13 #5

Expert Mod 5K+
P: 8,639
is this a server-side or a client-side template?
Aug 18 '13 #6

P: 6
It will be a client side template.
Aug 18 '13 #7

Expert Mod 5K+
P: 8,639
then you just need to run that template again, only with more data.
Aug 18 '13 #8

P: 6
you want to say,
Is it the way to do it?
Aug 18 '13 #9

Expert Mod 5K+
P: 8,639
I do not know how your template works, so I can’t say.

however, duplicating content (that’s what your code applies) is certainly not what you want, esp. if you duplicate IDs which must be unique by definition.
Aug 18 '13 #10

P: 6
Could you help me with this?

I have the following code in jsp,
<c:out value="${fn:replace(getData, '@something', '')}"

How do I write it in JavaScript?

Basically how can we replace <c:out> in javascript?
Aug 19 '13 #11

Expert Mod 5K+
P: 8,639
JSP, ain’t that Java?
Aug 19 '13 #12

P: 5
You can use jQuery AJAX Method here to call a server side page (PHP page).

This PHP method will call and fetch new values form the database and return them to the .ajax() method. Then you can simply append them to your ul element.

Below is the explanation of jQuery .ajax() method:

Expand|Select|Wrap|Line Numbers
  1. $.ajax({
  2.     type: "POST",
  3.     url: "jquery-ajax-subscribe.php", // php page
  4.     data: {newcontent: 10}, // pass parameter to fetch new content from database
  5.     success: function (msg) {
  6.         //append them to your ul element.
  7.     },
  8.     error: function (req, status, error) {
  9.         alert("Some error");
  10.     }
  11. });
Feb 1 '18 #13

Post your reply

Sign in to post your reply or Sign up for a free account.