CODEWITHSUNDEEP
c#javascriptjqueryasp.net
user3414457
user3414457

Reputation:

call the jquery function in c# using javascript

Java script code: 

  <script type="text/javascript">
             $(document).ready(function () {
                 $("#visualization").css('display', 'none');

             });
         </script>
           <script type="text/javascript">
               $('#info a').click(function drawVisualization() {
                   $("#visualization").css('display', 'block');
               });
         </script>

On load i am hidden the div and i want show the div by clicking the button

asp.net code:

<asp:Button ID="Button1" runat="server" Text="Button" 
  onclick='blue' />

c# CODE:

 protected void blue(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
            string.Format("<script type=\"text/javascript\">drawVisualization();</script>"));
        }

i am fairly new to the coding;can anyone help me to solve this issue. After invisibling i am not able to show the visualization(div)

Upvotes: 0

Views: 145

Answers (6)

Swapy
Swapy

Reputation: 55

Instead of Creating a Button OnClick event you can write a simple jquery or javascript to get the desired output

There are various ways to solve the above problem.

1)You can write OnClientClick attribute of Button control in asp.net and pass the value as the javascript function name that you have created in the above code as drawVisualization() and another important thing is that you will have to remove the runat="server" attribute because it causes the postback(means your page again reloads which will cause the div to hide)

2)You can create a jquery button click event for eg:

First of all just create a simple function

           function drawVisualization() {
               $("#visualization").css('display', 'block');
           });

and then the button click event

 $('#button1').on( "click", function() {
     drawVisualization(); //call the function that you have created to show the desired output

 });

Upvotes: 0

MikeHe
MikeHe

Reputation: 68

I would just do it all on the client. Something like this would work.

$("#Button1").on("click", function(e){
      $("#visualization").show();
  });

If there's no reason to do a postback, you can do e.preventDefault(); after the call to .show();

Upvotes: 0

David
David

Reputation: 218798

There's a much easier way to do this, which doesn't involve an entirely unnecessary post-back to the server. Something like this:

$('#<%= Button1.ClientID %>').click(function () {
    $("#visualization").show();
});

This would assign a JavaScript click handler to the client-side rendered output of Button1. Of course, Button1 still causes a post-back, but since it doesn't need to do anything server-side it doesn't even need to be a server-side control. Make it something like this:

<input type="button" id="button1" value="Button" />

Then adjust the jQuery selector to use the client-side id:

$('#button1').click(function () {
    $("#visualization").show();
});

If all you're doing is showing/hiding page elements, and you're already using JavaScript to do it, server-side code is entirely unnecessary.

Upvotes: 1

Javier Abrego
Javier Abrego

Reputation: 462

$(document).ready(function () {

    $("#visualization").css('display', 'none');
    $('#Button1').click(function(){
          $("#visualization").css('display', 'block');  
     });

});

Upvotes: 0

Deepu--Java
Deepu--Java

Reputation: 3820

<asp:Button ID="Button1" runat="server" Text="Button" 
  onclick='display()' />

<script>
  function display()
  {
   $("#visualization").show();
  }
</script>

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

you can use it like

Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","$('#visualization').css('display', 'block');",true);

Upvotes: 0

Related Questions