Solved

JAVASCRIPT Switchers PLUGIN fail postback

Posted on 2016-09-16
8
31 Views
Last Modified: 2016-11-02
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
Comment
Question by:Corrado Lembo
  • 4
  • 3
8 Comments
 
LVL 42

Assisted Solution

by:zephyr_hex (Megan)
zephyr_hex (Megan) earned 500 total points
ID: 41801929
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
 

Author Comment

by:Corrado Lembo
ID: 41802313
Not work. When I click on checkbox postback not firing
0
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41802323
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Assisted Solution

by:Corrado Lembo
Corrado Lembo earned 0 total points
ID: 41802326
I've solved with this

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

Author Comment

by:Corrado Lembo
ID: 41802328
what a difference with

$('#<%=chkModality.ClientID%>').change( function() {
or
$('#<%=chkModality.ClientID%>').on("change", function() {
0
 
LVL 42

Accepted Solution

by:
zephyr_hex (Megan) earned 500 total points
ID: 41802334
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
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41818598
If your question has been answered, you can close it and select the comment(s) that provided your solution.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now