Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

JAVASCRIPT Switchers PLUGIN fail postback

Posted on 2016-09-16
8
Medium Priority
?
77 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 44

Assisted Solution

by:zephyr_hex (Megan)
zephyr_hex (Megan) earned 2000 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 44

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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 

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 44

Accepted Solution

by:
zephyr_hex (Megan) earned 2000 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 44

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

618 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