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?
2 answers
solution1
1 ACCPTED 2016-09-28 21:58:19
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.
solution2
0 2016-10-05 13:13:08
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.