Blogging Tips

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

On many web sites, we can see lists of news, updates, notifications and similiar elements with a "more" button. That button will add elements to the list when pressed. I believe you saw something similar, used especially on Social Networks like Facebook or Twitter.

In the following article we will create a "more" button using jQuery and getting the list of elements from a database, using ASP. The project has two ASP pages, one containing the list and the jQuery code (AJAX), and the second with the code needed to update the list.

Let's start building the first page.

Start creating a new document and calling it "main.asp". The page will contain all the code to create the list with the "more" button and the jQuery code that will make an AJAX request for updates. In the following example I assume we have a database (SQL Server or whatever you prefer) from which we will get the data. We will query a table containing only two fields: an ID and a name. The ID will be an important field because we are going to select records filtering them by ID. As a further development, we can use a date instead: the idea behind is the same, so it won't be difficult for you to change it to your liking.

Getting the first 3 records
In our main.asp page, we start adding the ASP code to query our database:

<%
Dim first_data
Dim first_data_cmd

Set first_data_cmd = Server.CreateObject ("ADODB.Command")
first_data_cmd.ActiveConnection = your_connection_string
first_data_cmd.CommandText = "SELECT TOP(3) id, name FROM dbo.names ORDER BY id ASC"
first_data_cmd.Prepared = true

Set first_data = first_data_cmd.Execute
%>

A few notes on the above code. First of all, remember to change your_connection_string, with an appropriate connection string to your database. Secondly, notice that with the above query we are retrieving only the first 3 records from the table (TOP(3)). We get the name and the id from the table called names. We order the records by id (ascending).

In the head of your main.asp page, add the following snippet:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" ></script>
<script type="text/javascript">
$(function() {
  $('.more').live('click',function() {
    var element = $(this);
    var msg = element.attr('id');
    $('#morebutton').html('Loading');
    $.ajax({
      type: 'POST',
      url: 'more.asp',
      data: 'lastmsg=' + msg,
      cache: false,
      success: function(html){
        $('#morebutton').remove();
        $('#more_updates').append(html);
      }
    });
  });
});
</script>

With it, we include the jQuery library and we create a function which will be executed when the "more" button is clicked. We are going to use the ID of the button as parameter for the AJAX request. I don't know if you are familiar with jQuery and AJAX, but basically with the above code we are sending an AJAX request to another document (more.asp) sending lastmsg as parameter to be used in a query. With a successful response to the AJAX request, we are going to append the collected data to a div, while removing the "more" button (don't worry, after removing it, we are going to add it again in case we are not at the end of the recordset).

The body section
In the body of our main.asp page, we add the following code (I will explain it piece by piece):

<div style="width:500px;">

This is the outer container. You can style it, if you like.

<%
dim last_id
last_id=0
%>

We create a variable that will contain the last retrieved ID (last_id).

<%
While (NOT first_data.EOF)
%>

We start the repeat region.

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

We insert the data already collected from the database. The div will have an ID with a value equal to the ID collected from the database.

<%
last_id=(first_data.Fields.Item("id").Value)
%>

We update the last_id variable, with the last retrieved ID.

<%
first_data.MoveNext()
Wend
%>

We close the repeat region.

<div id="more_updates"></div>

We create a div that will contain the updates.

<div id="morebutton"><input name="more" type="button" class="more" id="<%=last_id%>" value="More">
</div>

We create the "more" button - nearly there!

</div>

We close the outer container.
At the end of your main.asp page, we close the connection to our database:

<%
first_data.Close()
Set first_data = Nothing
%>

And that's it.

In the next article we will build the more.asp page, used to collect the updates.

Enjoy yourself and let me know if you have problems.