[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 80
  • 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
Restore individual SQL databases with ease

Veeam Explorer for Microsoft SQL Server delivers an easy-to-use, wizard-driven interface for restoring your databases from a backup. No expert SQL background required. Web interface provides a complete view of all available SQL databases to simplify the recovery of lost database

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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