How to initialize the MDB checkbox.

Topic: How to initialize the MDB checkbox.

codewiseio pro asked 5 years 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 commented 5 years ago

Could you please share more of your code with us?

Add comment

cad-development free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 4 years 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 years 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 free commented 4 years 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.

Add comment

cad-development free answered 4 years ago

0 0 Best answer

Any update on this?

I require to initialise checkboxes after an Ajax load.

lemons free commented 4 years 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 years ago

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

Best, Grzegorz

cad-development free commented 4 years 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 free commented 4 years 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 years ago

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

lemons free commented 4 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.10
Device: PC
Browser: Chrome
OS: Ubuntu
Provided sample code: No
Provided link: No

codewiseio

Pro User 5Support score
1Questions 0Answers 1Snippets