We Keep Coding

Can't call javascript function in ASP.NET cs page

I have below JavaScript function in my aspx page:
<script>
function ShowMessage() {
alert("Hello World");
}
</script>
I want to use this function in my cs page on button click event:
<asp:Button ID="MyButton" runat="server" Text="Click Here" OnClick="MyButton_Click" />
Now this code works fine:
Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", "alert('Hello World');", true);
But this code dose not work:
Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", "ShowMessage();", true);
What's wrong in my code? What's the possible reason?

You need to expose your ShowMessage() function to a scope that your DOM has access to.
You can try:
window.ShowMessage = function() {
alert("Hello World");
}
Another option is to move your <script></script> containing your function ABOVE the DOM element that needs it:
<script>
function Foo() {
alert('Bar');
}
</script>
<button onclick="Foo()"></button>

You can use onclientclick
<asp:Button ID="MyButton" runat="server" Text="Click Here" onclientclick="ShowMessage()" />

Try this:
<script>
$('#idOfButton').click(
function() {
alert("Hello World");
}
);
</script>
Note: use JQuery for this code and paste this on the end of your HTML page.
Hope this will help

Can't get value of asp:textbox on external javascript file

here is example:
abcd.aspx
<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login"
onclick="btnLogin_Click" OnClientClick = "loginAlert()" />
javascriptfile.js
function loginAlert() {
var name = document.getElementById('<% txtFName.ClientID %>').value;
alert(name);
}
link to javascript file on .aspx page
<script src="../../JSfiles/javascriptfile.js" type="text/javascript"></script>
here name is not appear on popup box.

You can't use code nuggets (<% and %>) inside normal files (like your javascriptfile.js) since they're not interpreted by ASP.NET in any way. What you could do is to pass the Id of the text-box to a function:
function loginAlert(ctrl) {
var name = document.getElementById(ctrl).value;
alert(name);
}
Then the markup will look like the following:
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" OnClientClick="loginAlert('<%=txtFName.ClientID%>')" />
UPDATE
I didn't pay attention to the fact that construct like <%=...%> don't work in server-side control declarations (because they're basically converted to Response.Write statements when the page is compiled). There're at least two ways to solve this problem:
You can make the reference to the DOM element for the name text-box globally available. Your markup will look like the following:
<script type="text/javascript">
var loginNameId = '<%=txtFName.ClientID%>';
</script>
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" OnClientClick="loginAlert()" />
And your loginAlert will look like the following:
function loginAlert() {
var name = document.getElementById(loginNameId).value;
alert(name);
}
I personally don't like this solution since you pollute the global namespace with variables and it's not very elegant in general.
Alternatively you can use data attributes together with ASP.NET data binding.
Markup:
<asp:Button ID="btnLogin" data-name='<%# txtFName.ClientID %>' runat="server" Text="Login"
OnClick="btnLogin_Click" OnClientClick="loginAlert(this)" />
JavaScript:
function loginAlert(ctrl) {
var name = document.getElementById(ctrl.readAttribute('data-name')).value;
alert(name);
}
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
DataBind();
}

The javascript file is not served by the ASP.Net parser. Thus, the <% %> is ignored and output as is.
The simpliest way is to provide the ID as parameter:
<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login"
onclick="btnLogin_Click" />
code behind :
btnLogin.OnClientClick = string.Format("loginAlert('{0}')", txtFName.ClientID);
and in the js file:
function loginAlert(txtId) {
var name = document.getElementById(txtId).value;
alert(name);
}

Markup <% %> wont work in JS files. If you put it on aspx page inside <script type='text/javascript'>...</script> then it will work.
Update:
If you want to get client id, then you can register it from code behind in a variable, as:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "JsVariables", "var txtboxClientId='" + txtFName.ClientID + "';", true);
and in Js file use:
function loginAlert() {
var name = document.getElementById(txtboxClientId).value;
alert(name);
}

Calling the button.click() event from javascript doesn't fire

I have the following source in aspx:
<div>
<asp:HiddenField ID="hidValue" runat="server" />
<asp:Button runat="server" ID="hidButton" OnClick="hidButton_Click" />
<script type="text/javascript">
function ExtendPanel(PanelNumber) {
var hidValue = document.getElementById('<%=hidValue.ClientID %>');
hidValue.value = PanelNumber;
document.getElementById('<%=hidButton.ClientID%>').fireEvent("onclick");
}
</script>
</div>
In my code behind, I have the following C# function declared:
protected void hidButton_Click(object sender, EventArgs e)
{
int PanelNumber = int.Parse(hidValue.Value);
... do something with PanelNumber ...
}
When I click on the button using the mouse, "hidButton_Click" function is normally executed.
However, when the javascript function ExtendPanel(PanelNumber) is executed, the click event seems to be fired, but the function is not executed.

Replace this
document.getElementById('<%=hidButton.ClientID%>').fireEvent("onclick");
with
__doPostBack('hidButton','OnClick');

try this
document.getElementById('<%=hidButton.ClientID%>').click();

Try this one below
$('#<%=hidButton.ClientID%>').click();

I got the same issues and resolved to put
OnClientClick="javascript:return true;"

get_postBackElement() is always undefined

<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
var elem = args.get_postBackElement();
alert("begin " + elem.value);
}
function EndRequestHandler(sender, args) {
alert("end request handler");
}
</script>
This is my simple attempt to retrieve the postback element, triggered from my UpdatePanel. My update panel looks like this:
<asp:UpdatePanel ID="UpdatePanel_Project" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList_Project" runat="server">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList_Customer" />
</Triggers>
</asp:UpdatePanel>
I believe I have did everything correctly...
Any ideas?

You have to set the ClientIDMode property value of the control (the DropDownList_Customer drop down list in this case) to AutoID. Please view my reply here.

What is your postback trigger ? This control seems to be missing DropDownList_Customer
<asp:AsyncPostBackTrigger ControlID="DropDownList_Customer" />

I finally solved this pain, here's my solution.
Basically we just need to override Microsoft's _uniqueIDToClientID function so it doesn't ignore our Static client Ids on postback elements.
You'll just need to add the following code at the bottom of your page.
if (Sys.WebForms.PageRequestManager) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._uniqueIDToClientID = function (uniqueID) {
var clientID = uniqueID.replace(/\$/g, "_");
if (document.getElementById(clientID)) {
return clientID;
}
var lastDollar = uniqueID.lastIndexOf("$");
if (lastDollar === -1) {
return clientID;
}
if (lastDollar+1 > uniqueID.length) {
return clientID;
}
var staticID = uniqueID.slice(lastDollar + 1);
return document.getElementById(staticID) ? staticID : clientID;
};
}
Now, get_postBackElement() in your BeginRequestHandler will no longer be undefined!
Just make sure our code is executed after Microsoft's MicrosoftAjaxWebForms.js because we are overriding its _uniqueIDToClientID function.
Note: My function always returns the default WebForms ClientID if the element exists on the page. Only if the element cannot be found on
the page, does it check to see if an element with a static ID exists
on the page. If it exists, the staticID is used, otherwise it
defaults back to the default WebForms ClientID.

__doPostBack not working for me

Is there an error in the way i use the __doPostBack?
function displaymessage() {
var scl = "aaaaaa";
var pageId = '<%= Page.ClientID %>';
__doPostBack(pageId, 'OtherInformation');
alert(scl);
}
<input type="button" value="Click me!" id="Button2" onclick="displaymessage()" />
When i press the button it should call the RaisePostBackEvent in the code file, but it doesn't. If i comment the doPostBack it reaches the alert but when it is uncommented it does not. So it must be an error in the usage of the doPostBack.
I followed this post: Call ASP.NET function from JavaScript?

Place the following script on the header section of your html file:
<script>
function __doPostBack(eventTarget, eventArgument) {
document.Form1.__EVENTTARGET.value = eventTarget;
document.Form1.__EVENTARGUMENT.value = eventArgument;
document.Form1.submit();
}
</script>

for me the _dopostback() was not firing only on IE and chrome browser. I have resolved by adding "return false;" statement in the javascript function. for example:-
function test()
{
_dopostback("logout","");
return false;
}
now its working fine.

Change you code to this:
setTimeout(function () { __doPostBack('btnSave', '') }, 500);
Use btnSave Id. It will work in all browsers.

Drop your second argument of __doPostBack ('OtherInformation'), and replace with an empty string, ''. You could put that data in a hidden input field if you need it, and retrieve it using Request.Form.

I also followed the same post you mentioned and got an error, I tried to use the other answers here but it still didn't work.
Until I've found this post:
http://forums.asp.net/t/1197643.aspx
(look in the 8th reply made by NC01).
1.basically the idea is that your aspx should have something like this:
<script type="text/javascript" language="javascript">
function myfunction() {
if ('<%=Page.IsPostBack%>' == 'False') {
var pageId = '<%= this.UniqueID %>';
__doPostBack(pageId, 'do_something_good');
}
}
</script>
2.then in your .cs you should add interface IPostBackEventHandler (for example:)
public partial class _default : System.Web.UI.Page, IPostBackEventHandler
3.and in your .cs in page_load add this line:
this.ClientScript.GetPostBackEventReference(this, string.Empty);
4.don't forget to implement the interface:
public void RaisePostBackEvent(string eventArgument)
{
if (eventArgument == "do_something_good")
{
//bla
}
}
And guess what - it even works!
#Subhash Dike - The PageMethods works only for static methods, AFAIK.

Add EnableEventValidation="false" into your <%Page tag to solve __doPostBack problem