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

demzl25 priority asked 2 years 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 2 years ago


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


demzl25 priority commented 2 years 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

  • ForumUser: Priority
  • 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