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);

Calling Clinet Function from Code Behind (Inside Ajax Update panel)

Hi,

Can anyone please provide information on how I can do this:

I have a GridView control inside an Ajax Update panel and have wired the Selected IndexChanged action to call a Client side Javascript function (ViewReceipt()). Unfortunately it doesn't seem to work except if I take the control outside the update panel.

Have posted my code below..

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("ViewReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
}

Regards..

Peter.

Hi,

Found some posts on this and tried to add the recommended code but still getting a syntax error, hope someone can help out..

code behind:

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("EditReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
//this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
//ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ClientSideCall", sbScript.ToString(), true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), true);

}

Javascript Function:

function EditReceipt()
{
var manager = GetRadWindowManager();
var rwEntry = manager.GetWindowByName("rwReceipt");
}

Regards..

Peter.

Hi Peter,

The problem with your code is that you should specify the last parameter to false in RegisterStartupScript method.

This parameter indicates that <script> tag will be added automatically to wrap the sbScript. Since you've done that manually, so false should be used.

Like this:

ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), false);

Hope this helps.

Hi Peter,

Give full definition of EditScript() function then only I can help to you.

Regards,

Aru

Raymond,

Thanks for the information, I have already implemented a work around by moving the grid outside of the update panel. I'm using a telerik grid which has inbuilt AJAX and there are some clientside events which can be hooked into that has given me the functionality I require, anyway thanks for the information I can use it else where later.

Regards..

Peter

Calling An UpdatePanel Update from Javascript

From client side javascript I want to invoke an UpdatePanel's Update event. I do not see any documentation on a method to do this. I found triggers but those are based upon controls, I want to do this purely via javascript.

I wonder if
the internal method Sys.WebForms.PageRequestManager _updatePanel Method does the job.

Calling a web service in a javascript causes page reload

Hey guys,

Here is what is happening. I have a user control in which I have an update panel with a button and some label. On click of that button, I call a javascript function which in turn calls a web service. The web service does get called and everything works nicely, but the whole page is being refreshed. The moment the javascript calls a web service, the refresh of the whole page occurs (when in turn nothing should happen besides the web service called).

Do I have something misconfigured that causes the script manager to do the whole page refresh on a web service call? I have the same structure in another control, and that one doesn't cause the page refresh.

If anyone has experienced this and have a solution for it, I would love to hear it.

Thanks!

Are you using Server Button Control(<asp:Button/>) of usual html button(<input type="button"> ?

I'm assuming you have something like:

<asp:Button ... OnClientClick="CallMyWebService()" />

or

<input type="button" ... onclick="CallMyWebService()" />

Try making it "CallMyWebService(); return false;"... the "return false" tells the browser not to continue handling the event (by submitting the form, for example). If that's not it, you might try showing us your code.

Calling a web service from an update panel

I am running through the tutorial on calling a web service from an update panel. I have a web site project and a separate web service project that contains the service that I'm trying to call. When I click the button that should make the call to the web service I get a javascript error that my web service is not defined. I am thinking that there is something wrong with the proxy that is getting created. So, I set the inlinescript property to true to see the .js that is getting generated. However, when I do this I get an error that : "The virtual path maps to another application which is not allowed". Does my web service file need to actually be in the same project as my website? This doesn't seem to make much sense because I have multiple web sites that call the same web service. What am I doing wrong here?

Thanks in advance

Hi Igouch,

Take a look at this:

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

when you want to refer to a webservice that you have not in the same solution as your webproject you could use a bridge file to make it possible. otherwise if you want to complete the tutorial build the webservice in the same solution as the webproject. then you are able to set a direct reference to your webservice.

Hope it helps.

Right now I do have the web service in the same solution - but not the same project. Does the web service have to be in the same project as the web application? I am not familiar with doing this as we have always had a separate project for every web service that we've developed. Even though they are in the same solution I still am getting the message that the virtual path maps to a different application which is not allowed.

Calling a Script in UpdatePanel

I am having a problem calling javascript from within an update panel.

Here is what I have set up:

When you select a given index on a dropdownlist, the updatepanel is populated with a custom control I built that loads a wysiwyg editor (widgeditor). The editor requires a javascript call to initialize, but the script (which is registered within the UpdatePanel's control collection), does not fire. In fact, no scripts will fire...

I tried using RegisterStartupScript, RegisterLoadScript, and adding a script via a ScriptManagerProxy.

Any thoughts? I feel there must be a way to accomplish this.

Thanks!

Ben

hehe, from the department of answering my own questions:

I found my big lead here - using the ScriptManager.RegisterScriptBlock:

http://forums.asp.net/2/1550428/ShowThread.aspx

...and updated it using the ScriptManager.RegisterStartupScript ... which made everything work lovely.

I figured there was a good answer to this problem.

Ben

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.

Al

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! :)

Callbacks in association with Update panel

I've got a Gridview that I've customized with buttons that do callbacks to get context menus and insert stuff in the main Gridview table.

If I put the entire Gridview in an update panel, what is the likelihood that these little custom callbacks will still work? Rephrased: is it a known feature of update panels that they will interfere with, override, or otherwise mess up such callbacks? Or do update panels just respond to submits, or have some other property, that would indicate that they would not interfere with such callbacks?

Any guidance on this would be appreciated ( I hope to have better luck testing this for myself soon.)

Thanks!

hello.

if i'm not mistaken, the scriptmanager intercepts form submission only...

Thanks for the post. That's good news. I'll keep my fingers crossed for the test.

Agradecimento!

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.

call web service using ASP.NET AJAX with javascript without callback function

Hello,

I'm trying to create a custom validator with a ValidatorCalloutExtender all in an Update Panel. As everyone knows the callouts do not currently display automatically after a server post-back and will only work for custom validators which utilize client-side validation.

When i call the javascript function from validator callout extender i must return the args.IsValid method before the function ends. If i use a callback function and try to return the args.IsValid from there the validator can't react because the IsValid method is set to late.

In conclusion, with AjaxPro framework this example works

 function descriptionRequiredValidate(source, args){
 var ajaxResult = FileAdmin.AjaxMethods.IsDescriptionRequired(...);
 var descriptionText = document.getElementById("tbFileDescription");
 var descriptionRequired = ajaxResult.value;
if(descriptionText.value =="" && descriptionRequired){
 args.IsValid =false;
 }
else{
 args.IsValid =true;
 }
}

As you can see no callback function is required but when i try to use the ASP.NET AJAX with a web service i can't read ajaxResult. Do i make a mystake somewhere or this tipe of response(without callback) only works with ajaxpro 

Your simplest path is to move your final declaration of validity to the OnSuccess handler of the service call.

Call method of Master page from Update panel

Hi,

How to call the method of master page from the UpdatePanel. Do I need to write a trigger? Provide the syntax.

Calling your master page from an update panel is no different from doing it on a "normal" page. All you need to make sure is that you have added a reference to your MasterType in your aspx code:

<%@. MasterType VirtualPath="~/MasterPage.master" %>

Then you can do Master.SomeMethod() from your page.

Hi,

Thanks the above code is already added. I have implemented the same, it is woring fine for the controls outside the Update panel. Same method call is not supported from update panel.

Jist of what I am looking at:

I want to display a message in the master page, which is a UserControl. I am facing the problem in invoking a method of UserControl in Master page from child page, all the controls in child page are embaded in the UpdatePanel.

Can you provide the syntax for the same

How the following line of code can help me?

ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl( );

Hi,

Thank you for your post!

To invoke a method of UserControl in Master page from child page? or fire an event of the UserControl?

Invoke a method of UserControl in Master page from child page lkike this!

UserControl uc = ((UserControl)Master.FindControl("uc1"));
uc.yourmethod();

If you have further questions, let me know.

Best Regards,

Call javascript function after UpdatePanel

Greetings, I have an UpdatePanel that gets triggered by a ControlEventTrigger button
click event. My question is this:
After the Update (request) is complete, I need to run a javascript function to do some work.
Is there a sort of "OnRequestComplete" property that I can use to specify the names of the JS functions that i want to run?

Thanks.

There isn't anything like OnRequestComplete that you can use. However, this is possible. In whatever server-side code that is executed.

ClientScript.RegisterStartupScript(Me.GetType(),"alert('Update done.');",true)

rchern13, the example you gave me above works fine.
ClientScript.RegisterStartupScript(Me.GetType(), "KeyName", "alert('Update done.');" ,true)

but if I put the alert inside a function, the function doesn't run.
ClientScript.RegisterStartupScript(Me.GetType(), "KeyName", "function update() {alert('Update done.');}" ,true)

Any thoughts? Thanks.

Where do you call the update function?

Hey guys please note ..

If you want the script to be registered at runtime you must make sure that the page does postback andthis should not be an atlas post back because in such case the script will not register or fire the required command

It should be done in PageLoad Event of the Asp.Net Page

or if you are not using Atlas in you application to display messages you can use the following code

Sub AlertMessage(ByVal StrMessage As String)
Dim strScript As String = "<script language=JavaScript>"
strScript += "alert(""" & StrMessage & """);"
strScript += "</script>"

If (Not Page.ClientScript.IsStartupScriptRegistered("Alertscript")) Then

'For asp.Net 1.0 and +
'Page.ClientScript.RegisterStartupScript("clientScript", strScript)

'For asp.Net 2.0
Page.ClientScript.RegisterStartupScript(Me.GetType, "Alertscript", strScript)
End If
End Sub

Asifsolkar, I disagree with you. I have a page with a structure like the following:

Page
--Update Panel
--Details View
--Command Button

The command button event handler includes the following line:

ClientScript.RegisterStartupScript(

Me.GetType,"approve","alert('" & str &"'); ",True)

The final effect of this is that my page inserts the record (the DV is in insert mode by default) into the database and I see the alert without a full postback.

I agree with rchern13. I was registering the function, but not calling it. Once I made a call to my JS functions, things are running as intended.
Rchern13, This forum is lucky to have an expert like you! Your time and help are appreciated.

Thanks.

I'm no expert, just somehow who drove everyone crazy while I was learning Atlas and am now trying to do my part to help the community.

Hi, I need to do that same - but couldnt get it to work withv2.0.50727.60626, does this work with this version? Or is thisthere any alternative?

Thanks
Jim
Yes, it will work. What error are you getting?
Thanks for replying, I wasn't actually getting any error, it's just wasn't firing the alert.

However, I just tried removing the other custom controls from my form(which emit their own JS) and it works... so I guess theres someconflict there.

Thanks
Jim

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

Call function and show results in update panel

Hi,

I've recently dipped into the world of AJAX and want to check if an idea I had is possible with it.

I have a page that takes values passed into from a previous page via a Cross Page PostBack. These values are used in an SQL query on the results page. The problem is that the query is very long, and takes around 5-10 seconds to complete (sometimes longer).

I want to show our users that the page is working in the background, and I believe it can only be done in AJAX. Ideally, I'd like to make a label that says something like "Operation complete" inside an UpdatePanel visible after the SQL query has been completed. I want the rest of the page to complete loading as quickly as possible, and have the update panel display it's message when everything's done.

I can see two ways of doing this:

Have the SQL query performed on the Page_Load event.Have the SQL query performed directly by the UpdatePanel calling a server side function.

Are either of these methods possible? The first method looks like it should work (maybe with threading), but I'm too much of a novice to know where to start. Can anyone recommend any good tutorials, or show me an example with a simple "Hello World" and Sleep() operation.

By the way, I'm also using master pages.

Thanks for any help you can offer.

Hi,

Please note that on the server side, there is not much difference between handling a normal postback an a partial postback. ASP.NET will create a new instance of the page that being requested to serve the request. And the page will go throught a full lifecycle.
So there won't be much difference between the two ways your posted, but option 2 is a bit better because the operation isn't necessorily to run each time.

I think your problem can be perfectly solved with UpdateProgress Control, please readthis for more information.
Hope this helps.

Call a page which contains updatepanel

Hi,

I have a page say CChildPage which contains an Update Panel.I want to call this page in another page thru

script tag and specifying the src="http://pics.10026.com/?src=CChildPage.aspx" .If i do this it gives me a syntax error.Is it possible to call a page like this.

The code is as follows :

<body><form> <table><tr><td>

<script src="http://pics.10026.com/?src=CChildPage.aspx" ></script>

</td></tr></table> </form></body>

Regards,

Shweta

Shweta mehta:

I have a page say CChildPage which contains an Update Panel.I want to call this page in another page

Basically you want to go from your current page to your new cchildpage right?

You can either use hyperlinks to do this or use javascript to change the document.location

You can use hyperlinks like this and the user will click on the link

<a href='cchildpage.aspx'>My Page</a>

Or you can use javascript

document.location.href = "the url of yourcchildpage.aspx"

No i dont want to go from current page to new page

I want to call my child page inside the new page and also it shld be placed under the table tag.If the child page is called in this way and if it contains UpdatePanel then it doesnt wrk and gives syntax error.

Please help me on this.

Regards,

Shweta

Hi Shweta,

I think iFrame is a good choice for nesting a page inside another. Like this:

<body><form> <table><tr><td>

<iframe src="http://pics.10026.com/?src=CChildPage.aspx" ></iframe>

</td></tr></table> </form></body>

Hi,

Is there any other way as i dont want to use iframes.

Iframe is the way to go...Looking at what you need to do, since its just display one page insider another,if I were you , would choose iframes.However is there any particular reason you do not want to use iframes?

http://www.jsworkshop.com/articles/02scriptsrc.html

Check this out

Call a JS function on AJAX update (instead of using UpdateProgress control)

The atlas:UpdateProgress control is nice, but an app I am working on already has a "loading..." image that is displayed using JavaScript (displayLoader(), and hideLoader() to hide) whenever a "non-Atlas" postback is invoked, and when the page initially starts loading.

I am looking for an way to call these functions whenever an Atlas postback is made so I can use this functionality for both types of postback. Is there an way to do this with client script, rather than creating a custom version of the UpdateProgress control?

Regards,
David

You should check out the samples on the client atlas section.

You can handle the different events to create your own custom progress indicator.

hello.

once again, search the atlas discussion an suggestion forum. there you'll find 1 or 2 posts that show how to handle the propertychanged event of the pagerequestmanager in order to handle the start and end of a partial atlas postback with jscript.

Great, those keywords have helped turn up some good results. I was previously searching both here and search engines for terms relating to "custom atlas updateprogress control" and didn't have much luck.

Thanks for pointing me in the right direction.
Regards,
David