Calling a jquery function from code behind doesnt work

Raveen Mobile

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

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

JavaScript: Not calling javascript function from the code behind

From Dev

Calling a div class that's set by code behind function in jquery

From Dev

Calling JavaScript function from code behind after Response.End()

From Dev

Calling javascript function from C# code behind

From Dev

javascript function not calling from code behind when i'm calling another function within same click event

From Dev

jQuery .html() function doesnt work in IE 11

From Dev

Jquery onclick function in <a> tag doesnt work on the secondtime

From Dev

cmd/cntrl + a doesnt work on jquery limit function

From Dev

JQuery function doesnt work after an other does

From Dev

Calling Code Behind Function and passing arguments

From Dev

jQuery function not getting called from C# code behind with RegisterStartupScript

From Dev

phalcon forward() doesnt work from helper function

From Dev

jQuery take value from input doesnt work

From Dev

Calling SignalR Hub method from code behind

From Dev

Calling javascript from code behind not working as expected

From Dev

Is there a way to create a Yes/No popup in ASP.Net VB by calling a function from the code behind?

From Dev

Why doesnt this code work?

From Dev

Onclick function doesnt work

From Dev

Browserify doesnt work with function?

From Dev

Eval function doesnt work

From Dev

Java function doesnt work

From Dev

nested function doesnt work

From Dev

why doesnt this jquery work?

From Dev

JQuery hover doesnt work

From Dev

jquery accordion doesnt work

From Dev

jQuery toggle doesnt work

From Dev

i use function in my code and somehow it doesnt work anymore

From Dev

There is an override function that doesnt wanna work in my class code

From Dev

Html link onclick, jquery function, redirectToAction IIS server doesnt work?

Related Related

  1. 1

    JavaScript: Not calling javascript function from the code behind

  2. 2

    Calling a div class that's set by code behind function in jquery

  3. 3

    Calling JavaScript function from code behind after Response.End()

  4. 4

    Calling javascript function from C# code behind

  5. 5

    javascript function not calling from code behind when i'm calling another function within same click event

  6. 6

    jQuery .html() function doesnt work in IE 11

  7. 7

    Jquery onclick function in <a> tag doesnt work on the secondtime

  8. 8

    cmd/cntrl + a doesnt work on jquery limit function

  9. 9

    JQuery function doesnt work after an other does

  10. 10

    Calling Code Behind Function and passing arguments

  11. 11

    jQuery function not getting called from C# code behind with RegisterStartupScript

  12. 12

    phalcon forward() doesnt work from helper function

  13. 13

    jQuery take value from input doesnt work

  14. 14

    Calling SignalR Hub method from code behind

  15. 15

    Calling javascript from code behind not working as expected

  16. 16

    Is there a way to create a Yes/No popup in ASP.Net VB by calling a function from the code behind?

  17. 17

    Why doesnt this code work?

  18. 18

    Onclick function doesnt work

  19. 19

    Browserify doesnt work with function?

  20. 20

    Eval function doesnt work

  21. 21

    Java function doesnt work

  22. 22

    nested function doesnt work

  23. 23

    why doesnt this jquery work?

  24. 24

    JQuery hover doesnt work

  25. 25

    jquery accordion doesnt work

  26. 26

    jQuery toggle doesnt work

  27. 27

    i use function in my code and somehow it doesnt work anymore

  28. 28

    There is an override function that doesnt wanna work in my class code

  29. 29

    Html link onclick, jquery function, redirectToAction IIS server doesnt work?

HotTag

Archive