Call Javascript from function based on condition

Question

I have a jQuery modal system that I have built and would like to trigger the modal to popup if the username or password entered by a user is invalid. I need to do these checks from the C# codebehind in ASP, and then if there is an invalid username or password trigger my javascript function: showModal("errorDiv").

Is this possible?

I don't want to bind the javascript to a button click but rather on the condition of block of code on a button click.

So basically

btnSubmit_OnClick(sender, e)
{
   if (Username.Exists())
      //// Continue on
   else
        call showModal("errorDiv");

}

Any help?

Answer 1

There's no way to invoke a JavaScript function "directly" from a web server. The server can only generate the HTML response that is displayed by the browser.

The HTML response that the webserver generates can include generated JavaScript. Therefore, I guess what you probably want to do is write some JavaScript from within btnSubmit_OnClick which will trigger the dialog when the page loads.

I don't know enough about the mechanics of ASP to be able to help you there, but hopefully that clears things up slightly.

Answer 2

One way to accomplish this would be to emit a javascript variable to your page from your C#. Then set up a javascript routine to run when the page is loaded using jQuery that checks that variable and calls showModal("errorDiv").

Answer 3

I'm not exactly sure what you are trying to accomplish here. It looks to me like you are trying to call an ASP function from within javascript. The problem is that your ASP runs on the server and the javascrpt runs on the client.

You need to create an ASP page that returns your authentication results. Then you use something similar to this to evaluate it:

.get('/urlto/authpage.asp', function(data) { 
    if (data='Authorized') { 
        do something;
    }
    else {
        showModal('errorDiv');
    }

in this case I assume your ASP 'page' simply returns "Authorized" if it's authorized.

.get() makes a call to a remote server using the URL in quotes. The second argument is a function which is called when the results are returned. The first argument to the function is the text of that web request.

More info on .get(): http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype

Hopefully I read your question properly.

Answer 4

Give a look to the ScriptManager.RegisterStartupScript method, it allows you to execute JavaScript on the client side, when your asynchronous requests end on a control, this method will append your JavaScript to the server-side response:

ScriptManager.RegisterStartupScript(UpdatePanel1, GetType(), "showModalScript",
                                    "showModal('errorDiv');", true);

If you're not using MS Ajax UpdatePanels for partial page rendering, and your postback is a normal one, give a look to the ClientScriptManager.RegisterClientScriptBlock:

ClientScript.RegisterStartupScript(GetType(), "showModalScript",
                                   "showModal('errorDiv');", true);