Uncaught TypeError: Cannot read property 'Constructor' of undefined

[weareselectuk]

We have our edit feature was working and it suddenly stopped and console is presenting this error

Uncaught TypeError: Cannot read property 'Constructor' of undefined
at editable.min.js?ver=1.0.0:6
at editable.min.js?ver=1.0.0:6
(anonymous) @ editable.min.js?ver=1.0.0:6
(anonymous) @ editable.min.js?ver=1.0.0:6

&

form_editable.js?ver=1.0.0:200 Uncaught TypeError: jQuery.mockjax is not a function
at HTMLDocument. (form_editable.js?ver=1.0.0:200)
at j (jquery.min.js?ver=1.0.0:2)
at Object.fireWith [as resolveWith] (jquery.min.js?ver=1.0.0:2)
at Function.ready (jquery.min.js?ver=1.0.0:2)
at HTMLDocument.I (jquery.min.js?ver=1.0.0:2)
(anonymous) @ form_editable.js?ver=1.0.0:200
j @ jquery.min.js?ver=1.0.0:2
fireWith @ jquery.min.js?ver=1.0.0:2
ready @ jquery.min.js?ver=1.0.0:2
I @ jquery.min.js?ver=1.0.0:2

[CWSites]

Also having this issue

[4lex-gs]

+1

[gardezii]

+1

[poehlmann]

+1

[CWSites]

Instead of +1 please use emoji on the original issue (my bad for doing that the first time around)

[karta0807913]

please include bootstrap.js and try that again

[CarsonSlovoka]

I solved it with below

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

👆 http://vitalets.github.io/x-editable/docs.html

I am a user of bootstrap-table. If you want to use x-editable, the following script will work for me.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js" integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw==" crossorigin="anonymous"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<!-- bootstrap-table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" integrity="sha512-5RNDl2gYvm6wpoVAU4J2+cMGZQeE2o4/AksK/bi355p/C31aRibC93EYxXczXq3ja2PJj60uifzcocu2Ca2FBg==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js" integrity="sha512-Wm00XTqNHcGqQgiDlZVpK4QIhO2MmMJfzNJfh8wwbBC9BR0FtdJwPqDhEYy8jCfKEhWWZe/LDB6FwY7YE9QhMg==" crossorigin="anonymous"></script>

<!--bootstrap-table-lanuage-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table-locale-all.min.js" integrity="sha512-1PCRWIvrSQaZjCRWaa0GHWKr1jQA8u79VnIvkAme6BKeoNWe5N89peawTXdVp+kukb8rzNsEY89ocMJqVivdSA==" crossorigin="anonymous"></script>
<!--bootstrap-table-export-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.js" integrity="sha512-cAMZL39BuY4jWHUkLWRS+TlHzd/riowdz6RNNVI6CdKRQw1p1rDn8n34lu6pricfL0i8YXeWQIDF5Xa/HBVLRg==" crossorigin="anonymous"></script>

<!-- export of PNG (screenshots) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es6-promise.auto.min.js" integrity="sha256-Xxrdry6fWSKu1j2ALyuK/gHFQ+2Bp76ZrR6f3QXI47Y=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js" integrity="sha256-Ax1aqtvxWBY0xWND+tPZVva/VQZy9t1Ce17ZJO+NTRc=" crossorigin="anonymous"></script>

<!-- If you want to export, then you must import this. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js" integrity="sha256-Dsris8trQzzQXIM6PgMzSugaNyUacxaR9o2VrJalh6Y=" crossorigin="anonymous"></script>

<!-- extensions: editable -->
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/extensions/editable/bootstrap-table-editable.min.js" integrity="sha512-lC/MsRxNXUDpJMcfCt1/Q+BqWyO7eL56T6QIxmzwe/ALbmsl3GQFleCUc8asR9Aj9Ik9xPPO3RwaXitf7VFeMw==" crossorigin="anonymous"></script>

The version of the library is very important. You may not blindly pursue a new version. There will be many incompatibility issues...

I use an iframe in the main area to do this. The form in the header here can use the old version of the script, and the latest version can be used when leaving the iframe.

[JoshMayberry]

This is how to edit the bootstrap-editable.js file to make it work with Bootstrap v5.
I'm sure the maintainers of x-editable could come up with a more elegant solution to address the incompatability- by this is my armature crack at making as few changes as possible- I just need it to work without using an iFrame.
Hopefully, this helps them by pointing out possible spots to consider their own changes.

Fix Loading Error

One major incompatibility issue is that Bootstrap v5 waits until the DOM content is loaded to add functions to $.fn (using the function defineJQueryPlugin).
This means that when bootsrap-editable.js tries to use $.fn.popover- it does not exist yet, because the DOM content has not loaded yet.

So, we just need to delay bootstrap-editable.js from running until the DOM content is loaded as well.
The simplest way I could think of to do this is to wrap the contents of bootstrap-editable.js in the following code:

// This function was taken directly from *bootstrap.js*
const onDOMContentLoaded = callback => {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', callback);
    } else {
        callback();
    }
};

onDOMContentLoaded(() => {
    // Original file contents of *bootstrap-editable.js* go here
});

Fix Poppovers

Now there is no loading error. But, another issue comes up. Bootstrap 5 changed how their Popovers work- so a lot of places need to account for that.

Here are the places the change needed to be applied:

Popup.prototype.initContainer

initContainer: function(){
    this.is_bs5 = bootstrap && bootstrap.Popover && bootstrap.Popover.VERSION && bootstrap.Popover.VERSION.startsWith("5");
    if (this.is_bs5) {
        this.innerCss = ".popover-body";
    }
    ... // Rest of original function here
},

Popup.prototype.container

container: function() {
    if (this.is_bs5) {
        return bootstrap.Popover.getInstance(this.$element.get(0));
    }
    ... // Rest of original function here
},

Popup.prototype.tip

tip: function() {
    var container = this.container();
    return (!container ? null : (container.tip ? $(container.tip) : container.$tip))
},

jQuery.event.special.destroyed.remove

(I think the popover destroys itself now)

jQuery.event.special.destroyed = {
    remove: function(o) {
        if (!this.is_bs5 && o.handler) {
            o.handler();
        }
    }
};

[susarla12345]

@JoshMayberry what does that three dots in show function indicate, should the show function be empty ?? And i am getting other errors as well in bootstrap 5, are these the only changes. Please help, or can you just share the bootstrap-editable.js file that worked for you

[JoshMayberry]

@susarla12345
I meant those three dots to mean "Code that was already here".

Here are my edited files- but they have lots of other edits in it too, so I'm not sure how helpful it will be.
bs-table-edits.zip