Update Classic ASP DIV without reloading the webpage using jQuery

Question

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() {
      $("#map").load('canvas.asp');
      var auto_refresh = setInterval(function() {
        $("#map").load('canvas.asp?std=<%=session("7digit")%>&submit=Search&execute=1');
      }, 60000);
      $.ajaxSetup({ cache: false });
    });
</script>

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?

You need to make sure that the ajax request canvas.asp?std=<%=session("7digit")%>&submit=Search&execute=1 only returns contents of the div you require, at the moment I would bet the request returns a full HTML document which will not load into a div. Use something like Chrome Dev Tools (F12) and check the network tab to see what the xhr is returning or use an alert() or console.log() to see what the ASP is outputting as the result. — user692942
– user692942, Commented Sep 28, 2016 at 21:16
@Lankymart This is exactly what it is doing. Any suggestions on how the script should look? — Henry
– Henry, Commented Sep 28, 2016 at 21:31
You will need to make sure it only passes back what you need, this comes down to how you structure the ASP page to deal with it, say pass a querystring argument that you can check with Request.QueryString("yourargument") = "..." and only return whats needed. — user692942
– user692942, Commented Sep 28, 2016 at 21:36

user692942 · Accepted Answer · 2016-09-28 21:58:19Z

1

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
    Const DISPLAY_CANVAS_CONTENT = 1

    '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()
      'Defaults
      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
      Case DISPLAY_PAGE
        Call load_page()
      Case DISPLAY_CANVAS_CONTENT
        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()
>%
<html>
  <head>
  ...
  </head>

  <body>
    <% Call load_canvas() %>
  </body>
</html>
<%
    End Sub

    Sub load_canvas()
%>
    <canvas>
    ...
    </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

canvas.asp?std=<%=session("7digit")%>&a=1

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

canvas.asp?std=<%=session("7digit")%>&a=0

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.

answered Sep 28, 2016 at 21:58

user692942

16.4k8 gold badges85 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Henry Over a year ago

Thanks for this, could you clarify what the <canvas> ... </canvas> below the html tag is for?

user692942 Over a year ago

Well @Jonathan I was kind of assuming that you were loading a <canvas> into your <div> via AJAX. If this assumption is wrong the approach can still be used to load whatever you want.

user692942 Over a year ago

I was also assuming that you knew Classic ASP server-side code, is this not the case? You realise that passing a=0 (or nothing due to default) will only load the contents of load_page() (which is your full HTML) and a=1 will only load the contents of load_canvas() (which would be your partial content for the AJAX call)? The fact you enquire about the <canvas></canvas> below the <html> makes me wonder...

Henry Over a year ago

Classic ASP isn't something i know a great deal about, other than the a little more than the basics... I'm adding some additional functionality to a old system - I appreciate what you've shown me... I was expecting a rewritten version of the ajax

user692942 Over a year ago

@Jonathan no problem, if it helps anything inside <% %> is processed server-side before the response is passed to the client.

|

Henry · Accepted Answer · 2016-10-05 13:13:08Z

0

While the answer provided by @Lankymart demonstrates the desired page template and the correct layout of code which enables greater flexibility, the answer is a simple Ajax function.

setInterval(ajaxRequest, 15000);
    function ajaxRequest() {
        $.ajax({
            type: 'GET',
            url: 'xmlUpdateScript.asp',
            data: {
                7digit: "<%=session("7digit")%>"
            }
        });
    }

The Ajax request executes the 'xmlUpdateScript.asp' and returns the next set of coordinates which are placed inside the XML document and can be rendered to the map.

answered Oct 5, 2016 at 13:13

Henry

1485 silver badges21 bronze badges

Collectives™ on Stack Overflow

Update Classic ASP DIV without reloading the webpage using jQuery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related