How to make onclick to fire when javascript returns false

Question

The onclick doesn't work when the javascript returns false. I need javascript to return false in order to animate the button. If I return true then the onClick works but the animation doesn't work. I have tried doing __doPostBack and UseSubmitBehaviour but nothing seems to work. Any help would be really appreciated on how to fix this.

Code for asp button:

<asp:LinkButton id="btn_salaries" onClientClick="return fncsave();" OnClick="btn_clicked" UseSubmitBehavior="false" runat="server" type="button" class="list-group-item" Text="getCharitySalaries"/>

Javascript code:

function fncsave(){
        $(document).ready(function(){
            $("#list").click(function(){
                $("#list_of_btns").animate({left: '-290px'});
            });
        });
        return false;
    }

Update:

I'm doing the animation in ajax but I don't know if I'm doing this correctly because it does not perform the animation.

This is my code below:

function fncsave(){
    alert("dsfdsf");
    $(document).ready(function(){
        $(document).ajaxStart(function(){
            $("#list_of_btns").animate({left: '-290px'});
        }
    }
    return true;
}

try using MVC.NET and get better coupling of client/server behaviors. By contrast, in ASPX client and server are practically two different worlds. — Mike_Matthews_II
– Mike_Matthews_II, Commented Jun 30, 2015 at 18:38

Francisco Goldenstein · Accepted Answer · 2015-06-30 18:36:25Z

2

You should not check for document ready event on the click event handler. Also, when someone clicks on the link you are calling fncsave function but inside that function you are subscribing to another event (click) on the tag with id list. If I understand correctly, you should do this:

function fncsave(){
        $("#list_of_btns").animate({left: '-290px'});
        return false;
    }

Just as a comment, "return false" means that it's not gonna continue with the normal flow of the event handling, which is submit the form.

If you return true, the form is submitted. That means the form data is sent to the server and the C# code is executed. Then, the page if fully reloaded (from scratch). In that case, the animation makes no sense and you'll need AJAX to perform an animation while the C# code is running. See this tutorial about AJAX (Tutorial about AJAX).

edited Jun 30, 2015 at 18:36

answered Jun 30, 2015 at 17:42

Francisco Goldenstein

13.9k7 gold badges63 silver badges75 bronze badges

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

5 Comments

beginnerCoder Over a year ago

That makes sense, but the OnClick still doesn't work. I don't how to make this work.

Francisco Goldenstein Over a year ago

OnClick is a event handler at server side and it's only executed when the JS function returns true (do post back). If you need to execute JS code and C# code, then return true instead of false. Take into account that the page will be submitted.

beginnerCoder Over a year ago

So do I write __doPostBack() in fncsave() or do I write this in OnClientClick()?

Francisco Goldenstein Over a year ago

That's because when you do a postback (return true in JS code), the form is sent to the server, the C# code is executed and a new page is returned to the client (reloading the page from scratch). You don't want that, you want to show the animation while the C# action is running, right? in that case you need to use AJAX. That means, that your JS code will call a C# method async.

beginnerCoder Over a year ago

I updated my code in the question and I'm using ajax but the animation no longer works.

Satinder singh · Accepted Answer · 2015-06-30 18:12:39Z

0

Try like this

 function fncsave(){
        $("#list").click(function(){
             $("#list_of_btns").animate({left: '-290px'},900,function(){
                    return false;
               });
          });
        }

answered Jun 30, 2015 at 18:12

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

3 Comments

beginnerCoder Over a year ago

Unfortunately since its still returning false it doesn't fire the OnClick event.

Satinder singh Over a year ago

So you can change it to true

beginnerCoder Over a year ago

If I change it to true then the animation doesn't work

hungndv · Accepted Answer · 2015-06-30 18:28:06Z

I have a 'animated' variable with default is false. If button is clicked, check if animated is false, 'preventDefault()' cancel the submit, play animation, 'setTimeOut()' will the function after 3000ms, assign animated to true, and trigger 'click' on the button. This time, animated is true and it post data to server.

<asp:Button ID="btn_salaries" OnClick="Button_Click" runat="server" type="button" Text="getCharitySalaries" />
<br />
<script type="text/javascript">
    $(document).ready(function (e) {

        var animated = false;
        $('#' + '<% = btn_salaries.ClientID %>').click(function (ev) {
            if (!animated) {
                ev.preventDefault();
                $(this).animate({ left: '-290px' });
                setTimeout(function () {
                    animated = true;
                    $('#' + '<% = btn_salaries.ClientID %>').trigger('click');
                }, 3000);
            }
        });
    });
</script>

Hope this help.

Skye MacMaster · Accepted Answer · 2015-06-30 18:35:00Z

0

This should do what you want.

function fncsave(){
    $("#list_of_btns").animate({left: '-290px'},900,function(){
        // Do __doPostBack here
    });
    return false;
}

It'll delay doing the post back until after the animation is done. An alternative would be to use update panels to avoid the flicker from the post back that'll follow the animation.

answered Jun 30, 2015 at 18:35

Skye MacMaster

9341 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to make onclick to fire when javascript returns false

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related