Solved

JAVASCRIPT Switchers PLUGIN fail postback

Posted on 2016-09-16
8
39 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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).

813 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

10 Experts available now in Live!

Get 1:1 Help Now