How do I wire a javascript function to an update panel so it fires when the panel is updat

I have a list of location in an update panel and a virtual earth map w/ pushpin's representing each of the locations. My update panel works great for paging through the location list using some custom paging where a the panel updates when the paging buttons are clicked. What I'd like to be able to do though is wire up an event handler to the update panel so when it refreshes, my javascript function can make a page method call and get new set of pushpins to display on the virtual earth map.

a) How do I get a reference to the update panel in javascript?

b) What is the update panel event that I wire a call back method to?

Thanks!

Hi there, you can accomplish this by hooking up a client side event handler to the PageRequestManager pageLoading event. The event args will indicate the list of UpdatePanels that are getting refreshed, you can inspec the array and if the UpdatePanel that you are interested in is being refreshed call your function.

More info here:http://ajax.asp.net/docs/tutorials/usingMsAjaxLibrary/default.aspx

Thanks,
Federico

Federico,

Thanks for the reply. Because the ASP.NET forums are moderated, I literally just figured it out before receiveing your reply. The PageRequestManager in Beta 1 is awesome!

- James

Hi Frederico

Your link appears to be broken - do you happen to know a working link for this topic ?

Thanks,
Richard

How do I use javascript to force an UpDatePanel to Update

Hi, I am trying to find a simple way to force a specific update panel to refresh/update from a javascript function. The reason being that I am trying to build a simple calendar control, simular to that on the AJAX Control Toolbox site under PopUpControlhttp://atlas.asp.net/atlastoolkit/PopupControl/PopupControl.aspx, and I want the calendar to update if a date has been manually entered into the text box. I have found that you have to add an atrribute to the date input text box to invoke a call to a javascript function. (I am using the calendar control that I make inside of a gridview control which is enbeded inside of multiple levels of Update Panels and the TextBox.OnChange() event does not fire when inside of a gridview. So I added the following to the Page_Load event:TextBox.Attributes.Add("OnMouseLeave","javascriptFunction()") ) The problem that I am having is what to add to thejavascriptFunction()to force a specific UpDatePanel to refresh. I can get all of the panels to update using a "__doPostBack('DateControl$DateDisplay',''); "but there seems like that should be a simple way to force only one panel to update. I've tried to click on a hidden button using a javascript click() event, but I continuosly get the follwing javascript error: " Microsoft JScript runtime error: '_postbackSettings.async' is null or not an object " Is there a way to implement theUpdatePanel.Update() function directly from Javascript? Am I even going in the right direction? Could I call one of my code behind functions from javascript to perform the UpdatePanel.Update()?

So in simple terms, when building a control how can i update a specific UpdatePanel in the control through a javascript function?

Help Please!! Thanks!

There is no direct support for updating just a single panel. You can mostly achieve it by setting all your panels to be Conditional and then calling Update on just the ones you want.

Thanks,

Eilon

How do I bind an event to a custom Javascript function?

So I'm tyring to do this in xml-script if possible. What I'm looking for is how to fire a javascript function I define, but declare it in the <completed></completed> tags of my <webMethod>. I did it in a roundabout way by binding it to an html control and applying a custom transform to that html control, but that feels like cheating. Any advice? Ideally it'd look something like:

<completed>

<invokeMethod target="MyJSFunction" method="invoke">

<bindings>

<binding id="something" dataContext="myWebMethod" datapath="result" property="parameters" propertyKey="inputVariable" />

</bindings>

</invokeMethod>

</completed>

But of course that's not quite right as I tried it and it didn't work...

Ok, I managed to solve this, but I'd like to know if there's a way to solve it w/o resorting to what I did. First, I just used the completed attribute of the <pageMethod> (see my .js extension athttp://forums.asp.net/thread/1342638.aspx at this point in the discussion, though, assume it's a serviceMethod, as the functionality is the same). So, my xml-script worked in this fashion:

<pageMethod method="MyMethodName" id="MyMethodId" completed="CustomJavascriptFunction">

<bindings>

<binding to input stuff />

</bindings>

</pageMethod>

That all worked, except that the eventArgs object being passed back as part of the 'completed' event was a Sys.EventArgs.Empty object, which I figured out after iterating over the properties and then digging into the .js again. For my solution, since I was using my custom 'Com.VelocityDataSolutions.PageMethodRequest' class anyway, I just changed the onMethodComplete function to pass the result variable to the target function. to do that I changed:

target.completed.invoke(target,Sys.EventArgs.Empty);

to

target.completed.invoke(target,result);

It works like I want now, my event handler grabs teh eventArgs object to use for its processing. I might change it to pass a more complex object (e.g. passing all the variables instead of just the result), but for now it works.

My real question, though, is did I have to go through all this? lol... If I wanted to do the same thing w/ a serviceMethod and didn't wantt o mod the atlas.js or subclass or anything, is there a way to pass the web service's output string to the event handler in declarative markup?

How do call javascript function when ajax request is successed

How do call javascript function when ajax request is successed?

Hi,

Please refer to the life cycle on client side.

You can hook a handler to theendRequest event, and call the function here.

Hope this helps.

how can I pass a value to a javascript function on image clickBehavior atlas?

Hi Guys, I have the image template below and on imageURL I bind theDBImageName that comes from database via webservices objects. I also call a function DoAdditionalHandling because I need to construct the actual image URL. Now I need to define a click event which I am using theclickBehavior . How can I pass to the function a value that comes from database, let's say how can I passDBImageName field that is being bound to imageURL. Please advice!

<image id=

"ImageThumbPath">

<bindings>

<binding dataPath=

"DBImageName" property="imageURL" transform="DoAdditionalHandling" />

<binding dataPath=

"DBImageALT" property="alternateText" />

</bindings>

<behaviors>

<clickBehavior click=

"ImageClickHandler" />

</behaviors>

</image>

From your event handler, use the sender's dataContext to get the value, like so:

function imageClickHandler(sender, eventArgs){ var DBImageName = sender.get_dataContext().DBImageName;}

I just posted a working exmaple of this to my blog:http://smarx.com/posts/how-to-pass-a-value-to-a-javascript-event-handler.aspx.

Steve,

I asked you also the other day. Can you help me with<atlas:InitialDatarunat="server"id="InitialData1" >

I need to know how to specify the method name and the parameters to method. The example you showed me does not specify it, but it seems like it has its default methods because the web service on that example inherits froma dataservice. Please help me and give me more details if you can. I appreacite your help.

If I understand your question correctly, you want to specify what method to call on the web service (like using "loadMethod=..." on a dataSource in xml-script). Looking at theclass browser documentation for InitialData, it doesn't look like that's possible. :-(

Yes, the example works because it inherits from DataService and provides one method with the attribute [DataObjectMethod(DataObjectMethodType.Select)], so the right thing happens by default.

so any work around? Please advice.

Nothing that I'm aware of (but others please chime in if you have an answer).

I think you'll have to just not use <atlas: InitialData /> and just use your dataSource with autoLoad="true". InitialData is just there to improve performance a little by allowing you to send the data down with the initial page load instead of requiring a second roundtrip to the server.

I'll ping the product team and see if a LoadMethod parameter will be added to InitialData in the future.

is it anyway to specify the method call and parameters ondataSource with autoLoad="true? Please advice Steve!

Yes, just use the "serviceURL=..." and "loadMethod=..." properties on your <dataSource /> xml-script tag. I believe you can just specify <parameters foo="bar" baz="blah" ... /> inside your <dataSource /> to pass parameters.

If you need to databind those parameters, use <binding dataPath="..." property="parameters" propertyKey="foo" />.

not sure how. do u have the syntax of the datasource parameters? how can then I bind it to a dataview?

More explicitly, here's the syntax:

<dataSource id="myDataSource" serviceURL="myservice.asmx" loadMethod="myLoadMethod">
<parameters param1="foo" param2="bar" />
</dataSource>

(Assuming you have myLoadMethod(string param1, string param2); in your web service.)

Databinding your dataView doesn't need to change at all. It's still:

<dataView id="myDataView">
<bindings>
<binding dataContext="myDataSource" dataPath="data" property="data" />
</bindings>
</dataView>

I believe you already had this working in your code from theother thread.

I did that exactly and got a javascript error invalid xml mark up script. On the other example, I have it simply by clicking in a buton. But my other task is when page loads, the data has to be displayed.

I'll look into getting you a full working example.

To follow up on what I said earlier "I'll ping the product team and see if a LoadMethod parameter will be added to InitialData in the future," I checked with the product team, and it sounds like InitialData will have all the functionality of dataSource (so that includes specifying the method to call on the web service and any parameters), but they're not sure of the timeframe.

Thank you! Please email me atnesfrank@.yahoo.com

Steve,

Here is what I am doing but I get invalid xml mark up script. may be the syntax for parameters is diffrent? Please advice!

<dataSource id=

"dataSource1" autoLoad="true" serviceURL="~/AtlasTestService.asmx" loadMethod="GetTestData">

<parameters Code=

"cu0001" paramboolean="true" />

</datasource>

It's probably because your closing tag doesn't match your opening tag. Try changing "datasource" to the correct capitalization: "dataSource".