Welcome Guest Search | Active Topics | Sign In | Register

Callback Panel Options
David_1111
Posted: Monday, September 10, 2007 1:26:29 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11

I want the serverside part of the aspx (vb) to check for new sql data every 30 seconds.

If new data arrived then update the client.

Playing with the callback panel, I still dont know how to fix this....

I have a setTimeout function on the client....but I dont know how to call the server from the client WITHOUT using a button "click".

Please help,


David


eo_support
Posted: Monday, September 10, 2007 6:59:28 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi David,

Call eo_Callback client side JavaScript function in your setTimeout function and then handle the Callback_Execute event on the server side:

http://www.essentialobjects.com/ViewDoc.aspx?t=JSDoc.Public.Global.eo_Callback.html

Thanks
David_1111
Posted: Tuesday, September 11, 2007 2:56:24 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11
Thanks!

It helped....know how can I call a javascript from the server....the ClientSideAfterUpdate is good , but I need to pass a string to the javascript function....

I have a workaround where I use a asp:label and store the string and use the javascript function declared in ClientSideAfterUpdate attribute...but something is wrong because it keeps calling the same function every time my timer does speak with the server.....

eo_support
Posted: Tuesday, September 11, 2007 4:57:41 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

You can still use ClientSideAfterUpdate and pass a string to the client. When you are handling Callback_Execute, the event parameter has a Data property. Set that property and it will be carried to the client side as the extraData parameter of your client side handler.

Thanks
David_1111
Posted: Tuesday, September 11, 2007 5:16:58 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11
Sorry it doesn't work...

My alert is empty.... what am I doing wrong...


aspx:
<eo:CallbackPanel ID="cbpMain" runat="server" ClientSideAfterUpdate ="PreviousArrayDraw()"
Triggers="{ControlID:objSlideMenu;Parameter:1}">


aspx.vb
Protected Sub cbpMain_Execute(ByVal sender As Object, ByVal e As EO.Web.CallbackEventArgs) Handles cbpMain.Execute

e.Data = "david"

aspx javascript:
function PreviousArrayDraw(callback, output, extraData)
{

alert(extraData);
eo_support
Posted: Tuesday, September 11, 2007 5:37:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

You need to change your:

ClientSideAfterUpdate ="PreviousArrayDraw()"

To:

ClientSideAfterUpdate ="PreviousArrayDraw"

You only give it the function name, you do not call it. Our code calls it.

Thanks
David_1111
Posted: Tuesday, September 11, 2007 5:47:47 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11
Still no progress....I changed it, but my alert says "undefined"

function PreviousArrayDraw(callback, output, extraData)
{

var s = extraData;
alert(s);
eo_support
Posted: Tuesday, September 11, 2007 5:58:00 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

Try change:

function PreviousArrayDraw(callback, output, extraData)

To:
function PreviousArrayDraw(callback, extraData)

ClientSideAfterUpdate handler takes two parameters. ClientSideAfterExecute takes three. Your handler was for ClientSideAfterExecute.

Thanks

David_1111
Posted: Tuesday, September 11, 2007 6:56:22 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11
Hi again,

I think I'm going crazy here....

The thing is, I have your slidemenu and I have my timer function....But the timer funcion triggers the javascript in ClientSideAfterUpdate....and I only want the slidemenu to trigger the javascript....

It looks like this:

eo:CallbackPanel ID="cbpMain" runat="server" ClientSideAfterUpdate ="PreviousArrayDraw"
Triggers="{ControlID:objSlideMenu;Parameter:1}">

Here is my timer calling the server continuisly:


function UpdateClock()
{
if(clockID)
{
clearTimeout(clockID);
clockID = 0;
}

eo_Callback ('cbpMain','Cancel');

clockID = setTimeout("UpdateClock()", 15000);
}

function StartClock()
{
clockID = setTimeout("UpdateClock()", 500);
}

function KillClock()
{
if(clockID)
{
clearTimeout(clockID);
clockID = 0;
}
}

My problem is that PreviousArrayDraw is called all the times, and I want it to be called ONLY on click on my menu....

How can I do this with help of

Protected Sub objSlideMenu_ItemClick(ByVal sender As Object, ByVal e As EO.Web.NavigationItemEventArgs) Handles objSlideMenu.ItemClick

and
Protected Sub cbpMain_Execute(ByVal sender As Object, ByVal e As EO.Web.CallbackEventArgs) Handles cbpMain.Execute


There must be a way....I cannot use two callback panels since I need to update the same asp:label control....





eo_support
Posted: Tuesday, September 11, 2007 7:05:20 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi David,

PreviousArrayDraw will always be called as long as the callback occurs. So there is no way around that. What you can do is to change code inside PreviousArrayDraw. Inside that function you can do things or not to do things based on extraData set by the server. And on the server side, you can set extraData based on e.Parameter. So it will be something like this:

Code: Visual Basic.NET
Protected Sub cbpMain_Execute(ByVal sender As Object, 
    ByVal e As EO.Web.CallbackEventArgs) Handles cbpMain.Execute

    'Set e.Data only when e.Parameter is 'Cancel', which means
    'the callback is triggered by eo_Callback, not by the SlideMenu.
    'Note here 'Cancel' is not a special word, it's the second
    'parameter that you pass to eo_Callback
    If e.Parameter = "Cancel" Then
        e.Data = "david"
    End If

End Sub


Then do this in your client PreviousArrayDraw:

Code: JavaScript
function PreviousArrayDraw(callback, extraData)
{
    if (extraData == "david")
    {
        //....do something for the timer....
    }
}


Thanks
David_1111
Posted: Tuesday, September 11, 2007 8:09:20 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11
Thank it works, but why does the google map dissapear when the timer triggers......Here is the full code of the page:

Does it have something to do with viewstate?

The procedure for the webuser is that he/she clicks on an item to see the map, the user plays around with the map....and if something happened on the server side the user should be notified.....It's that simple....so the map should not dissapear......

Kind regards,

David

Imports System.Data
Partial Class MyTracker
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lblMessage.Text = "Spårning startad...<br/>"
PopulateTracker()
End If
End Sub
Private Sub PopulateTracker()

Dim objCommon As New iTrace.Common
Dim iCustomerID As Integer
Dim dtTracker As DataTable
Dim drRow As DataRow
Dim i As Integer

iCustomerID = 1

Dim sSQL As String = "SELECT TrackerID,[Name] FROM TRACKER WHERE Customerid= " + CStr(iCustomerID) + " ORDER BY [Name] ASC "

dtTracker = objCommon.SQLGetTable(sSQL)

objSlideMenu.SingleExpand = True
objSlideMenu.RaisesServerEvent = True


For Each drRow In dtTracker.Rows
Dim dmenuitem As New EO.Web.MenuItem
Dim dsmenuitem As New EO.Web.MenuItem

dmenuitem.Value = "AcquireReport," + CStr(drRow.Item("TrackerID"))
dmenuitem.Text.Html = "Begär position"
objSlideMenu.Items.Add(drRow.Item(1))
objSlideMenu.Items(i).SubMenu.Items.Add(dmenuitem)

dsmenuitem.Value = "PreviousArray," + CStr(drRow.Item("TrackerID"))
dsmenuitem.Text.Html = "50 Senaste"

objSlideMenu.Items(i).SubMenu.Items.Add(dsmenuitem)
objSlideMenu.Items(i).SubMenu.Items.Add("Autorapportering")
objSlideMenu.Items(i).SubMenu.Items.Add("GEO-Staket")
objSlideMenu.Items(i).SubMenu.Items.Add("Parkera")
objSlideMenu.Items(i).SubMenu.Items.Add("Återställ SOS")
i = i + 1
Next

objSlideMenu.Items(0).Expanded = True
objSlideMenu.SingleExpand = True
End Sub
Protected Sub objSlideMenu_ItemClick(ByVal sender As Object, ByVal e As EO.Web.NavigationItemEventArgs) Handles objSlideMenu.ItemClick

Dim sArgument As String = CStr(e.MenuItem.Value)
Dim sSplit As String() = sArgument.Split(",")
Dim sPreviousarray As String

Dim objTracker As New iTrace.Tracker(CInt(sSplit(1)))

Select Case sSplit(0)
Case "AcquireReport"
lblMessage.Text = lblMessage.Text + "Söker " + objTracker.Name + "...<br/>"
' objTracker.AcquireReport()
Case "PreviousArray"
lblMessage.Text = lblMessage.Text + "Ritar " + objTracker.Name + "...<br/>"
sPreviousarray = "#PreviousArrayStart#" + objTracker.PreviousArray(50) + "#PreviousArrayEnd#"
lblPreviousArray.Text = sPreviousarray
End Select

End Sub

Protected Sub cbpMain_Execute(ByVal sender As Object, ByVal e As EO.Web.CallbackEventArgs) Handles cbpMain.Execute


Dim objTracker As iTrace.Tracker

If IsNothing(Session("objTracker")) Then
objTracker = New iTrace.Tracker(1)
Session("objTracker") = objTracker
Else
objTracker = Session("objTracker")
End If

If objTracker.PollSMSResponse() Then
lblMessage.Text = lblMessage.Text + objTracker.Name + " lokaliserad...<br/>"
End If

If e.Parameter = "Cancel" Then
e.Data = "david"
End If


End Sub
End Class


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyTracker.aspx.vb" Inherits="MyTracker" %>
<%@ Register TagPrefix="eo" NameSpace="EO.Web" Assembly="EO.Web" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>(C)opyright iTrace AB</title>
<link href="style/core.css" type="text/css" rel="stylesheet" />

<script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>

<script type="text/javascript">

var clockID = 0;

function UpdateClock()
{
if(clockID)
{
clearTimeout(clockID);
clockID = 0;
}

eo_Callback ('cbpMain','Cancel');

clockID = setTimeout("UpdateClock()", 5000);
}

function StartClock()
{
clockID = setTimeout("UpdateClock()", 500);
}

function KillClock()
{
if(clockID)
{
clearTimeout(clockID);
clockID = 0;
}
}

function PreviousArrayDraw(callback, extraData)
{

if (extraData == "david")
{
//alert(1);
return 0;
}


if (extraData != "david")
{




var nLng = '';
var nLat = '';
var sGPSArray;
sGPSArray = document.getElementById("lblPreviousArray").innerHTML;
// alert(1);
//var f = document.getElementById("lblPreviousArray");
//alert (sGPSArray);
sGPSArray = Extract("PreviousArray",sGPSArray)
if (sGPSArray != '')
{
var temp = new Array();
temp = sGPSArray.split(',');
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//map.addControl(new GLargeMapControl());
//map.addControl(new GOverviewMapControl());

for (y=0;y<=temp.length-1;y++)
{
if (temp[y].substring(0,3)=='LAT')
{
nLat = temp[y].substring(3,temp[y].length);
}

if (temp[y].substring(0,3)=='LNG')
{
nLng = temp[y].substring(3,temp[y].length);
}


if (nLng != '')
{
//todo: set center at last position
map.setCenter(new GLatLng(nLat, nLng), 13);



var point = new GLatLng(nLat,nLng);
map.addOverlay(new GMarker(point));
map.addOverlay(createMarker(point, '' + nLat + ' ' + nLng));

//Info Window

map.openInfoWindow(map.getCenter(),document.createTextNode("Senaste positionen."));

//AutoPan
//setTimeout("waitasecond()",500);
//map.panTo(new GLatLng(nLat, nLng));

nLng='';

}


}

}

sGPSArray = '';
}

}


function createMarker(point, markertext)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml("k"); });
return marker;
}


function PlacePoint(sLat,sLng)
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(sLat, sLng), 13);
var point = new GLatLng(sLat,sLng);
map.addOverlay(new GMarker(point));
}
function Extract(sExtract,sFrom)

{

var iStartPos;
var iEndPos;
var sReturn;

iStartPos = sFrom.indexOf('#' + sExtract + 'Start' + '#') + sExtract.length + 7;
iEndPos = sFrom.indexOf('#' + sExtract + 'End' + '#');

sReturn = sFrom.substring(iStartPos,iEndPos);

return (sReturn);

}
</script>
</head>
<body onload="StartClock()" onunload="KillClock()">
<form runat="server" id="MyPages">
<eo:CallbackPanel ID="cbpMain" runat="server" ClientSideAfterUpdate ="PreviousArrayDraw"
Triggers="{ControlID:objSlideMenu;Parameter:1}">
<table>
<tr>
<td valign="top">
<eo:SlideMenu Visible ="true" runat="server" id="objSlideMenu" SingleExpand="True" ControlSkinID="None" Width="220px">
<LookItems>
<eo:MenuItem ItemID="_TopGroup">
<SubMenu Style-CssText="border-right: #beb6a4 1px solid; font-weight: bold; font-size: 12px; border-left: #beb6a4 1px solid; cursor: hand; color: #4a4a44; font-family: verdana" LeftIconCellWidth="10"></SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="30" ItemID="_TopLevelItem" Image-Url="00000600" Image-Mode="ItemBackground">
<SubMenu Style-CssText="color:#555544;font-family:Verdana;font-size:12px;font-weight:normal;" LeftIconCellWidth="10"></SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="34" ItemID="_Default" Image-Url="00000601" Image-HoverUrl="00000602" Image-Mode="ItemBackground"></eo:MenuItem>
</LookItems>
</eo:SlideMenu>

<br/>
<asp:label id="lblMessage" Text="" runat="server"></asp:label>
<br />


</td>
<td valign="top" align="left">
<div id="map" style="width: 730px; height: 570px"></div>
</td>
</tr>
</table>
<br/>
<asp:label id="lblPreviousArray" Visible="true" Text="" runat="server"></asp:label>
</eo:CallbackPanel>
</form>
</body>
</html>
eo_support
Posted: Tuesday, September 11, 2007 8:24:57 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi David,

It's very obvious. :) You are putting the map "anchor element" (div id="map") inside the CallbackPanel. When the CallbackPanel triggers, it first get the new HTML from the server and then replace the old one with it. In your case, Google Map remembered that its parent element is "map", however after the Callback executs, the old map that Google remembers are removed from the document and is replaced with a new "map" element, even though they have the same ID. Google map only learned the old "map" element when the page initially loads and has no knowledge of the new "map" elements.

CallbackPanel is a server control and it works with server controls. While it automatically works with other server controls well, it has no knowledge of your client side objects (in your case, Google map) and it will not do anything special for them. In your case, since the CallbackPanel has removed Google map's parent node, Google map along with its parent div will become an "orphan" node that is not attached to anywhere after the CallbackPanel.

The best way for you is to leave Google map outside of the CallbackPanel --- since Google map is completely a client side object and there is no need for you go back to the server to update the map itself (you can still go back to the server to generates other script code to execute, just like what you did). You can use multiple CallbackPanel and use GroupName to group them together if necessary.

Thanks
David_1111
Posted: Tuesday, September 11, 2007 9:26:10 AM
Rank: Member
Groups: Member

Joined: 9/10/2007
Posts: 11
Thanks for the quick reply now it works as intended!

I must say you support is great, it's fast, helping and learning.

Thanks again!

/David

eo_support
Posted: Tuesday, September 11, 2007 10:02:12 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
You are very welcome. Glad to hear that our solution works for you!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.