How do I call a jquery code from code behind?

Question

Right now i'm hiding div elements with this script

$(document).ready(function () { 

            $('#<%=phaseOne.ClientID%>').hide();
            $('#<%=phaseTwo.ClientID%>').hide();
            $('#<%=phaseThree.ClientID%>').hide();
});

And I wanted it to show with a $('#<%=phaseOne.ClientID%>').show(); code for an example upon triggering a button that is base on a logic and status from the database

You can send a ajax call to on receiving the response show the elements you want. — Adil
– Adil, Commented May 9, 2014 at 5:25
I can't, I'm having trouble with ajax (Ajax Control Toolkit) and thus this was the only alternative way I could think of. I've been hit with this error message if i tried to: "RegisterDataItem can only be called during an async postback." — user3195396
– user3195396, Commented May 9, 2014 at 5:27
If it is just for one time when page load then you can hide these controls from server. Other wise you can show hide using postback on server side instead of javascript — Adil
– Adil, Commented May 9, 2014 at 5:29
I've tried that, it won't work. Refer to my error that I have encountered link — user3195396
– user3195396, Commented May 9, 2014 at 5:32

Vikram · Accepted Answer · 2014-05-09 05:31:09Z

3

you can call the javascript fucntion as shown below

in the C# code you can call the following code on completion of condition

ScriptManager.RegisterStartupScript(this, Page.GetType(), "key", "Display()", true);

and in the .aspx page you can have your div and function mentioned as below

<script type="text/javascript">
 function Display() {            
            var e = document.getElementById('<%=phaseOne.ClientID%>');         
            if (e.style.display == 'block')
                e.style.display = 'none';
            else
                e.style.display = 'block';
            return false;
        }
 </script>

<div id="phaseOne" style="display: none;position:absolute;  
    top:300px;
    right:250px;  "</div>

answered May 9, 2014 at 5:31

Vikram

1,6375 gold badges17 silver badges37 bronze badges

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

3 Comments

Vikram Over a year ago

@user3195396 css you have to take care by trying yourself

user3195396 Over a year ago

Ok fixed, I just put inline-block instead of block. Thanks, also what does key mean?

Vikram Over a year ago

key is just the inique identifier for the script block as ScriptManagercan hold many scripts , in that case it nees to identify each script with some key

SHEKHAR SHETE · Accepted Answer · 2014-05-09 05:56:03Z

1

Try following:

<script type="text/javascript">
$(document).ready(function () { 
   HideAll();
}
 function HideAll() 
{   
  $('#<%=phaseOne.ClientID%>').hide();
  $('#<%=phaseTwo.ClientID%>').hide();
  $('#<%=phaseThree.ClientID%>').hide();
}

function ShowPhase1()
{
  $('#<%=phaseOne.ClientID%>').show();
}

</script>

Use GetType() instead of typeof(Page) in order to bind the script to your actual page class instead of the base class
Pass a key constant instead of Page.UniqueID, which is not that meaningful since it's supposed to be used by named controls,
End your Javascript statement with a semicolon

In Code Behind on Button Click:

if(somecondition==true)
{
  ScriptManager.RegisterStartupScript(this, GetType(), "key", "ShowPhase1();", true);
}

Add as much as function to show/hide and call from codebehind.

edited May 9, 2014 at 5:56

answered May 9, 2014 at 5:47

SHEKHAR SHETE

6,08415 gold badges89 silver badges144 bronze badges

2 Comments

user3195396 Over a year ago

what does key means? Do I have to use the same 'key' for all the Scriptmanager?

SHEKHAR SHETE Over a year ago

use function as it is just change the function name from "ShowPhase1()' to yourfunction() name that set..! please check the edit!

Ted · Accepted Answer · 2014-05-09 05:31:46Z

0

Change your code to the following:

$(document).ready(function () { <% if (someservervalue == true) { %> $('#<%=phaseOne.ClientID%>').show(); <% } else { %> $('#<%=phaseOne.ClientID%>').hide(); <% } %> $('#<%=phaseTwo.ClientID%>').hide(); $('#<%=phaseThree.ClientID%>').hide(); });

Another way would be to use Page.RegisterClientScriptBlock. More info: http://msdn.microsoft.com/en-us/library/system.web.ui.page.registerclientscriptblock(v=vs.110).aspx

answered May 9, 2014 at 5:31

Ted

4,0671 gold badge23 silver badges35 bronze badges

Collectives™ on Stack Overflow

How do I call a jquery code from code behind?

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related