Calling a jquery function from code behind doesnt work

Question

I have a jquery function called MyFunc() in a seperate .js file. I wanted to call this function in c# code behind button click event. (i.e. if data gets added successfully, call MyFunc() ). Originally this function looked like this

$(".next").click(function () {

where it will directly be called during when the asp: button is clicked.

<asp:button id="btnNext" runat="server" CssClass="next action-button" Text="Next" OnClientClick="return false"/>

So I changed the function to

function MyFunc(){}

and the button to

<asp:Button ID="btnNext" runat="server" Text="Next" CssClass="action-button" OnClick="btnNext_Click1"/>

and in code behind button click event

Page.ClientScript.RegisterClientScriptInclude(GetType(), "MyScript", "Easying.js");
Page.ClientScript.RegisterClientScriptInclude(GetType(), "MyScript", "Reg.js");
Page.ClientScript.RegisterStartupScript(GetType(), "MyScript", "MyFunc()", true);

it gives me no errors. But it doesnt work. below is the function.

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function() {

    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
        step: function (now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50) + "%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({ 'transform': 'scale(' + scale + ')' });
            next_fs.css({ 'left': left, 'opacity': opacity });
        },
        duration: 800,
        complete: function () {
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

also, as you can see, MyFunc() is used to change from one fieldset to another. my aspx page has 3 fieldsets. and a progress bar (1--2--3). The progress bar should move from one to the other. and the fieldset also shud change. the current situation is I see a the progress bar move from 1 to directly 3. and no change in the fieldset. this is where I took the code for it. As Ive mentioned above, it works perfectly when I call it directly frm the aspx page. http://codepen.io/atakan/pen/gqbIz

heres the MyFunc() !!

function MyFunc() {
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

if (animating) return false;
animating = true;

current_fs = $(this).parent();
next_fs = $(this).parent().next();

//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({ opacity: 0 }, {
    step: function (now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50) + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({ 'transform': 'scale(' + scale + ')' });
        next_fs.css({ 'left': left, 'opacity': opacity });
    },
    duration: 800,
    complete: function () {
        current_fs.hide();
        animating = false;
    },
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
});};

Answer 1

it won't work because of your code here

current_fs = $(this).parent();
next_fs = $(this).parent().next();

$(this) in MyFunc() isn't the button that's being clicked like when you use $(".next").click(function() { ... }, so your code isn't working as expected like when you use the click function using jQuery, for now you can overcome it by sending the class for the current and next item using the parameter in the MyFunc(), so you can write it like this

function MyFunc(curClass, nxtClass) {
    // your code ...

    current_fs = $(curClass);
    next_fs = $(nxtClass);

    // your code...
}

it's not tested yet, but you should be able to do it with this logic.

Answer 2

Your issue is that you are mixing up your variable scopes. You're function MyFunc() is trying to set current_fs and next_fs as such:

current_fs = $(this).parent();
next_fs = $(this).parent().next();

But the object which the 'this' keyword refers to will change from when it is used in the context of when the function is called from a click event, where it will refer to the button that has been clicked, versus when it is called from your code behind method via the Page.ClientScript.RegisterStartupScript() method, where it will refer to some other object which probably has no use to you.

You will have to therefore make the function correctly identify the current fieldset and next fieldset using a different method.

My suggestion however is to change your implementation (if possible) altogether so that the final submit button is the only postback action, as it is a simpler solution that will not only result in smoother user experience but also result in less traffic between the client and server.