Why doesnt my jquery execute?

Question

Hello! Im trying to show and hide a div element with the jquery toggle method. I have a linkbutton that onclick calls the javascript on the page. When clicking the linkbutton the page does a postback even when I declared the javascript function to return false. Someone got an idea how to solve this?

function toggleDiv(){
        $('#app').toggle("fast");
    }
</script>

<form runat="Server">

    <asp:LinkButton ID="LinkButton1" runat="Server" OnClientClick="toggleDiv(); return false;" Text="Show/Hide"></asp:LinkButton>

    <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
          <p>jQuery Example </p> 
    </div>

</form>   

Answer 1

I would do it like so:

$('#LinkButton1').click(function(e) {
  $('#app').toggle('fast');
  e.preventDefault();
});

Then just remove the OnClientClick event. Should be a little easier and work for you.

Answer 2

rewrite your js to the following and it should work just fine

<script type="text/javascript">
    $('#<%= LinkButton1.ClientID %>').click(function(e) {
        $('#app').toggle("fast");
        e.preventDefault();
    });
</script>

<form runat="Server">
    <asp:LinkButton ID="LinkButton1" runat="Server" Text="Show/Hide"></asp:LinkButton>
    <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
        <p>jQuery Example </p> 
    </div>
</form>   

Answer 3

did you add the ready document at the begining of you your code? Since you re using Asp server control, controls are named by .net and maybe the linkbutton1 was not redered as linkbutton1 id. I would write the code like this:

$(function(){
       $('a[id$=LinkButton1]').click(function() { 
        $('#app').toggle("fast"); 
        return false; 
    }); 

});

Answer 4

The link is probably causing a page postback, which is resetting the the DIV to visible. The simplest way to fix this is to return false from your function.

<script type="text/javascript">
$('#<%= LinkButton1.ClientID %>').click(function(e) {
    $('#app').toggle("fast");
    return false;
});
</script>

Answer 5

My code now looks like this, still doesnt work :/

<script src="scripts/jquery-1.4.js" type="text/javascript">

      $(document).ready(function() {

        $('#<%= LinkButton1.ClientID %>').click(function(e) {
        $('#app').toggle("fast");
        return false;
        });

      });
    </script>

    <form runat="Server">

        <asp:LinkButton ID="LinkButton1" runat="Server" Text="Show/Hide"></asp:LinkButton>

        <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
              <p>jQuery Example </p> 
        </div>

    </form>   

Answer 6

If a view the html code it looks like this. Notice "javascript:__doPostBack

<a id="btn" href="javascript:__doPostBack('btn','')">Show/Hide</a>

 <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
 <p>jQuery Example </p>
 </div> 

Answer 7

I believe the problem is that you put your Javascript statements in the same script tag as the tag that includes jquery.

I changed your code to this and it solved the problem for me:

<script src="scripts/jquery-1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('#<%= LinkButton1.ClientID %>').click(function(e) {
                $('#app').toggle("fast");
                return false;
            });
        });
    </script>