How to call Jquery function from C#

Question

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

Have a look, it works with me stackoverflow.com/a/6859805/4074774 — Ayman Mostafa
– Ayman Mostafa, Commented Dec 19, 2017 at 18:08

Jaykumar Patel · Accepted Answer · 2014-03-06 06:09:41Z

8

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>

edited Mar 6, 2014 at 6:09

answered Mar 6, 2014 at 5:58

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruby Over a year ago

Thank you. That worked only when the css visibility is 'visible'. I would like the span to stay hidden. On button's click, it should fade in and out.

Ruby Over a year ago

Ok Figured that out...$(".saved").css("visibility","visible").fadeIn(500).fadeOut(500);

juanreyesv · Accepted Answer · 2014-03-06 06:37:21Z

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

edited Mar 6, 2014 at 6:37

answered Mar 6, 2014 at 6:11

juanreyesv

8539 silver badges22 bronze badges

2 Comments

Ruby Over a year ago

There are other postback events too that do not require the span to fadein. How can I filter then.

juanreyesv Over a year ago

There is an example for that in this page msdn.microsoft.com/en-us/library/bb398976.aspx , on the Animating Panel section... the main thing is to use the beginRequest event to store in a variable the element that is raising the postback and using that variable to filter the pageLoad event code.

Bala · Accepted Answer · 2018-01-27 10:23:25Z

0

Try this...

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

answered Jan 27, 2018 at 10:23

Bala

1021 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to call Jquery function from C#

3 Answers 3

JS:

Edit Improve Code

JS:

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

JS:

Edit Improve Code

JS:

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related