Checkbox state is not changed with bootstrap switch after an

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Checkbox state is not changed with bootstrap switch after an ajax request

abtsolutions pro asked 7 years ago

Looks like checkbox is not changed after an ajax request. This code works well on page load but after an ajax request it does not work any more:     $('.switch input[type="checkbox"]').on('change', function() {         if($(this).is(':checked')) {             console.log('check');         } else {             console.log('not check');         }     });

abtsolutions pro commented 7 years ago

I understand it is needed an initialization method for the .switch checkbox to init the field after ajax but there is nothing about it in docs.

Jakub Strebeyko staff answered 7 years ago

Hi there, Thanks for reaching out! Could you be a little more specific and describe how the above mentioned code should be working in your opinion, except logging out the string? What I mainly mean is some wider context code, so the issue could be recreated and debugged properly. Also please note, that a MDB switch and a checkbox are two slightly different entities (switch being a more specific kind of a wider range of checkboxes). With Best Regards, Kuba

abtsolutions pro answered 7 years ago

Hi Kuba. Thank you for a prompt reply. The problem is not in checkboxes ... the problem is in switch. The situation is that we use ajax for every call on our website and we use editable fields. Here is a HTML example of the code of a field in forms: <div class="switch"> <label> No<input type="checkbox" data-editable-id="SS5aba18a18c57a27e731af483" name="Label_SS" value="Y" id="SS5aba18a18c57a27e731af4830" checked="checked"> <span class="lever"></span>Yes</label> </div> When a switch is clicked the state of the input checkbox is changed and we catch the event and update in the database. It works well when the whole page is loaded .. so all elements are initialized by mdb or bootstrap. But if we load the form with an ajax request like this: $.ajax({ type: method,url: url, data: dataserialized,
         complete: function (xhr,textStatus) {
target.html(xhr.responseText);
             }
            }
        });
The checkobox state is not changed to checked/unchecked when a switch is clicked any more. So probably we need to initialize the switch to let the events work after ajax request (like we do for some other mdb elements). But I did not find any methods to initialize a switch from javascript. For example we do this for paralax after each ajax request:
        $t.find('[data-parallax]').each(function () {
        if(!parsed($(this))) {
           ///console.log('paralax init');
            $(this).parallax();
        }
        });
So each time the content is loaded with a html from an ajax request we initialize all elements.
There should be a similar method for switch.
Best regards,
Aurel
           

Jakub Strebeyko staff answered 7 years ago

Hi Aurel, Thanks for this detailed description! Let me know whether I have this correctly: as I understand it, the switch looks just like it is supposed to after the AJAX call, but the checkbox beneath is not changing its state despite sliding the switch? What is its state after re-render? Re-initialization is required whenever an internal state of JavaScript components is being changed from outside, but switch is pure CSS, meaning that not only it should not require initialization, but also should not get broken after an AJAX call, unless associated functions change something about its features (like being an checkbox-type input or its CSS classes). I personally have never heard about the issue, and more importantly I wasn't able to recreate it. Could you please provide a minimum showcase for the bug (perhaps a jsfiddle / codepen example)? That way it could get reported and fixed. With Best Regards, Kuba

abtsolutions pro answered 7 years ago

Hi Kuba, Thank you for the explanation. We have found the problem. Yes indeed switch is a pure CSS so it works always (the view was ok after ajax). But the problem was in the way we catch the event with jquery after ajax. This works well: $('body').on('change','.switch input[type="checkbox"]', function() {
        console.log('switch change');
    });
Also because the checkbox input is set as invisible in css ajax form serialization did not get the value. With the correct catch of the event the problem is solved. Best regards, Aurel

Jakub Strebeyko staff answered 7 years ago

Hi there Aurel,

As I understand, to fix it you had to listen to the 'change' event on body and only then filter it out in terms of descendant selector (’.switch input[type=”checkbox”]’). Hopefully, it will serve as a reference to anyone facing similar issue. Big thanks for taking time and clarifying it all!

With Best Regards,
Kuba

abtsolutions pro answered 7 years ago

Hi Kuba, Yes. There were no issues for switch because it is a pure CSS and it works well. But in case of ajax it is better to listen body for events instead of an element. So when a new element appears in DOM after an ajax request it is not needed to re-initialize listeners. There was one more specific moment for ajax form submission.  Invisible fields are not serialized with jquery serialize. MDB switch CSS sets the checkbox input field invisible so the value is not sent on form submission. We had to add a hidden field and use ".switch input[type=”checkbox”]" listener to change the value of the hidden field when checkbox is changed. This way the checkbox input is used only to show the bootstrap switcher and catch the event. This is the case only for ajax form submission. Best regards, Aurel

Jakub Strebeyko staff commented 7 years ago

Hey Aurel, It is definitely something to consider when it comes to form submission. Many thanks for taking time and explaining the issue in such a detailed way! Best Regards, Kuba
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
abtsolutions
Pro User
26Support score
6Questions 4Answers
0Snippets likes 0Snippets