How to trigger a jQuery function from code-behind?

Question

I am trying to call a jQuery function from ASP.NET code behind.

I don't want it to be triggered by the jQuery click event; I want to trigger the jQuery function--->"show the dialog" in the code behind of my control.

$(document).ready(function () {
    $("#LinkButton1").click(function(){
        $("#hightlight_show1").toggle();
    });

    var dialog1 = $("#Add").dialog({
            autoOpen: false,
            width: 620,
            height: 400
    });

    // Move the dialog back into the <form> element 
    dialog1.parent().appendTo(jQuery("form:first"));

    $("#BT_add").click(function () {
       $("#Add").dialog("open");
       return false;
});

I have tried something like this but it did not work:

$(document).ready(function () {
    $("#LinkButton1").click(function () {
        $("#hightlight_show1").toggle();
    });

    var dialog1 = $("#Add").dialog({
        autoOpen: false,
        width: 620,
        height: 400
    });

    // Move the dialog back into the <form> element 
    dialog1.parent().appendTo(jQuery("form:first"));

    function a() {
        $("#Add").dialog("open");
        return false;
    };

});

I specify this in the code behind using Page.ClientScript.RegisterStartupScript():

Page.ClientScript.RegisterStartupScript(
    this.GetType(),
    "a",
    "a();",
    true
 );

Jason P · Accepted Answer · 2013-07-19 14:13:17Z

3

First, move your function a() { out of the $(document).ready().

But you might still have an issue with order of execution.

If this is a full postback, then wrap the a() call in your RegisterStartupScript with another $(document).ready(). If it's a partial postback from an UpdatePanel, it should work as long as the dialog was properly created the first time the page loaded.

answered Jul 19, 2013 at 14:13

Jason P

27k3 gold badges34 silver badges45 bronze badges

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

2 Comments

Jason P Over a year ago

Are you getting any errors? Check your browser's javascript console.

zzz Over a year ago

I have used different way to get around it, too much time spend on jquery. Thanks

BenMorel · Accepted Answer · 2013-12-09 16:52:45Z

1

You can not trigger JavaScript function from code behind. You can define JavaScript function on html page and bind the click event on server side using Control.Attributes.Add. You will need server control to bind the event, you can make html control server accessible by put runat="server"

Javascript

function  YourFun(){
    $("#hightlight_show1").toggle();
}

Code behind

hightlight_show1.Attributes.Add("onclick", "YourFun();");

edited Dec 9, 2013 at 16:52

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jul 19, 2013 at 14:10

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

sircodesalot · Accepted Answer · 2013-07-19 14:09:56Z

0

It seems like it would be difficult for a server-side (c#) action to affect a client-side (jQuery) event. You would need to use ajax to request information from the server that would launch the event.

Remember, c# / ASP code runs on a web-server and it's job is just to send HTML to a browser upon request. After that, its role is essentially complete. JavaScript and jQuery and the like are interpreted by the browser, but only long after the document has already left the server. There are ""ways"" you can get c# to trigger a jQuery event in a very loose sense, but ultimately you'd still have to recognize the division between client (browser) and web-server.

answered Jul 19, 2013 at 14:09

sircodesalot

11.5k9 gold badges55 silver badges86 bronze badges

Comments

Moose · Accepted Answer · 2013-07-19 14:21:02Z

0

Your declaring function a() within the document.ready function.

The Register.StartupScript will add the code to document.onload, are your sure which event is firing (ready or onload)?.

Declare it outside of document.ready and it will probably work. Something like this:

<script type="text/javascript>

function a() {
    $("#Add").dialog("open");
    return false;
};

$(document).ready(function () {
     $("#LinkButton1").click(function(){
         $("#hightlight_show1").toggle();
     });

     // Move the dialog back into the <form> element 
     dialog1.parent().appendTo(jQuery("form:first"));

     var dialog1 = $("#Add").dialog({
         autoOpen: false,
         width: 620,
         height: 400
     });
});

edited Jul 19, 2013 at 14:21

answered Jul 19, 2013 at 14:14

Moose

1413 bronze badges

Comments

abidmix · Accepted Answer · 2013-07-19 14:25:49Z

0

Do this

MarkUp

<script type="text/javascript">
    function ShowPopup(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };
</script>
<div id="dialog" style="display: none">
</div>
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />

Code behind

  protected void btnShowPopup_Click(object sender, EventArgs e)
{
    string message = "Message from server side";
    ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}

Download Working demo here in C# and VB

answered Jul 19, 2013 at 14:25

abidmix

1,7481 gold badge16 silver badges26 bronze badges

2 Comments

zzz Over a year ago

this probably is the good solution, but it did not work for my case, maybe i messed this up in somewhere else.

abidmix Over a year ago

Which version of J -query libraries are you using.And if your stuff is in an update panel ,then you need to initialize the dialog again in the end request function.

Amit · Accepted Answer · 2013-07-19 14:36:45Z

0

Not sure if this is actually you problem, but in the "code you tried" you're missing the closing double quotes (") on your script tag declaration.

You wrote: type="text/javascript

but never closed the declaration... That would definitely mess things up for otherwise working JS.

edited Jul 19, 2013 at 14:36

Amit

15.4k8 gold badges49 silver badges69 bronze badges

answered Jul 19, 2013 at 14:17

isick

1,4871 gold badge12 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to trigger a jQuery function from code-behind?

6 Answers 6

2 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related