Calling Javascript function as a property for an extender

Hi,

I have written a custom extender. In this custom externder, after a specific function is called, I would like to call another javascript function. This custom extender is re-used in various scenarios.So the javascript function to call is different in different scenarios. Code for all these scenarios cannot be put in the extender js file. So I would like to pass a dynamic javascript function name as a property value to the extender, and also give it the path of the js file which contains this javascript function. However I am unable to write this.

Can some one help please

Regards

Raj

Hi,

You can use eval function to invoke a function with its name.

For instance:

// in the .js file of the extender

function handler()
{
// a specific function
eval(_functionNameFiled + '();'); //_functionNameFiled is a field that hold the name of the function to be invoked
}

Marked your property asExtenderControlMethod, make this property as a function interface

Calling a server side function from client side using the toolkit

Ok, I'm sure this is a really stupid question, but I'm willing to ask it anyway.

Let's say that I created a new extender called "My", so I now have three files files, MyExtender.cs, MyBehaviour.js, and MyDesigner.cs.

I want my control to be able to take some data on the client side and use it to retrieve some data on the server side, which AJAX is all about right? :) So for the sake of argument, let's say I want to enter an email address in a textbox, and then consult a database to return the user's password.

So in my MyExtender.cs file, I create a function something like this:

public string getPassword(string email) {

... Make some database calls to get the info

return password;

}

What code do I put into the MyBehaviour.js file in to to call the getPassword function? And do I need any special decorations on the getPassword() function to make it happen?

You can use ICallbackEventHandler interface for this purpose. This is the exact purpose of this interface in ASP.Net 2.0. Check out the MSDN for this interface.

You really should look at how to create an extender to do it the best way. There is a great tutorial here,http://www.asp.net/ajax/ajaxcontroltoolkit/samples/Walkthrough/CreatingNewExtender.aspx that is a simple example of how to create a simple extender. Also if you just want to use the code behind to retrieve info from the database, you may just want to wrap an update panel around your form and get the data from the code behind. Either way you will be able to accomplish what you want.

Call function from the custom extender

var sbFunc =new Sys.StringBuilder(this._callbackFunction);

sbFunc.append(

"('");

sbFunc.append(

this.get_element().id);

sbFunc.append(

"','");

sbFunc.append(foo[foo.length-1]);

sbFunc.append(

"','");

sbFunc.append(

this.get_serviceParameter());

sbFunc.append(

"')");

sbFunc.append(

";");

window.setTimeout(sbFunc.toString(), 0);

This code works fine until first postback. After, it still call function, but function really never get called. Function is located on the bottom of aspx file (Default.aspx). Why is it happens so? Maybe I put my custom function in a wrong place? I will appreciate any help.

Where is this code? Inside a custom JavaScript control?

When you say the "first postback", do you mean an async postback via an UpdatePanel?

Could you maybe share the rest of the page with us so we can see where everything is?

Steve Marx:

Where is this code? Inside a custom JavaScript control?

When you say the "first postback", do you mean an async postback via an UpdatePanel?

Could you maybe share the rest of the page with us so we can see where everything is?

Sorry, description was too short. I have custom extender. I want to be able call function that's inside aspx page on which I drop that extender. I wrote a piece of code you can see above. window.setTimeout(sbFunc.toString(), 0); That piece of code really works fine.

For instance ifthis._callbackFunction='__callbackFunc' and I have Default.aspx file:

<asp:UpdatePanelrunat="server"ID="UpdatePanel1"ChildrenAsTriggers="false"UpdateMode="Conditional">

<ContentTemplate>

Customer:

<br/><uc1:AutoTextID="atCustomer"runat="server"Width="230"CompletionInterval="2000"CompletionSetCount="10"EnableTheming="false"EnableViewState="true"MinimumPrefixLength="1"ServiceMethod="getListNames"ServicePath="http://olexiy.esconline.cc/test2/WebService.asmx"/>

...

</ContentTemplate></asp:UpdatePanel>

...

<script type="text/javascript">

function __callbackFunc(arg0, arg1, arg2) {

alert('hello world!');

}

I can actually see this message box "hello world" up until some async postback will happen in UpdatePanel1 ('caused by some other component). Afterwards I don't see message box "hello world" anymore.

</script>

Sorry for the slow reply... I still don't how you're injecting the JavaScript you want to run.

My best guess is you're using Page.Register* instead of ScriptManager.Register*... if so, make sure you're using the ScriptManager method.

Actually I use neither one. If I try to register java script with callback function in ScriptManager then script does not receive call at all, meaning that message box is not coming up.

call codebehind onclick function from modal popup

My modal popup extender pops up an asp:panel that has a couple asp:textbox'es and an OK asp:button that I designate as the OKControlID. I've implemented a javascript function called OnOK() that's designated as the OnOkScript in my control extender, and also implemented a Button_Click function for the OK Button in my page codehind. How do I get the codebehind function to get called. My code calls the onOK script and stops.

Thanks!

Short answer:

You can't. The behavior adds a handler for the click event of the button which executes the OnOkScript(). This prevents a postback from occurring, and a postback is what you need to occur in order to call your code behind function.

Long answer: If you use the property "EnablePageMethods='true'" in your script manager, and assign [WebMethod] attribute to your codebehind, you can call that codebehind method from your JS OnOK function.

LSU:

Tried leaving a message for you on your listed website, but it

doesn't allow anonymous comments, and I didn't want to have to

sign up..I have need for this threads concepts, but I tried doing

an MPE.show in my code behind trying to get the MPE to

display as a result of running code, (not a button click) and

get a runtime error.."cmdDelete already has a data item registered."

VS2005 Pro has no problem with the code..am I using it out of

context?..what am I doing wrong?..

Thanks..

LSU.Net:

Short answer:

You can't. The behavior adds a handler for the click event of the button which executes the OnOkScript(). This prevents a postback from occurring, and a postback is what you need to occur in order to call your code behind function.

Long answer: If you use the property "EnablePageMethods='true'" in your script manager, and assign [WebMethod] attribute to your codebehind, you can call that codebehind method from your JS OnOK function.

Haha! Both answers looked "short" to me.
It may not work for the poster's case since the CodeBehind is a WebMethod hence static method which is independent from the page object concept and so if there're reference to the page's objects in the code-behind it'll fail. For the original poster, you may have to "cheat" your way to get it to work. Please see this threadhttp://forums.asp.net/thread/1669503.aspx . I hope there'll be support from AJAX client side or we may have to extend the ModalPopup extender.

G20:

Thanks for your input ! I haven't had time to read /absorb the details of the

link yet, but will today. George Bernard Shaw said:

"Science is always wrong. It never answers one question without asking

10 more."

Themodal.hide works fine from the code behind.

Themodal.Show is syntactically acceptable in the code behind,

but doesn't. Why? Where is it used? What is it supposed to do?

.Show works fine in my VB / Access apps (ha ha!)

Seriously, I've been looking for a comprehensive source for

the props & methods of AJAX controls..with examples, like

MSDN would be awesome. Then I could be self -reliant.

Any help there?

yeah i have the same problem as you.

I need to fire/call the modalpopup when there is a textchanged event in a textbox.

I have tried everything i can think of jscript wise.

I also dont' get why the modalpopupextender1.show() isn't working...

If you get this figured out could you please post it ? Ill do the same if i can figure it out.

Thanks

CalenderExtender in frameset problem

I have created an AJAX webpage which has been placed inside a HTML frameset(intranet at work). Outside the frameset, the calender extender works fine but inside the frameset I get a javascript permissions error. Anyone else had this problem?

Thanks,

Steve

Hi Stevedale,

I think your problem is a caused by Frameset + javascript rather than AJAX. First , you should check whether they are in different domains. Then please remove the interactions between the two Frameset. CalendarExtender is generated by a bunch of javascript. Here are two wonderful links(Link1,Link2);

If all these don't work, please feel free to let me know. And a tiny repro is preferred.

Best regards,

Jonathan

Calender hide onBlur problem

I know that the calendar extender is suppose to hide when you click outside of the control, but it's not for me. I'm using the calendar control in association with a button. Both the button and the control are being added dynamically to the page. The follow is the code used to build these controls.

oNewImage =New Image

oNewImage.EnableViewState =True

oNewImage.TabIndex = 0

oNewImage.CssClass ="CalendarPopup"

oNewImage.ID ="CalendarPopup" &CInt(glintCountCalendarImage)

oNewImage.ImageUrl ="..\images\CALENDAR.ICO"

oNewImage.Visible =True

oNewAjaxCalendar =New AjaxControlToolkit.CalendarExtender

oNewAjaxCalendar.TargetControlID = oNewTextBox.ID.ToString

oNewAjaxCalendar.OnClientShowing ="showingCalendar"

oNewAjaxCalendar.PopupButtonID = oNewImage.ID.ToString

oNewAjaxCalendar.Format ="MMddyy"

oNewAjaxCalendar.CssClass ="icmsCalendar"

oNewAjaxCalendar.PopupPosition = AjaxControlToolkit.CalendarPosition.BottomRight

oNewAjaxCalendar.ID ="AJAXCALENDAR" &CInt(glintCountCalendarImage)

oNewAjaxCalendar.OnClientDateSelectionChanged ="hideCalendar"

oNewTextBox.Attributes.Add("JUSTIFY","RJ")

oWebForm.Controls.Add(oNewImage)

oWebForm.Controls.Add(oNewAjaxCalendar)

Hi James,

Use an ImageButton instead of an Image!

Let me know how that works out ;)
Kind regards,
Wim

Calender Extenders cssClass problem in Gridview

hi all

i have an HTML table in one of gridview's cell which is always hidden at startup. there is one textbox and one calander extender in that HTML table. In the same cell there is Link Button. On click event of that LinkButton i make that hidden table visible.(this process is done on server side). Problem is that when i perform this operation then after that Calander Extender's css class disturbs and does not show the appropriate design.

i dont know why this problem occured. and now this problem is solved automatically. I havn't done any thing for it.. this is really strange

calender extender problem

i have a large form that contains about 12 date field. if i place 12 calenders extender the page loading become very slow. is there any way to use only one calender for this 12 field, so this calender appear at the field that the user type in.

Hi

Here a dude says he got a fix for it:http://forums.asp.net/p/1088868/1627224.aspx

You should test it first!

Kind regards,
Wim

thx for your reply

calender extender in not getting reconized

I am making a textbox with an calender extender and when i add the extender it says that is not an reconized element. Everything else that i have tried works and i jsut cant seem to figure this out. Any body have an answer?

Hi Kashwmu,

kashwmu:

Everything else that i have tried works and i jsut cant seem to figure this out.

Do you mean when you add other Ajax Controls it works??

Based on your description, we suggest that you should check whether you have installedAsp.Net 2.0 Ajax Extensions V1.0 or not. To install it, please referencehere. Also , you should check whether you have added reference to the AjaxControlToolkit.dll. Here are some usefulvideo tutorials.

If all these don't work, please feel free to let me know with more information including your source code.

Best regards,

Jonathan

Calender Extender

HI All,

Am having a Calendar Extender inside a FormView and Formview is Inside UpdatePanel.
Problem am facing is that Calendar Comes Messy when it get activated. I tried CssClass but its not working.

Any Solution?

Hi Barrysuku,

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Best regards,

Jonathan

this is a common issue that has a workaround on codeplex...I dont remember the link but all you need to do is put another calendarextender in your updatepanel and hide it via css

HI Jonathan,

I was able to solve that problem what i did is i added css class for CalenderExtender and its working fine now.

Now am having two issues if you can solve those for me.

First is how dela with FileUpload inside Updatepanel as am not getting filename.But when in scriptManager if i disable EnablepartialRendering to false then it works.Temporary am doing this.

Second how to load TreeView with ObjectDataSource or DataSet

Thanks

Regards

Barry

Hi Barrysuku,

In this thread, we are mainly discussing aboutCalenderExtender ,as indicated by the first post and the title.

Since your new question is not directly related to the original issue, it would be best if you open up a new thread for the new question. In this way, our discussion here will not deviate too much from the original issue. This will make answer searching in the forum easier and be beneficial to other community members as well.

Thank you for your understanding.

Best regards,

Jonathan

CalendarExtenter in a modal popup shows transparent

Hello,

i try to use a calendar extender inside a panle that is shown as a modal dialog using a modal popup extender. When the calendar pops up the displayed caledar is shown transparent (it has no background) and no animations are shown when switching between months.

Using the same outside a modal popup shows the calendar as usual.

Is a caledarextender not supposed to be used inside a modal popup?

Thanks in advance,

Ralf

This sounds like an issue we were having.

When you run the page, check the HTML source for a tag that looks like this:

<link href="http://links.10026.com/?link=/.../WebResource.axd?d=..." type="text/css" rel="stylesheet" /
(There should be alot of characters following the "d=")

If there is no reference made to WebResource, try putting another CalendarExtender control outside of the panel. This should force ASP.NET to add the reference.

Let me know what happens,
FB

I've looked at over a dozen suggestions to fix this issue. Finally you have the one that works. You are great! Thanks!

CalendarExtender: internationalization

Hi!

How canI personalizzate extender for using italian (o other) language?

Thank you.

Have you tried the latest version of the toolkit? The calendar string "Today" is now localized in 14 languages including Italian. All toolkit controls now support localization. On how to achieve that check out the Calendar control source code and the localization entry on theOther Neat Stuff page.
Thanks for the answer.

CalendarExtender, want only current month date visible

hi all,

I have a problem, I want to display days of only current month or whichever month a user selects. I mean by default calendar extender shows all dates , even if we have selected November, it will show some days of previous month and some days of next month along with current month's dates. I only want to display current month's dates.

I applied css specified in http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

but that's changing color of each day. I was thinking by using css somehow i will hide previous and next month days, but of not avail.

please suggest,

thanks...

Hi Forums_user,

As far as I know, it is not supported now unless you modify its source code. CalendarExtender generate all the days , months and years on the client, you can find it in its source code with the name _buildDays,_buildMonths and _buildYears.

I hope this help

Best regards,

Jonathan

CalendarExtender throws error after manual textbox input

Hya,

I'm encountering a few issues with the calendarextender on the new RTM, i just have a textbox, a image, and the extender on a blank page:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:Label ID="lblPublishDate" runat="server" AssociatedControlID="publish_date" Text="Publish Date:"></asp:Label><br /><asp:TextBox ID="publish_date" runat="server" CssClass="frm_textbox" Width="150px" ValidationGroup="SearchLatestNews"></asp:TextBox><asp:Image runat="Server" ID="imCalendar" CssClass="vm" ImageUrl="/images/calendar.png" /><br /><em>e.g. 01 Jan 2007</em><ajaxToolkit:CalendarExtender ID="extCalendar" runat="server" TargetControlID="publish_date" PopupButtonID="imCalendar" />

The data format is dd MMM yyyy and i want to allow the user to manually input the data aswell as picking it. and i get the following error in both IE and FF:

Error: [Exception... "'Sys.ArgumentUndefinedException: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: array' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]

Is anyone experienced the same issue? Is there a known workaround?

Kind Regards,

P.

Sorry i was doing some tests, and i accidentally removed the format="dd MMM yyyy" from the code..

CalendarExtender question

I have a textbox, an image button and a calendar extender on my form. If I go with the default and don't make an entry for the PopupControlID attribute, the calendar gets displayed when the textbox gets focus and I can select a date from it. If I use the image button as the entry for the PopupControlID attribute, the calendar initially gets displayed but then the whole page posts to the server and returns before a date can be selected. There aren't any AJAX controls on the MasterPage and nothing in it's code-behind that would cause this issue. There also isn't currently any code-behind in my form ... just HTML ... and I'm posting it in its entirety below:

<%@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/MasterPages/MasterPage.master"AutoEventWireup="false"CodeFile="CalendarTest.aspx.vb"Inherits="Correspondence_CalendarTest"title="Untitled Page" %>
<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<asp:ScriptManagerrunat="server"></asp:ScriptManager>
<br/><br/>
<asp:TextBoxID="Date1"runat="server"></asp:TextBox>
<asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Calendar_scheduleHS.png"/>
<cc1:CalendarExtenderID="CalendarExtender1"runat="server"TargetControlID="Date1"PopupButtonID="ImageButton1">
<%--
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date1">
--%>
</cc1:CalendarExtender>

</asp:Content>

Why does this bloody thing insist on posting back to the server and is there anything I can do to prevent it from occurring?

TIA,

Allen

this is from another issue close to what you have because when you click the button a second time it does a post back as well. there is the solution from another post.

just to say, I've found this can be solved by creating a plain html img tag and assigning the popubbutton id to that instead of an asp imagebutton control

Did you make sure the CAUSESVALIDATION property of the Calendarextender is set to false? There is no problem using an asp:imagebutton control if you have that done. I mean that way when the Calendar control is clicked, all that happens is the control opens and selection is made.

Dollarjunkie

CalendarExtender onclick?

When you click on a date in the ajaxToolkit's Calendar Extender, the calendar doesn't disappear. What can I do so that it disappears on clicking a date?

to close the calendar onClick i set this up in the code behind

//Hide the calendarprotected override void OnLoad(EventArgs e) { Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"hideCalendar", @."function hideCalendar(cb) { cb.hide(); }",true);base.OnLoad(e); }

and this is what the asp code looks like

 <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" OnClientDateSelectionChanged='hideCalendar'>

Great, I had the same issue.

Actually I noticed that you don't need to have any code behind, you can simply put:

OnClientDateSelectionChanged="function hideCalendar(cb) { cb.hide(); }"

And it will work. Works even if you have more than one extender.

Thanks a lot guys! You saved a life today!

Hello..!

Is there anyone who can help me...! Please. I have created a web page with master page then i inserted CalendarExtender in the web page but in running mode when i click on the related textbox it doesnt show the calendar... I dont know why?...
note: i inserted script manager in master page......

So, What is the possible solution..???

Thanks, Waseem

I just had problems with the calendar extender myself so I think i can help... but u'll have to show us what you have already!

CalendarExtender makes things slow!

Hello everybody,

I noticed this behavior almost immediately when we used theCalendar Extender for the first time. But I waited to see somebody discussing about it in the forum. It took quite a while...

I have removed all theCalendar Extenders because it slows all the other parts of the ASPX page, for example: when you click on a button to fetch data from the database and load it in a grid, without anyCalendar Extenders its lightening fast... but add aCalendar Extender or 2 and then you can notice it starting to get slow

I have now switched back to the old way, using a Calendar control with aPopupControlExtender to display a pop up calendar, and its fast.
I am using a Master page, themes and my controls are inside anUpdatePanel

I think the usercmarshall26 is also experiencing the same problem which he explains inthis post

(but the Calendar that is displayed using theCalendar Extenderlooks cool!)

Hope somebody can relate to this problem... any suggestions from the experts?

You've got a couple of options...

1) Set<configuration><system.web><compilationdebug="false">in your web.config

2) Set theScriptMode="Release"property on the ScriptManager component

<asp:ScriptManagerID="ScriptManager1"runat="server"ScriptMode="Release"></asp:ScriptManager>

Either way, you should end up with the release version of the javascript coming down to you which is A LOT faster!!

Make sure you've got the 10301 release as well - there were several Calendar perf fixes in that release.

Thank you very much for both of your responses... I tried the latest update and, yes its fast now!

Now it'll be easier to hookup pop-up calendar functionality using the Calendar Extender, without worrying about performance.

I set theScriptMode="Release"in the Script Manager too, asJames_2JS suggested, hope it also contributed to the improvement.

Can you explain what these changes do?