Question

This is my first time using jquery, and I don’t know why this simple section won’t work. I have two buttons, one which hides a div and another which shows it, but the buttons keep doing a postback even though I have set the UseSubmitBehaviour to false.

<script type="text/javascript">
$(document).ready(function () {
    $("#Social_WorkerButton").click((function () {
        $("#SponsorDetails").hide("slow");
    });
    $("#SponsorButton").click(function () {
        $("#SponsorDetails").show("slow");
    });
});

this is the script block inside the head, the reference to the jquery file is in the masterpage.

EDIT: I get a warning that the second semicolon should be a , or ) but I don’t see why, the code is straight from w3 schools

Answer 1

You can use the event argument’s preventDefault() to stop the default behavior from happening (in this case, the button submitting).

<script type="text/javascript">
$(document).ready(function () {
    $("#Social_WorkerButton").click((function (e) {
        e.preventDefault();
        $("#SponsorDetails").hide("slow");
    });
    $("#SponsorButton").click(function (e) {
        e.preventDefault();
        $("#SponsorDetails").show("slow");
    });
});