Showing posts with label controls. Show all posts
Showing posts with label controls. Show all posts

Wednesday, March 28, 2012

calling javascript functions

I am working on an ajax web page which has several controls including a ScriptManager control and the ajax Timer control. When the timer fires a tick I want the server side to perform some calculations and then call a client script function with the results. The client script will then do something with the results.

Also, I want to call another javascript function when I click a button.

I'm a bit rusty with javascript, so I'd like to see examples on how to make this work.

What and where exactly you want to do?

When the timer fires, I want the server to generate (calculate) a pair of integers (or possibly an array of pairs) and call a javascript function on the client side passing those numbers. The client will then "plot" points on a graphics window using some built-in drawing java functions I have. The timer will probably fire several times a second. The client does not need to make any calls to the server.

When a button is clicked, I want the server to call another javascript function (passing no arguments) which will erase the graphics window. The timer continues firing.

I have other buttons, to start and stop the timer, sliders to change the timer rate and other parameters, checkboxes and radio buttons which also affect the calculations, etc. All I need help with is making the client calls and passing the data. Is the ScriptManager useful in that respect? By the way, I'm kind of "new" in java.

I've seen scenarios where client calls server, and server calls the client back with a reply. However, can the server just call the client repeatedly? Or does the timer control act as the client-to-server caller?


Yo can use for calling javascript function

Registering Custom Script

from ScriptManager

http://ajax.asp.net/docs/mref/O_T_System_Web_UI_ScriptManager_RegisterClientScriptBlock.aspx

For calling server side function use web services..


Actually, what I need to do requires "COMET", a form of "reverse AJAX". Is there an easy way to emplement COMET in ASP.Net? When the user clicks the "start" button, the server needs to begin "firing" pairs of numbers at the client at a steady rate (several times a second) until the user clicks the "stop" button.


Hi,

According to theclient life cycle, you can hook an event handler to theloadevent which will be fired every time an partial postback returns. Then invoke your graphical jscript function in it. For instance:

<%@. 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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<input id="time" />
</form
<script type="text/javascript">
function draw(){
var dt = new Date();
$get("time").value = dt.toString();
}

Sys.Application.add_load(ApplicationLoadHandler)

function ApplicationLoadHandler(sender, args)
{
draw(); // invoke your graphical function instead
}
</script
</body>
</html>


Thanks, but I didnt get it what does this do ?


 <script type="text/javascript">
function draw(){
var dt = new Date();
$get("time").value = dt.toString();
}

Sys.Application.add_load(ApplicationLoadHandler)

function ApplicationLoadHandler(sender, args)
{
draw(); // invoke your graphical function instead
}
</script>


This is a javascript function with no usefulness at all, just for demostration purpose. You need to invoke what you really need here.

I need the server to send a pair of numbers to the client each time it fires.


You can expose the method of sending numbers as a web service on the server.

Then invoke it at client side.

Please read this:

http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

calling external javascript functions/ library from within an update panel

I have an application with a large number of javaScript functions that reside in external .js files. User controls that reference these files work perfectly.

When usercontrols inside updatepanels call the external javascript functions and libraries, they fail with 'object not found' errors.

I tested using the scriptmanager.registerclientscriptblock by adding a concatenated string with a simple function and it worked. But this is a bad way to do things both from a debugging standpoint as well as ease of code. There must be a better way?

Dim scriptTextAsString

scriptText = _

"function prepareToClose() {"

& _

"alert('prepare to close');"

& _

"test();"

& _

" }"

System.Web.UI.ScriptManager.RegisterClientScriptBlock(

Me.btnLoad,Me.GetType(),"prepare_close", scriptTextTrue)

btnLoad.Attributes.Add(

"onCLick","prepareToClose(); return false;")

What is the best way to do this?

Unless someone has a better solution, here is what I did. Basically, I load the external file into a string and use the rgisterScriptBlock...everything works well and there is still just 1 instance of the scripts for easy maintenance and other non-ajax pages can use them. Here is the code for anyone interested.:

System.Web.UI.ScriptManager.RegisterClientScriptBlock(Me.btnClose, Me.GetType(), "objectives", regLongScript("objectives.js"), True)


...

Private Function regLongScript(ByVal incoming_name As String) As String
Dim objStreamReader As IO.StreamReader
Try
Dim file_name As String = ""
file_name = Request.PhysicalApplicationPath & "a\js_scripts\" & incoming_name
objStreamReader = File.OpenText(file_name)
Return objStreamReader.ReadToEnd()

Catch ex As Exception
Return ""
Finally
objStreamReader.Close()
End Try
End Function


Here's how I've been doing it:

ScriptManager.RegisterStartupScript(

UpdatePanelTest,

UpdatePanelTest.GetType(),

"keyValue",

"alert('test')",

true);


Here's how I've been doing it:

ScriptManager.RegisterStartupScript(

UpdatePanelTest,

UpdatePanelTest.GetType(),

"keyValue",

"alert('test');",

true);

Monday, March 26, 2012

Callback (ICallbackEventHandler) and Atlas. Can they work together ?

I am new in Atlas. It seems very simple to use (Update Panel). However, I have several composite controls that use theICallbackEventHandler. When I mix them with Atlas UpdatePanel they do not work.

Any suggestions.

Thanks

We are currently investigating such issues. Thanks for the report.


Are there any news conerning this issue?

I have a custom (image map like) control which reacts to clicks by a javascript. the javascript part sets postback values like x, y, and raises a postback by form.submit().

Now when I place this control on an UpdatePanel, the javascript:form.submit() raises a postback, but not a partial postback... Do I have to register the javascript somewhere else (expect RegisterClientScript or so)? Or is there a way to make a postback in order that the server updates the UpdatePanel with a new image? I tried the Callback (standard provided by ASP.NET 2.0), but this seems only to be for delivering a string value from server to client (at least I couldnt kick off any partial update of the page..)

Regards,

Ray

Hi,

Can you say if controls using IcallbackEventHandler will be supported when used in Atlas UpdatePanels?

thx


As far as I can see, I don't think this is possible at all, since the two postbacks are happening in two different contexts. It would probably require a change to the whole javascript callback library included in ASP.NET 2.0. What we need here is the ability to send two events back to the client, and returning them all in one context.

Having said that, I really really wish this was possible. Although the ASP.NET AJAX library has some really cool controls, there will always be cases where you would need to supplement with your own AJAX-style controls, and the events on these controls should trigger fx. the UpdatePanel.

Saturday, March 24, 2012

Calender Control

Hi,

i am using ajax controls in asp.net.and the problem is with calender control,when i run the application the controls goes behind the text boxes.so whats will be he solution???

Regards ASAD

Just a quickie idea but what if you change the z-index in the styles? will that help?


Hi Asadikram02,

Has your problem been resolved yet ? This kind of issue often occurs on select control and we resolve it by identify its z-index property. Here is the Article which shows the solution. http://support.microsoft.com/default.aspx?scid=kb;en-us;177378

<script>
function setindex()
{
div1.style.zIndex=text1.value;
select1.style.zIndex=text2.value;
getindexes();
}

function getindexes(){

text1.value=div1.style.zIndex;
text2.value=select1.style.zIndex;
text3.value=5;
}
</script>
Above is a sample to set the z-index for a select control. It is similar to your problem.

If it doesn't work , please post your simple sample which contains this issue. Thanks

Best regards,

Jonathan

Wednesday, March 21, 2012

CalendarExtender, ValidatorCallout, or FilteredTextboxExtender Causing Error in Partial Po

Hello everyone,

I really enjoy working with the Controls Tookit. The ValidatorCallout is especially nice to use. I'm trying to use a drop-down list to cause a partial postback in an updatepanel. When the ddl selectionchanges, it is supposed to pull database information and then populate some textfields. These textfields have been wrapped in sometimes all three of the extenders listed above. When I change the selection on the ddl, I get a Javascript error:

Line: 5909 Char: 12 Sys.ArgumentUndefinedException: value cannot be undefined. Parameter name: id.

I know this is in one of the javascript files that get attached to my code when it gets built. I'm trying to figure out what's the root cause. Do you think the page is trying to validate the empty textfields? The validatorcallouts are not firing, if that is the case. I've attached my aspx code. Let me know if the code-behind would be useful as well.

Thanks for any help you can provide.

<asp:ScriptManager runat="server" ID="smModify" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table> <tr> <td colspan="3" style="font-size: x-large"><b>Common Fields</b></td> </tr> <tr> <td class="spacer"> </td> <td align="right">Branch Number:</td> <td> <asp:DropDownList ID="ddlSharedBranches" runat="server" AutoPostBack="True"> </asp:DropDownList><%--<asp:TextBox ID="txtBranchNumber" runat="server" MaxLength="5"></asp:TextBox> <ajax:FilteredTextBoxExtender ID="ftxteBranchNumber" runat="server" TargetControlID="txtBranchNumber" FilterType="Numbers"> </ajax:FilteredTextBoxExtender> <asp:RequiredFieldValidator ID="rfvBranchNumber" runat="server" display="none" ErrorMessage="Please enter data in the form #####." ControlToValidate="txtBranchNumber"></asp:RequiredFieldValidator> <ajax:ValidatorCalloutExtender ID="vceBranchNumber" runat="server" TargetControlID="rfvBranchNumber" HighlightCssClass="validateCallout"> </ajax:ValidatorCalloutExtender>--%> </td> </tr> <tr> <td class="spacer"> </td> <td align="right">Branch Name:</td> <td> <asp:TextBox ID="txtBranchName" runat="server" MaxLength="30"></asp:TextBox> <asp:RequiredFieldValidator ID="rfvBranchName" runat="server" display="none" ErrorMessage="Please enter the Branch's Name here." ControlToValidate="txtBranchName"></asp:RequiredFieldValidator> <ajax:ValidatorCalloutExtender ID="vceBranchName" runat="server" TargetControlID="rfvBranchName" HighlightCssClass="validateCallout"> </ajax:ValidatorCalloutExtender> </td> </tr> <tr> <td class="spacer"> </td> <td align="right">Bank:</td> <td> <asp:DropDownList ID="ddlBank" runat="server"> <asp:ListItem Text="Carolina First" Value="1"></asp:ListItem> <asp:ListItem Text="Mercantile Bank" Value="6"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td colspan="3"> <asp:CheckBox ID="cbTOSS" runat="server" AutoPostBack="true" />Modify TOSS Fields </td> </tr> <tr> <td colspan="3"> <asp:Panel ID="pnlTOSS" runat="server"> <table> <tr> <td colspan="3"><b>TOSS Specific Fields</b></td> </tr> <tr> <td class="spacer"> </td> <td align="right">Region:</td> <td> <asp:DropDownList ID="ddlAddBranchTOSSRegion" runat="server"> </asp:DropDownList> </td> </tr> <tr> <td class="spacer"> </td> <td align="right">Number of Tellers:</td> <td> <asp:TextBox ID="txtAddBranchTOSSNumTellers" runat="server" MaxLength="2"></asp:TextBox> <ajax:FilteredTextBoxExtender ID="ftxteAddBranchTOSSNumTellers" runat="server" TargetControlID="txtAddBranchTOSSNumTellers" FilterType="Numbers"> </ajax:FilteredTextBoxExtender> <asp:RequiredFieldValidator ID="rfvAddBranchTOSSNumTellers" runat="server" display="none" ErrorMessage="This field is required." ControlToValidate="txtAddBranchTOSSNumTellers"> </asp:RequiredFieldValidator> <ajax:ValidatorCalloutExtender ID="vceAddBranchTOSSNumTellers" runat="server" TargetControlID="rfvAddBranchTOSSNumTellers" HighlightCssClass="validateCallout"> </ajax:ValidatorCalloutExtender> </td> </tr> <tr> <td class="spacer"> </td> <td align="right">Sales FTE:</td> <td> <asp:TextBox ID="txtAddBranchTOSSSalesFTE" runat="server" MaxLength="7"></asp:TextBox> <ajax:FilteredTextBoxExtender ID="ftxteAddBranchTOSSSalesFTE" runat="server" TargetControlID="txtAddBranchTOSSSalesFTE" FilterType="Custom" ValidChars=".0123456789"> </ajax:FilteredTextBoxExtender> <asp:RequiredFieldValidator ID="rfvAddBranchTOSSSalesFTE" runat="server" display="none" ErrorMessage="This field is required." ControlToValidate="txtAddBranchTOSSSalesFTE"> </asp:RequiredFieldValidator> <ajax:ValidatorCalloutExtender ID="vceAddBranchTOSSSalesFTE" runat="server" TargetControlID="rfvAddBranchTOSSSalesFTE" HighlightCssClass="validateCallout"> </ajax:ValidatorCalloutExtender> </td> </tr> <tr> <td class="spacer"> </td> <td align="right">Effective Date:</td> <td> <asp:TextBox ID="txtAddBranchTOSSEffectiveDate" runat="server" MaxLength="10"> </asp:TextBox><asp:Image ID="imgCalendar" runat="server" ImageUrl="images/cldrimg.png" /> <ajax:FilteredTextBoxExtender ID="ftxteAddBranchTOSSEffectiveDate" runat="server" TargetControlID="txtAddBranchTOSSEffectiveDate" FilterType="custom" ValidChars="0123456789//"> </ajax:FilteredTextBoxExtender> <ajax:CalendarExtender ID="cldreAddBranchTOSSEffectiveDate" runat="server" TargetControlID="txtAddBranchTOSSEffectiveDate" Animated="true" PopupButtonID="imgCalendar"> </ajax:CalendarExtender> <asp:RequiredFieldValidator ID="rfvAddBranchTOSSEffectiveDate" runat="server" display="none" ErrorMessage="This field is required." ControlToValidate="txtAddBranchTOSSEffectiveDate"> </asp:RequiredFieldValidator> <ajax:ValidatorCalloutExtender ID="vceAddBranchTOSSEffectiveDate" runat="server" TargetControlID="rfvAddBranchTOSSEffectiveDate" HighlightCssClass="validateCallout"> </ajax:ValidatorCalloutExtender> </td> </tr> </table> </asp:Panel> </td> </tr> <tr> <td colspan="3"> <asp:CheckBox ID="cbTSFGu" runat="server" AutoPostBack="true" />Modify TSFGu Fields </td> </tr> <tr> <td colspan="3"> <asp:Panel ID="pnlTSFGu" runat="server"> <table> <tr> <td colspan="3"><b>TSFGu Specific Fields</b></td> </tr> <tr> <td class="spacer"> </td> <td align="right">Region:</td> <td> <asp:DropDownList ID="ddlAddBranchTSFGuRegion" runat="server"> </asp:DropDownList> </td> </tr> </table> </asp:Panel> </td> </tr> </table>


I was able to narrow it down to the ValidatorCallout causing the error.

I'm able to run the ddl one time to fill in the fields. It results in the error described above, but the fields fill in. If I try to select another branch from the dropdown list above, the error keeps the postback from going. So it's a one-shot deal, otherwise you have to reload.

Removing the updatepanel removes all of the errors and it works perfectly, but the tell-tale page flicker is back.