Jonathan Jonathan - 21 days ago 8
Ajax Question

Update Classic ASP DIV without reloading the webpage using jQuery

This should be really simple, so, either I am over thinking it or making it more complicated than it should be.

I would like to update a DIV without having to reload the webpage.

A form on Canvas.asp queries the database and returns the coordinates of a GPS device. The coordinates are updated every minute and would like the script to return the latest coordinates without having to refresh the page. The coordinates are appended to a separate XML file.

I have written this;

<script type="text/javascript">
$(document).ready(function() {
var auto_refresh = setInterval(function() {
}, 60000);
$.ajaxSetup({ cache: false });

The div to be reloaded;

<div id="map"></div>

The script returns an error by duplicating the header and content, after 60 seconds the map DIV is nowhere to be seen... Simply disappears! The coordinates are appended to the XML file every 60 seconds, even after the error.

What am I doing wrong?


Looks like you are always returning the full result of your canvas.asp page which will always be a full HTML document which will not play nice with your <div>.

The issue here is how you handle passing partial content back and that comes down to how you structure your ASP page. Here is a bare bones template I use often for this type of thing.

    Option Explicit

    Dim action, def_action

    Const BASE_ERROR_VAL = 1000
    Const DISPLAY_PAGE = 0

    'Without this the page does nothing, this is the gateway to your page.
    Call init()

    'First code that get's run when page is requested
    Sub init()
      def_action = DISPLAY_PAGE

      'Process query string
      action = Request.QueryString("a") & ""
      If Len(action) > 0 and Isnumeric(action) then action = CInt(action) Else action = def_action

      Select Case action
        Call load_page()
        Call load_canvas()
      Case Else
        'As we have a default this should NEVER happen, but always worth covering your bases.
        Call Err.Raise(vbObjectError + BASE_ERROR_VAL + 1, "canvas.asp", "Action required")
      End Select
    End Sub

    Sub load_page()

    <% Call load_canvas() %>
    End Sub

    Sub load_canvas()
    End Sub

This is purely bare bones and is just designed to give you an idea of how you could approach it, so for example to call just the canvas part of the HTML you would use something like


and either not pass &a at all (as DISPLAY_PAGE is the default) or pass


to display the whole HTML.

You might also noticed I included

<% Call load_canvas() %>

inside the load_page() procedure, this is just for the situation where you might want the content of the canvas also rendered on the full pass and then changed later on via a partial pass using a=1 for example.