CODEWITHSUNDEEP
c#javascriptasp.net
AbdulAziz
AbdulAziz

Reputation: 6278

JS function calling from the code behind Issue

I have a JS function (Show alert box), and have a link button in ASP page, On click event from code behind for this link button I want to call this function and then redirect to certain page.

ASP Code

 <script type="text/javascript" language="javascript">
     function myFunction() {
         // executes when HTML-Document is loaded and DOM is ready
         alert("document is ready!");
     }                   
 </script>
 <div>
     <asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClick="lnkbtnChangePassword_Click" ></asp:LinkButton>
 </div>

C# Code

 protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
 {
     ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "myFunction()", true);
     Response.Redirect("myPage.aspx");
 }

Here when I click on the link button, it simply don't display the alert box/window and redirect to the page.

Upvotes: 1

Views: 1231

Answers (4)

Emad Mokhtar
Emad Mokhtar

Reputation: 3297

What you're missing is waiting for JavaScript alert dialog to popup and then redirect to the page. In order to do this you need to tell button to wait for JavaScript alert dialog to popup and then do the Server side work after.

ASPX:

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function alertBeforeSubmit() {
           return alert('Document Ready');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button Text="Do" runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" OnClientClick="return alertBeforeSubmit();" />
    </div>
    </form>
</body>

CS:

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        Response.Redirect("Default.aspx");
    }

Upvotes: 0

homega52
homega52

Reputation: 83

Change your javascript function to :

<script type="text/javascript" language="javascript">
     function myFunction() {
         // alert will stop js execution
         alert("document is ready!");
         // then reload your page
         __doPostBack('pagename','parameter');
     }                   
 </script>

And call it from code-behind with this function :

protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
 {
     //do your job here
     //then call your js function
     ScriptManager.RegisterStartupScript(this,this.GetType(), "CallMyFunction", "myFunction();", true);
 }

Upvotes: 1

Nikola Radosavljević
Nikola Radosavljević

Reputation: 6911

You should use LinkButton.ClientClick instead of LinkButton.Click event.

Click event is handled on server. When user clicks the button, page is posted back to server and code is executed on server side.

ClientClick event is really a name of JavaScript function which should be executed.

You should probably do something like this:

<asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClientClick="showMyAlertAndSubmit()"></asp:LinkButton>

<script type="text/javascript">
function showMyAlertAndSubmit(){
    alert("Your password is being changed");
    // submit your form
}
</script>

Why your current code doesn't work

You currently send script for showing a message, and redirect at the same time. This means that browser receives instructions to show a message and to redirect, and it redirects the user before showing the message. One approach could be to redirect from client side. For example:

 protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
 {
     ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "myFunction()", true);
 }

and on client side

function myFunction() {
    // show your message here
    // do other things you need
    // and then redirect here. Don't redirect from server side with Response.Redirect
    window.location = "http://myserver/myPage.aspx";
}

Other options

Since you need to first perform checks on server side before saving data and redirecting, you can use ajax to call server without performing postback. Remove Click handler, and only use ClientClick:

function myFunction() {
    $.ajax({
      type: "POST",
      url: "myPage.aspx/MyCheckMethod",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
          ShowAlert();
          window.location = "http://myserver/mypage.aspx";
      }
    });
}

For more details please check this tutorial.

Upvotes: 2

Mehran Hatami
Mehran Hatami

Reputation: 12961

Change your code like this:

ASP Code

<script type="text/javascript" language="javascript">
  function myFunction() {
     // executes when HTML-Document is loaded and DOM is ready
     alert("document is ready!");
    }                   
</script>
<div>
     <asp:LinkButton ID="lnkbtnChangePassword" runat="server" Text="Change Passwrod" OnClick="lnkbtnChangePassword_Click" OnClientClick="myFunction()" ></asp:LinkButton>
</div>

C# Code

protected void lnkbtnChangePassword_Click(object sender, EventArgs e)
{
    Response.Redirect("myPage.aspx");
}

Upvotes: 1

Related Questions