How to call Jquery function from C#

I would like to fadein and out a div after performing some code. This JQuery function is working fine when using the button’s onclientclick property. But, Unable to call it from c#.

JS:

function Confirm()
{
 $(".saved").fadeIn(500).fadeOut(500);
}

C#:
protected void btnsave_click(object sender, Eventargs e)
{
  //some code
  upd.update();
  ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Confirm", 
   "<script type='text/javascript'>Confirm();</script>", true);
}

HTML:
<asp:updatepanel id="upd" runat="server" updatemode="conditional">
 <triggers>
  <asp:asyncpostbacktrigger controlid="btnsave" eventname="click"/>
 </triggers>
 <contenttemplate>
  <div style="position:relative">
    <span class="saved">Record Saved</span>
    <asp:gridview....../>
  </div>
  <asp:button id="btnsave" runat="server" text="save" onclick="btnsave_click"/>
 </contenttemplate>
</asp:updatepanel>

CSS:
.saved
{
  position:absolute;
  background:green;
  margin:0 auto;
  width:100px;
  height:30px;
  visibility:hidden;
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

C#

protected void btn_click(object sender, Eventargs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "Confirm();", true);
}

JS:

<script>
   function Confirm()
   {
      $(".saved").fadeIn(500).fadeOut(500);
   }
</script>

Edit Improve Code

C#

protected void btn_click(object sender, Eventargs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "Confirm();", true);
}

JS:

<script>
    $(document).ready(function () {

       function Confirm() {
           $(".saved").fadeIn(500).fadeOut(500);
       };
    });
</script>

Method 2

When using asynchronous post backs is good to understand the events that you can actually handle on the client side (aspx file).

If you want to execute some client function (jquery, javascript) after an asynchronous post back has been made, I suggest using the pageLoaded event on the client side. So your javascript will be something like the following:

function pageLoad(sender, args) { 
    $(".saved").fadeIn(500).fadeOut(500);
}

For more information please refer to this MSDN page on the Event Order for Common Scenarios section.

Hope this helps


Edit after comment to add filter example

To filter logic in the pageLoad event depending on the element that raised the event, as stated in this MSDN page, on the Animating Panels section, you can do something like this:

var postbackElement;

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('btnsave') > -1) {
        $(".saved").fadeIn(500).fadeOut(500);
    }
}

Method 3

Try this…

ClientScript.RegisterClientScriptBlock(this.GetType(), "script", "Confirm();", true);


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x