instant update from database in aspx page using AJAX

Hi

Can someone point me in the right direction? I have a simple admin screen on my website which shows a tables values from my mssql database. How ever, rather than refreshing every 30 seconds to check for new entries, is there a way using AJAX which instantly updates the admin screen as soon as a new entry is inserted into the database?

thanks

There's not a way for the server to communicate directly with the client, unless the client requests it. The way functionality like what you want is implemented is to continually ping a light weight service that returns information about the last update to the underlying data.

For example, a JSON Web Method that returns the timestamp of the most recent item, which you can compare with the timestamp of the most recent refresh you did. If it's newer than your last update, then you can call a heavier method to update the table.

You can use window.setInterval() in JavaScript to set up the periodic check.

You really have no choice but to set a timer and check the database at a set interval, unless you want to get outside the realm of AJAX and DHTML.

All web based communication is initiated by the client. The only way to have server initiated communication is through an application, such as an AcitveX Object. There are a few (a very few) websites which address this topic but because it is so much more difficult, invasive to the end-users computer, and platform/browser specific, it is rare to find this type of setup.

thanks for your replies, very interesting. I guess the timer option is the way i will have to go. I wish to make the 'service' as light as possible, and the timestamp seems ideal - do you know of any examples, or have any tips on making this as optimal and least processor intensive as possible?

thanks again

You could basically combine these two posts from my blog, with setInterval, to do it:

http://encosia.com/index.php/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/

http://encosia.com/index.php/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

thanks gt, great posts - just had a quick browse of the rest of your site, you've got some excellent content on there!!

cheers

I decided to put a simple example together, if anyone else is interested: http://encosia.com/index.php/2007/07/25/display-data-updates-in-real-time-with-ajax/

Is it possible to add TabPanel from javascript or WebMethod?

I have a TabContainer that load from aspx code with a default TabPanel.Is it possible to add TabPanel dynamically in that container from client-side scripts?

Hope my question was clear :)

JKB

Initially,I try to add hard-coded HTML element of TabPanel from this script.But not Work properly!

Note:My TabContainer "MainTabContainer" is place on the ContentPlaceHolder.

1<script language="javascript">
2 function AddTab()
3 {
4 var num = 1;
5
6 //TabHead
7 ///////////////////////////////
8 var _spanActive = document.createElement('span');
9
10 //This seem to be the class of activated tab
11 //_spanOut.setAttribute('class','ajax__tab_active');
12
13 var _spanOut = document.createElement('span');
14 _spanOut.setAttribute('className','ajax__tab_outer');
15 _spanActive.appendChild(_spanOut);
16
17 var _spanIn = document.createElement('span');
18 _spanIn.setAttribute('className','ajax__tab_inner');
19 _spanOut.appendChild(_spanIn);
20
21 var _headID = '__tab_ctl00_ContentPlaceHolder1_MainTabContainer_Module'+num;
22 var _spanHead = document.createElement('span');
23
24 //**********
25 _spanHead.setAttribute('_events','[object Object]');
26
27
28 _spanHead.setAttribute('className','ajax__tab_tab');
29 _spanHead.setAttribute('id',_headID);
30 _spanHead.innerHTML = "MyHeader";
31 _spanIn.appendChild(_spanHead);
32
33 var tabHead = $get("ctl00_ContentPlaceHolder1_MainTabContainer_header");
34 tabHead.appendChild(_spanActive);
35 ///////////////////////////////
36
37 //TabBody
38 //////////////////////////////
39 //Main
40 var tabID = 'ctl00_ContentPlaceHolder1_MainTabContainer_Module'+num;
41 var _tabHtml = document.createElement('div');
42 _tabHtml.setAttribute('className','ajax__tab_panel');
43
44 //******
45 _tabHtml.setAttribute('control','[object Object]');
46
47 _tabHtml.setAttribute('id',tabID);
48 _tabHtml.style.visibility='hidden';
49
50 //Body
51 var bodyID = tabID+'_ctl00_body';
52 var _tabBody = document.createElement('div');
53 _tabBody.setAttribute('id',bodyID);
54
55 _tabHtml.appendChild(_tabBody);
56
57 var tabMainBody = $get("ctl00_ContentPlaceHolder1_MainTabContainer_body");
58 tabMainBody.appendChild(_tabHtml);
59
60 ///////////////////////////////////////////////////////////
61
62 var tabCon = $get("ctl00_ContentPlaceHolder1_MainTabContainer");
63 var stHtml = tabCon.innerHTML;
64 //alert(stHtml);
65 num+=1;
66 }
67
68</script>

The TabContainer add new tab to its but every TabPanel function doesn't work. i.e.The tab cannot be selected.

Any suggestion?

Hi,

Here is the essential part of adding panel on client side:

<inputid="Button1"type="button"value="Create Tab"onclick=" createTab();"/>
<inputid="persist"/>

functioncreateTab() {
var newPanel =newAjaxControlToolkit.TabPanel($get("persist"));

newPanel.set_owner(tc);
newPanel.initialize();
Array.add(tc.get_tabs(),newPanel);

$create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_p4")},null,{"owner":"TabContainer1"},$get("TabContainer1_p4"));

}

Raymond Wen - MSFT:

Hi,

Here is the essential part of adding panel on client side:

<inputid="Button1"type="button"value="Create Tab"onclick=" createTab();"/>
<inputid="persist"/>

functioncreateTab() {
var newPanel =newAjaxControlToolkit.TabPanel($get("persist"));

newPanel.set_owner(tc);
newPanel.initialize();
Array.add(tc.get_tabs(),newPanel);

$create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_p4")},null,{"owner":"TabContainer1"},$get("TabContainer1_p4"));

}

Problem occur while running script and throw exception following :

-----------

Error : 'tc' is undefined

Code : 0

-----------

This run on IE6 SP2

What's the problem?

Anyway,Thank you for your code.

tc is a global variable holding reference to the TabContainer instance on the page.

tc = $find("TabContainer1");

Raymond Wen - MSFT:

tc is a global variable holding reference to the TabContainer instance on the page.

tc = $find("TabContainer1");

After I follow your instruction.an error appear :

Error : 'this._header.parentNode' is null or not an object

What can i do?

Sorry for some stupid question,I'm a beginner in javascript. :-)

A working example:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function addTab() { var headerHolder = $get("TabContainer1_header"); var tabHeader = $get("newheader"); headerHolder.appendChild(tabHeader); var contentHolder = $get("TabContainer1_body"); var tab = $get("newpanel"); contentHolder.appendChild(tab); tab.style.display = "none"; $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("newheader")}, null, {"owner":"TabContainer1"}, $get("newpanel")); } </script></head><body><form id="form1" runat="server"><asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager><div> <input id="Button1" type="button" value="button" onclick="addTab();"/> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"> <ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <HeaderTemplate>tab 1</HeaderTemplate> <ContentTemplate>Content of tab 1</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <HeaderTemplate>tab 2</HeaderTemplate> <ContentTemplate>Content of tab 2</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> <HeaderTemplate>tab 3</HeaderTemplate> <ContentTemplate>Content of tab 3</ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <br /> <br /> <br /> <br /> <span id="newheader">TabPanel4</span><div id="newpanel">this is new panel</div></div></form></body></html>

Is it possible to cancel update of an UpdatePanel?

Hi there,

I have an UpdatePanel in my .aspx page. I have a timer control which "ticks" on regular intervals (say, every minute or every 20 seconds) and causes the panel to update (which is specified via the UpdatePanel's Triggers collection).

On the server side, I check whether there have been any changes since last update and whether I need to actually update the panel. If no changes, I don't want the UpdatePanel to flush the same contents to the client browser as it already has. So what I want is kinda "cancel" the UpdatePanel under certain circumstances.

How can I achieve that? Thanks in advance.

Hi,

You should set UpdatePanel.Mode = Conditional, remove all triggers from your UpdatePanel and update your panel programmatically in the tick event.

 <atlas:UpdatePanel ID="udp1" runat="server" Mode="Conditional"> <ContentTemplate><%-- Put your content here--%>

 </ContentTemplate> </atlas:UpdatePanel> <atlas:TimerControl ID="tc1" runat="server" Interval="60000" OnTick="tc1_Tick" />

protected void tc1_Tick(object sender, EventArgs e){if (ThePanelMustBeUpdated())this.udp1.Update();}

Oh.. right... it's so simple..

Thank you very much