Modal cookie Gdpr consent js code snippet convert from Jque


Topic: Modal cookie Gdpr consent js code snippet convert from Jquery to vanilla js

demzl25 pro premium asked 1 months ago

Expected behavior

Hi, I need help with js code snippet Modal cookie Gdpr consent to convert it from Jquery to vanilla js so that I don't need to add complete jquery library to the project.

Actual behavior This converted vanilla js has some errors and is not working properly

Original Jquery code snippet:

$(document).ready(function(){if(document.cookie.indexOf("gdpr_mandatory=")==-1){$('#gdpr_basic').modal({backdrop:false});}});$('#gdpr_btn_full_agree').click(function(e){e.preventDefault();var date=new Date();date=new Date(date.getTime()+1000*60*60*24*365);document.cookie="gdpr_mandatory=1; expires="+date.toGMTString()+"; path=/";document.cookie="gdpr_functional=1; expires="+date.toGMTString()+"; path=/";document.cookie="gdpr_ga=1; expires="+date.toGMTString()+"; path=/";document.cookie="gdpr_fbp=1; expires="+date.toGMTString()+"; path=/";$('#gdpr_basic').modal('hide');});$('#gdpr_btn_adjust').click(function(e){e.preventDefault();$('#gdpr_basic').modal('hide');$('#gdpr_adjust').modal();});$('#gdpr_btn_save').click(function(e){e.preventDefault();$('#gdpr_adjust_form').submit();});$('#gdpr_adjust_form').on('submit',function(e){e.preventDefault();$(this).find('input[type="checkbox"]').each(function(e){var fieldName=$(this).attr('name');var fieldValue=$(this).is(':checked')?1:0;var date=new Date();date=new Date(date.getTime()+1000*60*60*24*365);document.cookie=fieldName+"="+fieldValue+"; expires="+date.toGMTString()+"; path=/;";})toastr["info"]("Saved");$('#gdpr_adjust').modal('hide');});

Converted code snippet into vanilla js:

document.querySelector(document).ready(function () { if (document.cookie.indexOf("gdpr_mandatory=") == -1) { document.querySelector('#gdpr_basic').modal({ backdrop: false }); } }); document.querySelector('#gdpr_btn_full_agree').click(function (e) { e.preventDefault(); var date = new Date(); date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365); document.cookie = "gdpr_mandatory=1; expires=" + date.toGMTString() + "; path=/"; document.cookie = "gdpr_functional=1; expires=" + date.toGMTString() + "; path=/"; document.cookie = "gdpr_ga=1; expires=" + date.toGMTString() + "; path=/"; document.cookie = "gdpr_fbp=1; expires=" + date.toGMTString() + "; path=/"; document.querySelector('#gdpr_basic').modal('hide'); }); document.querySelector('#gdpr_btn_adjust').click(function (e) { e.preventDefault(); document.querySelector('#gdpr_basic').modal('hide'); document.querySelector('#gdpr_adjust').modal(); }); document.querySelector('#gdpr_btn_save').click(function (e) { e.preventDefault(); document.querySelector('#gdpr_adjust_form').submit(); }); document.querySelector('#gdpr_adjust_form').addEventListener('submit', function (e) { e.preventDefault(); document.querySelector(this).querySelector('input[type="checkbox"]').each(function (e) { var fieldName = document.querySelector(this).attr('name'); var fieldValue = document.querySelector(this).is(':checked') ? 1 : 0; var date = new Date(); date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365); document.cookie = fieldName + "=" + fieldValue + "; expires=" + date.toGMTString() + "; path=/;"; }) toastr["info"]("Saved"); document.querySelector('#gdpr_adjust').modal('hide'); });

Resources (screenshots, code snippets etc.)

Here is the link to the code snippet with complete Gdpr cookie consent modal and all htlm, css and js files including converted vanilla js code with errors: https://mdbootstrap.com/snippets/standard/demzl25/3958434#js-tab-view

Thanks,

Damjan


Grzegorz Bujański staff answered 1 months ago

Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3965911#js-tab-view


demzl25 pro premium commented 1 months ago

Great Its working.

I thank you very much for this,

Damjan


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.0.0
  • Device: Pc
  • Browser: Chrome 97.0.4692.99
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes