How to initialize the MDB checkbox.

web
mobile

Topic: How to initialize the MDB checkbox.

codewiseio pro asked a year ago

My checkboxes aren't displaying. It may have to do with how I am initializing the mdb script. I am applying the theme to a legacy website and do not have access to change the actual html structure. What I am doing is using jQuery to modify the html page and add the necessary classes. I then use getScript after all the dom changes have been made. I had the same issue with the select box and was able to call .material_select(); in order make it work, but no such luck with the checkboxes. The native checkboxes are hidden and there are no other dom elements added by bootstrap or mdb. I tried the bootstrap checkbox() function but that did not work either.
 /* add the material javascript after making DOM changes */
$.getScript('js/mdb.js', function() {
jQuery('.mdb-select').material_select();
jQuery('input[type="checkbox"]').checkbox();
});

Bartłomiej Malanowski staff pro premium commented a year ago

Could you please share more of your code with us?

cad-development pro premium answered 1 months ago

Any update on this?

I require to initialise checkboxes after an Ajax load.


lemons pro premium commented 4 weeks ago

you don't need to initalize them, just take care to keep the structure of the docs, including the label.


Grzegorz Bujański staff commented 4 weeks ago

Hi @cad-development. As @lemons say, you don't need initialize checkbox.

Best, Grzegorz


cad-development pro premium commented 4 weeks ago

Thanks for the reply Lemons and Grzegorz Bujański . In my case I do believe I need to initialise them as they do not render/show.

I am bringing back checkboxes as part of an Ajax call. I think this may be similar to drop-downs which do have a way of initialising.


lemons pro premium commented 4 weeks ago

I forked my AJAX search snippet to show the dynamically added checkboxes. If you get the checkboxes itself from AJAX, double-check the MDB structure of the checkboxes. the LABEL is REQUIRED, even if empty:https://mdbootstrap.com/snippets/jquery/lhock/1656204


Grzegorz Bujański staff commented 4 weeks ago

I would only add value['title'] inside the label, not after $checkbox


lemons pro premium commented 4 weeks ago

I know :), I just wanted to show that the label is required, even when empty...


cad-development pro premium answered 4 weeks ago

Again thanks for the replies.

I am not trying to set anything up inside of a dropdown. I only mentioned this as the dropdown object has a way of initialising via $({selector}).material_select();

I am calling Ajax and bringing back html to place in a DIV, I do not want to be creating items via JS. The code for an example checkbox would be:

<div class="form-check">
<input type="checkbox" class="form-check-input image-send-now" id="imageSendNow"<?php echo ($productPrint->getLoadImageNow()) ? ' checked' : '';?>>
<label class="form-check-label" for="imageSendNow">I wish to upload an image now</label>

With this no checkbox is rendered, so I am assuming that an initialisation is requires similar to 'material_select'. Or an I missing something?


lemons pro premium commented 4 weeks ago

the closing div and the proper css include. As checkboxes don't need to be initialized I would check the complete div with your browsers dev tools. Also you could add an other checkbox somewhere else just to check if this error is caused by something else...


Grzegorz Bujański staff commented 4 weeks ago

I checked your code here: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/1664536 And works fine. I only removed php code and added closing div. Do you have any errors in your browser dev tools?


cad-development pro premium commented 4 weeks ago

Thank you both. I did have closing DIV just bad copy pasting. I will look a little deeper and comment out some code to see where the error is coming about. Thanks to both of you for taking the time. It is appreciated.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No