Show More button pagination, AJAX/jQuery/JAVA

[ReA1]

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

[Dormilich]

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.

[ReA1]

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?

[Dormilich]

impossible to say without code.

[ReA1]

myFunction(){
    $   .ajax({							
type:POST',				
url : 'myURL',

no the URL controller that will be executed, will return the Object.
I already have a table,

<fieldset>
        <table>
            <tbody>
                <c:forEach var="box" items="${boxItems}">
                     <tr>
                        <td width="10%">
                            <div id="boxDetails">
                                <a //some data;</a>
                            </div>
                        </td>
                        <td width="30%">
                            <c:out value= //some value" />
                        </td>
                        <td width="30%">
                           <span //some value
                           </span>
                        </td>
                        <td width="30%">
                        </td>
                    </tr>
                    <c:forEach items="${boxChanges}" var="property" varStatus="status" >
                        <tr>
                           <td width="10%">
                           </td>
                           <td width="30%">
                               <c:out value="${item.key}" escapeXml="false"/>
                           </td>
                           <td width="30%">
                               <c:out value="${item.value.oldValue}" escapeXml="false"/>
                           </td>
                           <td width="30%">
                               <c:out value="${item.value.newValue}" escapeXml="false"/>
                           </td>
                        </tr>
                    </c:forEach>
                </c:forEach>
            </tbody>
        </table>
    </fieldset>

Now, I want to append similar table by having AJAX call to this table creating during the first call.

[Dormilich]

is this a server-side or a client-side template?

[ReA1]

It will be a client side template.

[Dormilich]

then you just need to run that template again, only with more data.

[ReA1]

you want to say,
("#divID").appe nd("#divID")
Is it the way to do it?

[Dormilich]

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.

[ReA1]

Could you help me with this?

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

How do I write it in JavaScript?

Basically how can we replace <c:out> in javascript?

[Dormilich]

JSP, ain’t that Java?

[RockybBalboa]

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:

$.ajax({
    type: "POST",
    url: "jquery-ajax-subscribe.php", // php page
    data: {newcontent: 10}, // pass parameter to fetch new content from database
    success: function (msg) {
        //append them to your ul element.
    },
    error: function (req, status, error) {
        alert("Some error");
    }
});