Bootstrap 4 JS file and editor.bootstrap4.min.js conflict
Bootstrap 4 JS file and editor.bootstrap4.min.js conflict
davidjmorin
Posts: 101Questions: 31Answers: 0
I use bootstrap for my website. I have the cdn bootstrap https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js This seems to conflict with the editor bootstrap4 js file that is included with the DL. On pages with an editor I have to click the nav menu twice to get it to activate. This should not be the behavior. Any plans on fixing this issue?
/*!
Bootstrap integration for DataTables' Editor
©2015 SpryMedia Ltd - datatables.net/license
*/
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(a,b,c){a instanceof String&&(a=String(a));for(var e=a.length,d=0;d<e;d++){var h=a[d];if(b.call(c,h,d,a))return{i:d,v:h}}return{i:-1,v:void 0}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;
$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};$jscomp.getGlobal=function(a){a=["object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global,a];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");};$jscomp.global=$jscomp.getGlobal(this);
$jscomp.polyfill=function(a,b,c,e){if(b){c=$jscomp.global;a=a.split(".");for(e=0;e<a.length-1;e++){var d=a[e];d in c||(c[d]={});c=c[d]}a=a[a.length-1];e=c[a];b=b(e);b!=e&&null!=b&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:b})}};$jscomp.polyfill("Array.prototype.find",function(a){return a?a:function(a,c){return $jscomp.findInternal(this,a,c).v}},"es6","es3");
(function(a){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs4","datatables.net-editor"],function(b){return a(b,window,document)}):"object"===typeof exports?module.exports=function(b,c){b||(b=window);c&&c.fn.dataTable||(c=require("datatables.net-bs4")(b,c).$);c.fn.dataTable.Editor||require("datatables.net-editor")(b,c);return a(c,b,b.document)}:a(jQuery,window,document)})(function(a,b,c,e){var d=a.fn.dataTable;d.Editor.defaults.display="bootstrap";b=d.Editor.defaults.i18n;
b.create.title='<h5 class="modal-title">'+b.create.title+"</h5>";b.edit.title='<h5 class="modal-title">'+b.edit.title+"</h5>";b.remove.title='<h5 class="modal-title">'+b.remove.title+"</h5>";if(b=d.TableTools)b.BUTTONS.editor_create.formButtons[0].className="btn btn-primary",b.BUTTONS.editor_edit.formButtons[0].className="btn btn-primary",b.BUTTONS.editor_remove.formButtons[0].className="btn btn-danger";a.extend(!0,a.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header"},body:{wrapper:"DTE_Body modal-body"},
footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"card multi-restore"}});
a.extend(!0,d.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});d.Editor.display.bootstrap=a.extend(!0,{},d.Editor.models.displayController,{init:function(b){var g={content:a('<div class="modal fade DTED"><div class="modal-dialog modal-dialog-scrollable"></div></div>'),close:a('<button class="close">×</div>').attr("title",b.i18n.close).on("click",function(){b.close("icon")}),shown:!1,fullyShow:!1},
f=!1;a(c).on("mousedown","div.modal",function(b){f=a(b.target).hasClass("modal")&&g.shown?!0:!1});a(c).on("click","div.modal",function(c){a(c.target).hasClass("modal")&&f&&b.background()});b.on("displayOrder.dtebs",function(c,d,f,g){a.each(b.s.fields,function(b,c){a("input:not([type=checkbox]):not([type=radio]), select, textarea",c.node()).addClass("form-control")})});b._bootstrapDisplay=g;return d.Editor.display.bootstrap},open:function(b,c,d){var f=b._bootstrapDisplay;a(c).addClass("modal-content");
if(f._shown){var e=f.content.find("div.modal-dialog");e.children().detach();e.append(c);d&&d()}else f.shown=!0,f.fullyDisplayed=!1,e=f.content.find("div.modal-dialog"),e.children().detach(),e.append(c),a("div.modal-header",c).append(f.close),a(f.content).one("shown.bs.modal",function(){b.s.setFocus&&b.s.setFocus.focus();f.fullyDisplayed=!0;d&&d()}).one("hidden",function(){f.shown=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1})},close:function(b,c){var d=b._bootstrapDisplay;if(d.shown)if(d.fullyDisplayed)a(d.content).one("hidden.bs.modal",
function(){a(this).detach()}).modal("hide"),d.shown=!1,d.fullyDisplayed=!1,c&&c();else a(d.content).one("shown.bs.modal",function(){d.close(b,c)});else c&&c()},node:function(a){return a._bootstrapDisplay.content[0]}});return d.Editor});
This discussion has been closed.
Replies
This is an Editor example with Bootstrap 4.1.3 and it appears to work correctly:
https://editor.datatables.net/examples/styling/bootstrap4.html
What is the "nav menu" you are clicking?
Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
@kthorngren Unfortunately my site is an Intranet. Not able to access offsite.
Here is my header file though.
and my nav
CSS is fiddly to debug without being able to see the issue occurring. As Kevin said, we would need to see this happening to be able to debug it.
Colin
Ok. Can you build a test case that replicates the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
It doesn't need your specific data. This will give you a start with a basic editor.
http://live.datatables.net/guwafemu/1/edit
Kevin
We can close this thread. I moved the JS file to the bottom and that seems to have worked.