Reload external javascript after asynchronous postback via UpdatePanel - asp.net

I have an external javascript on my page, e.g. something like:
<script src="http://foo.com/script.js" type="text/javascript"></script>
and an UpdatePanel somewhere. The script writes some content, and does this from within an anonymous javascript function in the js file. I.e., there is something like this in the script:
(function(){document.write('content');})();
Whenever the UpdatePanel is updated through asynchronous postback, everything the script did (or any javascript on my page, for that matter) is made undone.
For normal javascript, I would just use:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myFunction)
to redo all that, but since the function in the script source file is anonymous and called upon definition, I'm SOL! Any ideas?
Note: the external js source is from another domain and its content is out of my control.

Try this
private string _myScript = #"(function (){
var ys = document.createElement('script');
ys.type='text/javascript'; ys.async=true;
ys.src='http://foo.com/script.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ys,s);
});";
Then in your Page_Load
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "myScript", _myScript , true);

Ok, the "solution" ("dirty ugly hack", if you prefer) I came up with:
Instead of loading the js file directly, I load it via a wrapper that reads the file, wraps the result in custom javascript that puts the anonymous function in a global array, and call all functions in said array upon load and after each asynchronous postback.
Please don't enter this solutions in any beauty pageants.

The real problem here was that I wasn't using UpdatePanels correctly. If the UpdateMode of all the UpdatePanels on your page are set to Conditional, and your ScriptManager has partial updating enabled, it really shouldn't "[undo] everything the script did".

Related

Why javascript function not working from content page onload?

I am using ASP.NET 3.5.
I have a content page and I want to call a javascript function on this page's load event.
I tried adding:
onload="GetLocalDate();"
within the content page placeholder tag, but it is not working. But when I call this function from any button's OnClientClick event, it works.
How to make it work on Content Page's load event?
The content page "Placeholder" tag is a server side only control. It doesn't produce any code on the client other than arranging its contents etc. As such, the JavaScript onload handle is never rendered.
Examine your browser / client-side source to verify this.
Have you tried calling from document.ready?
$(document).ready(function () {
GetLocalDate();
}
Put that inside script tag on your page
<script type="text/javascript">
function pageLoad(){
GetLocalDate();
}
</script>
$(document).ready(function () {
GetLocalDate();
}
Should work. Since it was not working for you, I would assume that you do not have a reference to the jQuery library in your page.
If you don't want to include the jQuery library in your project for some reason, you could inject it from server-side code within your content page:
ClientScriptManager cs = Page.ClientScript;
cs.RegisterStartupScript(...) <-- add necessary details here (the Type, scriptname, the text, and a Boolean to whether you need it to include its own tags)
You should also check to make sure it hasn't already been registered before using it though (IsStartupScriptRegistered).

__doPostBack outside of href causes full page postback

I have a custom control (ascx) which implements the IPostBackEventHandler interface for intercepting custom events triggered by custom rendered HTML links.
In this control I use an update panel and inside the update panel I use a literal control in which I render custom HTML links.
When I render the HTML links inside the literal control I use a StringBuilder with the following code:
sb.AppendFormat ("Text",
this.Page.ClientScript.GetPostBackClientHyperlink(this, custom_string_param));
Hyperlinks are rendered fine, and when clicking on them an asynchronous postback is triggered and a partial update is fired (since all links are rendered inside the Update panel).
The problem is that I need to do some custom Javascript before firing the __doPostBack which is rendered with the above code. So here is a simplified version of the changed code:
sb.AppendFormat ("Text",
custom_string_param);
Also in the ascx markup I use the following code (inside or outside the Update panel):
<script language="javascript" type="text/javascript">
function JSFunc(param) {
// custom js code here ....
__doPostBack('<%=this.ClientID%>', param);
}
</script>
The problem here is that when a link is clicked it performs a full postback and not a partial one. I also tested more simple versions of the above code and it seems that if you remove the __doPostBack from the href or the onclick events from the link ( tag) and move it to a custom js function which in turns you supply to the link, a full postback is triggered.
Note that there is no error on the page and in both cases the code work correctly. The page is rendering correctly depending on the parameters returned from the __doPostBack, but in the second case a full instead of partial postback is firing.
Any ideas?
Thanks in advance,
George
I think you can't call __doPostBack with the ClientID. It actually uses UniqueIDWithDollars, but generally with ASP.NET Web Forms I say: you don't want to know.
Since calling this method is all about abstracting away the details of how post back works, you would be better off asking the framework for the code. Luckily, there's a special method just for that, which will take care of the details. In your code it would look like something like this:
<script language="javascript" type="text/javascript">
function JSFunc(param) {
// custom js code here ....
<%= Page.ClientScript.GetPostBackEventReference(this, custom_string_param) %>
}
</script>
This let's the client script manager create the piece of JavaScript code, using a reference to your user control (this) and any custom event argument (custom_string_param).
There's one caveat though. When calling it this way, it will add javascript: to the beginning of the string.
To override this behaviour, you need to use an overload of GetPostBackEventReference that accepts an instance of PostBackOptions as its first argument, the instance having its RequiresJavaScriptProtocol property set to false.
PostBackOptions options = new PostBackOptions(this, custom_string_param)
options.RequiresJavaScriptProtocol = false;
Page.ClientScript.GetPostBackEventReference(options)

How to call javascript function from c#

I like to call a JavaScript function from c#. Can any one can give me code snippet.
More detail...
I have a asp.net page which has a asp button. when i click that button, i like to call javascript function.
like wise....
in my asp.net page,
<button id="save" onclick="i like to call a method resides in asp.net page'>Save</button>
More and more details...
when click the asp.net button, i like to perform some server side action and then like to call a javascript function from there itself...
For an asp:button you use OnClientClick
<asp:Button id="myid" runat="server" OnClientClick="alert('test')" />
On the assumption that you're coding in ASP.NET (including MVC), calling a JavaScript function would mean embedding the call in JavaScript into your ASPX code, like so:
<script type="text/javascript">
doSomething();
</script>
You do have the opportunity to pass information from your C# to the JS call, just as you would have any other code alter the results of your ASPX:
<script type="text/javascript">
doSomething("<%= GetSomeTextFromCSharp(); %>");
</script>
This is really stretching the definition of "calling JavaScript from C#" though. What you're doing is having your C#/ASPX code generate HTML/JavaScript, which the browser then interprets as it would any other HTML/JS (regardless of how it was generated).
Perhaps you could explain what you're trying to do a bit more.
i tried with this code it works for me check whether it helps
1)
Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "alert('Informations');", true);
The other way is call the javascript method which is written in source page
Page.ClientScript.RegisterStartupScript(this.GetType(), "click", "xyz();", true);
You can't "call" a Javascript function from ASP.NET C# code-behind. You can write additional Javascript to the webpage. By the time the page is sent back to the user and the Javascript exists, your code-behind is gone. You can write out to a Literal or do a Response.Write()
Response.Write("<script language='javascript'>alert('Hellow World');</script>");
Sarathi, based on your recent update, it's not clear that you need any C# interaction at all. Your <button> appears to be strictly client-side (ie: HTML) with no ASP.NET interaction within it. To call your JavaScript function you'd attach the function call to the onclick attribute of the button tag:
<button id="save" onclick="mySaveFunction();'>Save</button>
Note that mySaveFunction() just needs to be defined in the browser's load stack for the current page. That means it could be defined in any of:
The ASPX page that holds the <button>
The Master page for the current ASPX page
One of the User controls (or MVC partials) loaded by the current ASPX page
An external JavaScript file that's loaded by one of the above.
Lastly, I'd just like to reiterate that there's nothing particularly C#/ASP.NET-specific about this. You could do the same with any language/framework, including static HTML files. Your question appears to be entirely JavaScript-dependent.
For the window object:
http://msdn.microsoft.com/en-us/library/ms536420%28VS.85%29.aspx
window.execScript
For the page pbject:
http://msdn.microsoft.com/en-us/library/dfbt9et1%28v=VS.71%29.aspx
RegisterClientScriptBlock
RegisterOnSubmitStatement
RegisterStartupScript
etc ...
you can call javascript function from code behind page ..for example you have closewindow function definition part in javasript..if you want to execute that function,you can write following codings in any click event in code behind page..
ClientScript.RegisterClientScriptBlock(GetType(), "close", "<script language=javascript>Closewindow();</script>", false);

JQuery Plugins Not Working Correctly With ASP.NET AJAX's ScriptManager

I am trying to use a jQuery plugin in a control. The pages that the control can be on use partial postbacks via an UpdatePanel. I include jQuery and the plugin during the control's PreRender event like this:
ScriptManager.RegisterClientScriptInclude(
this,
this.GetType(),
"jquery",
"/_infrastructure/javascript/jquery.js"));
ScriptManager.RegisterClientScriptInclude(
this,
this.GetType(),
"jquery.customPlugin",
"/_infrastructure/javascript/jquery.customPlugin.js");
The customPlugin jQuery plugin sets up a new function called "executeCustomPlugin". Later in the PreRender event of the control, I use the plugin on an element on the control:
ScriptManager.RegisterStartupScript(
this,
this.GetType(),
"customPlugin init script",
#"$(document).ready(function() {
$('#elementId').executeCustomPlugin();
});",
true);
However, when it executes, I get the JavaScript error:
$('#elementId').executeCustomPlugin is not a function
It would seem as if the jQuery plugin is never executed at all, but I set up window.alerts in the jQuery.customPlugin.js file, and it is indeed being executed.
Is there a way to fix this problem?
A possible explanation is that your plugin doesn't exist in the DOM prior to the execution of the ScriptManager code.
View the source of the page after it is rendered to the browser and ensure that your custom plugin's script tag is rendered before the javascript that is registered with your script manager.
It turns out that my problem was caused by including jQuery twice. The first jQuery instance was getting the plugin applied, but the second jQuery instance was receiving the call.

Javascript: Referring to control before page is loaded

I have a composite control on an ASPX page. There is Javascript on the ASPX page that gets loaded before the control. Now, since the script refers to the control element which does not exist when the script is loaded, this is throwing a Javascript error of "Obect not defined". Attaching the script to the onload event of the control gives "Sys not defined".
Any Idea?
The script is in an external file.
You need to either move the Javascript function below the control creation, or add it inside a window.load event handler (jQuery and Prototype can help you for that), so you guarantee that the Javascript is called when the page has loaded and not before.
You can keep the script in the load method of your control, although really it should be placed in the PreRender because then you can include it or not include it based on the state of the control. This would save you from javascript errors in the future where it says "Object cannot be found" because you have made the control invisible.
The reason you're getting "Sys is not defined" is because your script is being placed before the MicrosoftAjax.js file has loaded. Try something like this:
Dim yourScript as String = "Sys.Application.add_load(function() { /*code here*/ } )"
ScriptManager.RegisterStartupScript(Page, Me.GetType(), "ScriptKey", yourScript, true)
Otherwise you could use Page.ClientScript to hook into the document ready event if using the Sys namespace is not a requirement, but it sounds like from your question it is.
Edit:
Instead of RegisterStartupScript you're probably looking for RegisterClientScriptBlock, sorry, the two have different functionality.

Resources