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