Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 82
  • Last Modified:

JAVASCRIPT Switchers PLUGIN fail postback

I'm editing an ASP.NET template that includes the use of JQUERY Switchery plugin to show stylized checkbox.

My project also includes the use of MasterPage.

I need to run code when the state of the checkbox control change, and for this reason I have activated the control property AutoPostBack = TRUE

Unfortunately, because of the Switcher plugin changes the screen state of the control but does not trigger server event , I cannot execute code behind.

There is a way to fire event when checkbox change state using this plugin?

This is my checkbox in asps page:

<asp:CheckBox runat="server" ID="chkModality" data-plugin="switchery" data-color="#f05050" Style="float:left;padding-right:20px" AutoPostBack="true" />
This is javascript code in core.js file

Components.prototype.initSwitchery = function() {
        $('[data-plugin="switchery"]').each(function (idx, obj) {
           
            if ($(this).prop("tagName") == "SPAN" && $(this).find("input[type=checkbox]:first").prop("tagName") == "INPUT") {
                var chk = $(this).find("input[type=checkbox]");
                new Switchery(chk[0], $(this).data());
            } else {
                new Switchery($(this)[0], $(this).data());
            }
        });
    },
How I can do it?
0
Corrado Lembo
Asked:
Corrado Lembo
  • 4
  • 3
3 Solutions
 
zephyr_hex (Megan)DeveloperCommented:
You can bind a jQuery event to fire when the checkbox changes, and then use __doPostBack().

$('#<%=chkModality.ClientID%>').on("change", function() {
   __doPostBack($("","");
});

Open in new window


This will cause a postback to Page_Load().  You'll notice that __doPostBack accepts two parameters, which influence how postback is done.  You may want to read up on those, in case, for example, you want postback to flow to a control event in code behind.  This article has a nice summary of how the parameters operate.
0
 
Corrado LemboAuthor Commented:
Not work. When I click on checkbox postback not firing
0
 
zephyr_hex (Megan)DeveloperCommented:
Can you check the following:

1. Verify the function I posted above is wrapped inside document ready.
2. Add a console.log("hello world"); as the first line inside that function I gave above.  Run your page, click the checkbox and check F12 console to see if "hello world" appears.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Corrado LemboAuthor Commented:
I've solved with this

 $('#<%=chkModality.ClientID%>').change( function() {
              __doPostBack(("",""));
          });
0
 
Corrado LemboAuthor Commented:
what a difference with

$('#<%=chkModality.ClientID%>').change( function() {
or
$('#<%=chkModality.ClientID%>').on("change", function() {
0
 
zephyr_hex (Megan)DeveloperCommented:
The first approach requires that the element exists on the page when the page loads.  The second approach will also bind the event to the element if it's dynamically added to your page after the page loads.  If the element exists on your page when the page loads, you can use either syntax.  If the element is added dynamically, you must use the second syntax.

Either of those should be inside document ready:

$(document).ready(function () {
   // here ...

});

Open in new window


that ensures that the events don't attempt to bind until the page has loaded.
0
 
zephyr_hex (Megan)DeveloperCommented:
If your question has been answered, you can close it and select the comment(s) that provided your solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now