CalendarExtender: example

Showing posts with label example. Show all posts

Wednesday, March 28, 2012

Calling javascript when a page has refreshed

I have an AJAX app that needs to call a javascript function when the page changes its state (for example some panels are hidden/displayed).

Due to the nature of AJAX, I can't use window.onload since no load event occurs.

What can I use to call my javascript functions when the page content changes?

If you are using UpdatePanels you can handle the PageRequestManager events:

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

It worked!

I had a javascript function called adjustHeight.

I added

<head>... <script type="text/javascript"> function adjustHeight() { . . . } window.onLoad = function() { Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(adjustHeight); } </script>

Monday, March 26, 2012

Calling __doPostBack causing full postback :-(

Ok, if I capture an event on the client, for example, a click event on a textbox that is inside an update panel, and in that event I call __doPostBack I get a full postback.

However, if I add a button and call it's click event, I get the partial page update I want. So I guess the question is how to invoke a partial page update via script?

Thanks ... Ed

Make sure the appropriate trigger has been set up for the UpdatePanel. You can also set the TextBox to have AutoPostBack="true" which will add a __doPostBack to the onchange event handler.

Of course if you absolutely need to trigger a button click from JavaScript you can do something similar to this:

htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
<scriptlanguage=javascript>
function SemiHacky(){
__doPostBack('Button1','');
}
</script>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<Triggers><asp:AsyncPostBackTriggerControlID=Button1EventName="Click"/></Triggers>
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
<br/><br/>
<ahref="javascript:SemiHacky();">Click here</a> to execute some JavaScript and submit the Button1 button via JavaScript.
</form>
</body>
</html>

The code behind is just setting the Label text to the current time so you can see the PostBack occur:

Label1.Text =DateTime.Now.ToString();

Cheers,
Al

Hi,

I did exactly as you suggested, but to no avail.

I am trying to launch a modal dialog and I have tried the following variations, some of which seem to work correctly, except that once the modal dialog is display and I try to dismiss it via a server

side mydlg.close() I get an error stating "The control 'dlgDivTasks' already has a data item registered."

These are the individual calls that I have tried. I should point out that if I just to a plain __doPostBack("","") I get a full postback and no error when I try to dismiss the dialog.

_doPostBack('Button1','');
__doPostBack("","");
Sys.WebForms.PageRequestManager.getInstance()._doPostBack("","");
document.forms[0].ctl00_ContentPlaceHolderContent_Button1.click();
$find("DlgTasksBehavior").show();

Thanks ... Ed

Hi Ed,

Have you had any luck using the OnOkScript property of the ModalPupupExtender? One way that I use the modal popup is I have an Ok and Cancel button but they may be named differently based on user actions (ie. Cancel may be labelled as Close). I then use the OnOkScript to execute some client JavaScript which then uses a web service to pass the data back to the server for some processing.

OkControlID="btnOk"OnOkScript="modalOkScript()"CancelControlID="btnCancel"

function

modalOkScript(){
//TODO: Add some web service call to take care of my data processing requirements
}

When the Web Service completes, the onSuccess JavaScript function for the webservice in my OnOkScript function changes the 'Cancel' button text to 'Close.

function

onSuccessModalOkScript(result){
$get('btnOk').disabled =true;
$get('btnCancel').value ='Close';
}

Then it's finished and the Modal closes via client side when the user is ready.

Looks like my copy / paste made the JavaScript functions look odd.

Hi, thanks for the reply.

Wouldn't what you suggest be kinda limiting? I wouldn't have access to the various data and controls on the page unless I passed a mountain of parameters the the service call. Seems to me I should just be able to do an async update via the update panel so I can use my server side code to get the job done.

The thing that is a mystery to me is why it is doing a full post back in the first place.I have everything working perfectly it's just the damned blink!

Thanks ... Ed

I have just had a similar situation myself whereby a full postback was occuring whenever I called __doPostBack. Trick is that you have to specifiy the actual client ID in the EventTarget parameter

i.e. _doPostBack('', ''); will NOT work where as _doPostBack('ctl00_textBox1', ''); WILL work. Obviously thats just an example so replace ctl00_textBox1 with your actual clientID value

So my code became:

textJobRef.Attributes.Add("onkeyup","javascript:setTimeout('__doPostBack(\'" + textJobRef.ClientID +"\', \'\')', 0)")

I dont think the timeout is required, but .NET does it so it must be for a reason! :)

callBaseMethod

hi,

I have a base class and another class inherit from it. How do I call a method with parameter in the base class?

so far, i've seen example where you can call the base method like so

callBaseMethod(this,'[methodname]');but my methodname in the baseclass has parameters, i need to pass values into
it when i call.
any advice is appreicated.
thanks

You can do it like so:

callBaseMethod(this, {method_name},[Array_of_values_to_pass]);

so, copying from one of the supplied javascript files, here is an example:

callBaseMethod(this, 'set_ClientState',[value]);

This calls the'set_ClientState' property (which is really a method/function), passing the variable 'value' as a parameter.

Hi Glav,

Thanks!! Really really appreicate that. It works :)

Liming

Call Remote WebService. "Parameter count mismatch" Error

Hello All, I.m using AJAX for call remote WS. For example WS placed on localhost.

1) Here some web methods from WS (AJAXBridgeService WebSite)

   [WebMethod]
public string HelloWorld()
 {
return"Hello World";
 } [WebMethod]
public Account GetAccountByID(int ID)
 {
return new Account();
 }
 [WebMethod]
public string GetStringByID(int ID)
 {
return ID.ToString();
 }
 [WebMethod]
public int GetIntByID(int ID)
 {
return ID;
 }

  2) i generated proxy class with wsdl utility and place it in App_Code (AJAXBridge WebSite) 
 3) i created asbx file<bridge namespace="AJAXTest" className="Class">
<!-- change url to required --> <proxy type="AJAXTest.Service, App_Code"
 serviceUrl="http://localhost/AjaxBridgeService/Service.asmx" /
 <method name="HelloWorld"/
 <method name="GetAccountByID">
 <input>
 <parameter name="ID"/>
 </input>
 </method
 <method name="GetStringByID">
 <input>
 <parameter name="ID"/>
 </input>
 </method
 <method name="GetIntByID">
 <input>
 <parameter name="ID"/>
 </input>
 </method>
</bridge>
 
4) then i used the following HTML+JS code <asp:ScriptManager ID="PageScriptManager"
 runat="server"
 LoadScriptsBeforeUI="False"
 EnablePartialRendering="True">
 <Services>
 <asp:ServiceReference Path="bridges/bridge.asbx" />
 </Services
 <Scripts>
 <asp:ScriptReference Path="bridge.js" />
 </Scripts>
 </asp:ScriptManager
 <a href="javascript:void(0);" onclick="javascript:Click1();">Click Me 1</a> <span id="span1"></span>
 <br/>
 <a href="javascript:void(0);" onclick="javascript:Click2();">Click Me 2</a> <span id="span2"></span>
 <br/>
 <a href="javascript:void(0);" onclick="javascript:Click3();">Click Me 3</a> <span id="span3"></span
JS:
function Click1()
{
 AJAXTest.Class.HelloWorld({}, OnComplete1, onError1);
}function OnComplete1(obj)
{
 var span = $get('span1');
 span.innerHTML = obj;
}
function onError1(obj)
{
 var span = $get('span1');
 span.innerHTML = "Error:" + obj.get_message;
}
function Click2()
{
 AJAXTest.Class.GetAccountByID({"ID" : 1}, OnComplete2, onError2);
}
function OnComplete2(obj)
{
 var span = $get('span2');
 span.innerHTML = obj;
}
function onError2(obj)
{
 var span = $get('span2');
 span.innerHTML = "Error:" + obj.get_message();
}
function Click3()
{
 AJAXTest.Class.GetStringByID({"ID" : 100}, OnComplete3, onError3);
}
function OnComplete3(obj)
{
 var span = $get('span3');
 span.innerHTML = obj;
}
function onError3(obj)
{
 var span = $get('span3');
 span.innerHTML = "Error:" + obj.get_message();
}
 
5) After press "Click Me 1" link, i invoke HelloWorld and it returned string value to span,
then if i press "Click Me 2" or "Click Me 3"links, i got OnError and error message with "Parameter count mismacth".
There is a topic like thishttp://forums.asp.net/t/1136077.aspx
Does have anybody any information about call bridge with parameters?

You may remove the jason-styled parameters.

In your javascript service invocation you may send the number only before the callbacks at this syntax:

AJAXTest.Class.GetAccountByID(1, OnComplete2, onError2);
(instead of AJAXTest.Class.GetAccountByID({"ID" : 1}, OnComplete2, onError2); )

Note: Don't send date this form, (you may send string instead and parse it on server side)

Vinija:
You may remove the jason-styled parameters.
In your javascript service invocation you may send the number only before the callbacks at this syntax:
? AJAXTest.Class.GetAccountByID(1, OnComplete2, onError2);
(instead of? AJAXTest.Class.GetAccountByID({"ID" : 1}, OnComplete2, onError2); )
Note: Don't send date this form, (you may send string instead and parse it on server side)
?

There we call remote web service via bridges technology, which demand of JSON input parameter.

I'm mot realy familiar with JSON syntax but according to the article you've referenced to, it seems that
you shouldn't write ID in quotation marks but simply write the word ID.

I'm not sure if it'll help you (you may have tried it already) but this is what I can see that by be wrong.

About the JSON input parameter, shouldn't the AJAX engine imlement the JSON serialization without
you actually write the parameters JSON styled?

<method name="HelloWorld"/
<method name="GetAccountByID">
<input>
<parameter name="ID"/> see here ...the parameter name is the same for all !!!has it got to be different?try and see it does not knw which parameter to invoke when clicked ,probably this might be an error
</input>
</method
<method name="GetStringByID">
<input>
<parameter name="ID"/>
</input>
</method
<method name="GetIntByID">
<input>
<parameter name="ID"/>
</input>
</method>
</bridge>

cheers

shankar

Call javascript after UpdatePanel updates

Hi,

Is it possible to call a javascript function after the update panel finishes updating? For example - I click on a product which populates a table inside an update panel, when this update is complete I would like to move the div containing the product data to the point where the user clicks. My problem is how to call the javascript that makes this happen.

Thanks for any and all advice / code / links.

Hello,

you need to create a javascript function and bind that to the pageloaded event of the pagerequestmanager class. Here's how it might look:

var prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_pageLoaded( function() { // Your function body comes here});

The pagerequestmanager is responsible for handling the AJAX calls. It has several events that you can handle.

Good luck!

hello.
well, in this case, I'd use the endrequest event of the pagerequest manager since it is called only when the?partial?postback?ends?(and?it's?also?called?when?you?get?an?error?during?a?partila?postback).?the?code?is?the?same?as?the?previous?poster?has?shown;?the?difference is?that?yo?use?the?add_endRequest?method?instead?of?calling?the?add_pageLoad?method.
Correct, my example with the pageloaded will also execute the first time the page loads. That might not be what you need, so go with endrequest like the previous poster said.

You probably want to subscribe to the pageLoaded event so that you can access the panelsUpdated property.

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageLoadedEventArgsClass/PageLoadedEventArgsPanelsUpdatedProperty.aspx

Example:

http://ajax.asp.net/docs/ViewSample.aspx?sref=Sys.WebForms.PageRequestManager.pageLoaded

Wednesday, March 21, 2012

CalendarExtender with ImageButton

Hi,

today i play around the sample of the CalendarExtender from the live demo page,

the third example is using the CalendarExtender with the imageButton,

when i click on the imageButton at the first time, the calendar is popup, then i simple select the date, click on it, the date was selected, fine.

but, when i trying to open the calendar popup, and choose nothing but click again on the imageButton,

the page was fully postback and my previous selected date on the textbox was gone.

at the end i got to solve this with no using the image button but normal image tag.

is that consider a bug?

or i missed something?

I have also discovered that the second click on the image button will force a postback.

I fixed it in the CalendarBehavior.js file like this:

In the _button_onclick function there is an 'if' statment thus

if (!this._isOpen) {
e.preventDefault();
e.stopPropagation();
if (this._enabled)
this.show();
} else {
this.hide();
}

I moved the event function invocations out of the 'if' statement like this:

e.preventDefault();
e.stopPropagation();

if (!this._isOpen) {
if (this._enabled)
this.show();
} else {
this.hide();
}

This seems to work for me on both IE and Firefox. Note that I haven't tested it fully though.

Wednesday, March 28, 2012

Calling javascript when a page has refreshed

Monday, March 26, 2012

Calling __doPostBack causing full postback :-(

callBaseMethod

Call Remote WebService. "Parameter count mismatch" Error

Call javascript after UpdatePanel updates

Wednesday, March 21, 2012

CalendarExtender with ImageButton

CalendarExtender

Blog Archive

About Me