Trigger javascript from code behind; button fires js code, RegisterStartupScript does not

Question

I have an asp.net application with a div that triggers a popup window (on click). I need to pop up the window if something happens in my code behind code.

I figured I could send a javascript code block to my page that would click the div, but I can't seem to make it work. Here's the jQuery for the popup plugin:

$(function () {
   $('.c_popup').modalPopLite(
                { openButton: '#div_trigger', 
                  closeButton: '#close-btn' 
                });
});

A simple div triggers it (by clicking the div):

<div id="div_trigger">Trigger</div>

I can click the div from javascript via a button on the page:

<input type="button" id="btn_show_error" value="Popup"
       onclick="document.getElementById('div_trigger').click();" />

That works. But when I try to send exactly that javascript block to the page from my code behind, like this:

ClientScript.RegisterStartupScript(Page.GetType(), "error_click", 
       "<script>document.getElementById('div_trigger').click();</script>")

Nothing happens. I tested my code behind by changing to a simple alert box:

ClientScript.RegisterStartupScript(Page.GetType(), "error_click",
     "<script>alert('Hello World');</script>")

And that works fine. So I can see that the javascript is reaching the page from my code behind, and that same javascript block does what I want when it comes from a button on the page itself, but it doesn't work coming from the code behind.

Any ideas would be appreciated. I'm really stuck.

EDIT: Two posters have responded that I'm posting my javascript before the popup control is bound. I'm not sure how to solve this problem, even with the help I've been given. I tried creating this function in my page header block:

function TriggerDiv() {
    $(document).ready(function () {
        alert('success');     //alert just to check if the function is firing
        document.getElementById('div_trigger').click();
    });
}

And called it from my code behind like this:

ClientScript.RegisterStartupScript(Page.GetType(), "error_click", 
    "<script>TriggerDiv();</script>")

The alert fires, but the click event does not - I'm thinking that I'm still not doing things in the right order. Any further help would really be appreciated.

James Montagne · Accepted Answer · 2013-09-19 20:10:21Z

2

The element likely does not exist at the time the javascript executes, or at least your call to modalPopLite has not yet executed. Wrap your code in $(document).ready.

Edit: The element should exist at the time this executes. RegisterStartupScript adds the script to the bottom of the body. However, the modalPopLite call will not yet have been executed, so the click handler will not be attached yet. $(document).ready should still solve this issue.

answered Sep 19, 2013 at 20:10

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

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

2 Comments

Stanton Over a year ago

Thanks a million, you and @Guffa put your finger on my problem. But I'm not sure how to solve it. I've edited my original post with a (pretty lame) attempt, but I don't understand how to post my javascript after the page is fully loaded. Any more tips gratefully accepted.

James Montagne Over a year ago

Two things to check. Put an alert before your modalPopLite call and see what order your two different scripts run in. The modalPopLite needs to run first. Also log or alert document.getElementById('div_trigger').click and see if it is in fact set to something.

Irfan TahirKheli · Accepted Answer · 2013-09-19 20:22:47Z

1

<script>
    function SayHi()
{
   alert('hi');
}
</script>

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "TestFunction", "SayHi();", true);

answered Sep 19, 2013 at 20:22

Irfan TahirKheli

3,6621 gold badge26 silver badges36 bronze badges

Comments

Guffa · Accepted Answer · 2013-09-20 00:24:37Z

1

The startup script is put in the page at the end of the form, so it will run before the ready event, as that happens when the entire document has been loaded. The click is triggered just fine, it's just that there is no handler that cares about the click yet.

As long as your script for the popup plugin is before the end of the form (for example as generally recommended; in the head), you can just bind another ready event handler, and that will be triggered after the popup has been bound:

ClientScript.RegisterStartupScript(Page.GetType(), "error_click", 
   "<script>$(function(){ document.getElementById('div_trigger').click(); });</script>");

You might need to use the jQuery way of triggering the event to trigger an event bound using jQuery:

ClientScript.RegisterStartupScript(Page.GetType(), "error_click", 
   "<script>$(function(){ $('#div_trigger').click(); });</script>");

edited Sep 20, 2013 at 0:24

answered Sep 19, 2013 at 20:17

Guffa

703k112 gold badges760 silver badges1k bronze badges

3 Comments

Stanton Over a year ago

Guffa, thanks for your response. You and @JamesMontagne agree that I'm executing that javascript before the function is ready - makes sense - but I'm still not quite clear what to do about it. Your function, above, appears to be my code wrapped in a 'function'... I pasted it into my code, no result. Can you point me in the right direction of triggering my event after the page has loaded?

Stanton Over a year ago

Although if I paste your code into my jQuery block at the head of my page, it does work.

Guffa Over a year ago

@Stanton: Yes, it's your code wrapped in a function, and used as the event handler for the ready event. You might need to use jQuery to trigger the event, as jQuery adds another level on top of the built in events. I added code above.

Collectives™ on Stack Overflow

Trigger javascript from code behind; button fires js code, RegisterStartupScript does not

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related