CODEWITHSUNDEEP
jqueryasp.net-mvc
elias
elias

Reputation: 1

Why doesnt my jquery execute?

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>

Upvotes: 0

Views: 263

Answers (6)

wsanville
wsanville

Reputation: 37506

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>

Upvotes: 0

Frenchi In LA
Frenchi In LA

Reputation: 3169

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; 
    }); 

});

Upvotes: 0

elias
elias

Reputation: 1

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>

Upvotes: 0

SimonF
SimonF

Reputation: 2715

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>

Upvotes: 0

Flatlin3
Flatlin3

Reputation: 1659

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>

Upvotes: 2

Topher Fangio
Topher Fangio

Reputation: 20667

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.

Upvotes: 0

Related Questions