jQuery & ASP: creating a "more" button with AJAX (part 2)

Tweet

As explained in my previous post, today we are going to create the page needed to update our names list, when the "more" button is pressed.

I believe you followed me in the previous article. If not, please read it before continuing, because otherwise you won't understand what I'm writing here.

Creating the more.asp page

As said, we now need to create the more.asp document. In this page we will get the updates for our list and pass them to the AJAX request. The more_updates div will be changed and a new "more" button created, if the end of the recordset is not already reached.


I will explain the code piece by piece, because it might look complicated (while - believe me - it is not). Follow me...

Getting the data
First of all, we create the variable that will handle the AJAX parameter lastmsg.

<%
Dim more_data_param
more_data_param = "0"
If (Request("lastmsg")  <> "") Then
  more_data_param = Request("lastmsg")
End If
%>

The variable more_data_param will be used in our query.
We get the new 3 records for the update:

<%
Dim more_data
Dim more_data_cmd

Set more_data_cmd = Server.CreateObject ("ADODB.Command")
more_data_cmd.ActiveConnection = your_connection_string
more_data_cmd.CommandText = "SELECT TOP(3) id, name FROM dbo.names WHERE id > ? ORDER BY id ASC"
more_data_cmd.Prepared = true
more_data_cmd.Parameters.Append more_data_cmd.CreateParameter("param1", 5, 1, -1, more_data_param) ' adDouble

Set more_data = more_data_cmd.Execute
%>

Change your_connection_string with an appropriate connection string (as usual!). With the above code, we retrieve 3 new records with an ID greater than the passed parameter (lastmsg from AJAX request).

We then need to know which is the highest ID. That's because we need to know when we will reach the end of the recordset:

<%
Dim highest_id
Dim highest_id_cmd

Set highest_id_cmd = Server.CreateObject ("ADODB.Command")
highest_id_cmd.ActiveConnection = your_connection_string
highest_id_cmd.CommandText = "SELECT max(id) as hid FROM dbo.names"
highest_id_cmd.Prepared = true

Set highest_id = highest_id_cmd.Execute
%>

hid will be our highest ID.

Showing the results

Now we have everything we need. We can create a repeat region:

<%
While (NOT more_data.EOF)
%>

And create a new div (this div will be appended to the more_updates div when the AJAX request is successful):

 <div> <span><%=(more_data.Fields.Item("name").Value)%></span></div>

Update the last_id variable and close the repeat region:

<%
last_id=(more_data.Fields.Item("id").Value)
more_data.MoveNext()
Wend
%>

Recreate the removed "more" button

We then need to recreate the "more" button which - if you remember - we removed while updating the list. We are going to insert it only if we haven't reached the end of the recordset:

<%if CInt(last_id)<CInt(highest_id.Fields.Item("hid").Value) then%>
   <div id="morebutton"><input name="more" type="button" class="more" id="<%=last_id%>" value="More"></div>
<%end if%>

Ok we are near to end. We just need to...

Close the recordsets

We need to close everything before the end of the page:

<%
more_data.Close()
Set more_data = Nothing
%>
<%
highest_id.Close()
Set highest_id = Nothing
%>

And that ends our journey. Place the two pages on your server and enjoy the show!

Let me know your thoughts please!