How can I import Bootstrap-Table into a Laravel/Vue Project? - laravel

I'm trying to implement Bootstrap-Table (https://github.com/wenzhixin/bootstrap-table) inside my Laravel and Vue.js project, but something is wrong.
I tried all ways of importing I could think of (inside app.js, app.blade, bootstrap.js, even vite.config.js) and all of them failed.
What I've Tried:
Inside app.js
import 'bootstrap-table/dist/bootstrap-table.js'
import bootstrapTable from 'bootstrap-table/dist/bootstrap-table.js';
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'
app.component('BootstrapTable', BootstrapTable);
These normally lead to
Could not find a declaration file for module 'bootstrap-table/dist/bootstrap-table.js'.
The errors I'm getting are:
Uncaught TypeError: Cannot set properties of undefined (setting 'BootstrapTable')
at bootstrap-table.min.js:10:132646
at bootstrap-table.min.js:10:233
at bootstrap-table.min.js:10:245
bootstrap-table-vue.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
at bootstrap-table-vue.min.js:10:1806
at bootstrap-table-vue.min.js:10:1905
at bootstrap-table-vue.min.js:10:205
at bootstrap-table-vue.min.js:10:209
There are some scripts/links necessary to run, and I think I'm also confused about this and where it should go.
For example:
<script src="https://unpkg.com/bootstrap-table#1.21.0/dist/bootstrap-table.min.js"></script>
My objective:
I want to render the table inside a Vue.component, with some data I get from axios. So I figured I couldn't put the scripts inside the component itself. I need to make the table component (or a way to render it) global.
Please help me get this right

Related

CKEditor5 Vue(tify)2 Laravel - Cannot read property 'getAttribute' of null

I followed this
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v2.html#integrating-a-custom-build-from-the-online-builder
guide to install CKEditor5 with vue2, laravel and inertia, got the following error:
ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null
at IconView._updateXMLContent (iconview.js:100)
at IconView.render (iconview.js:76)
at IconView.on (observablemixin.js:254)
at IconView.fire (emittermixin.js:196)
at IconView.(anonymous function) [as render] (http://localhost:4000/_nuxt/vendors.pages/test.js:59093:16)
at ViewCollection.on (viewcollection.js:68)
at ViewCollection.fire (emittermixin.js:196)
at ViewCollection.add (collection.js:182)
at ButtonView.render (buttonview.js:168)
at ButtonView.on (observablemixin.js:254)
As far as I understand by the posts I saw on the internet, the issue is that svg images cannot be loaded, but the solutions I found did not work.
If you want to take a look I created a Public Repository with the project, maybe you can easly find the issue (find TODO::CKEDITOR5)

Angular2-meteor cant read property "meteorInstall"

I'm converting an old angular2 project over to use meteor to act as an admin panel style thing for a project that is based off the ionic2-meteor whatsapp tutorial.
So I'm building the website in the client folder inside api.
I'm pretty sure I've got things correct (based off the old socially tutorial) for the angular2 client.
I'm getting these as errors though.
modules.js:13538 Uncaught SyntaxError: Unexpected token export
es5-shim.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at es5-shim.js:17
at es5-shim.js:2789
promise.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at promise.js:17
at promise.js:582
ecmascript-runtime.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at ecmascript-runtime.js:17
at ecmascript-runtime.js:4630
babel-runtime.js:17 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at babel-runtime.js:17
at babel-runtime.js:160
random.js:18 Uncaught TypeError: Cannot read property 'meteorInstall' of undefined
at random.js:18
at random.js:368
I imagine that I have probably missed an import or something somewhere but can't work out where.
Any help would be awesome.
These are the packages I have installed.
meteor-base#1.0.4
mobile-experience#1.0.4
mongo#1.1.15
reactive-var#1.0.11
jquery#1.11.10
tracker#1.1.2
standard-minifier-css#1.3.3
standard-minifier-js#1.2.2
es5-shim#4.6.15
ecmascript#0.6.3
shell-server#0.2.2
angular2-compilers
barbatus:typescript
accounts-base#1.2.14
npm-bcrypt#0.9.2
accounts-password#1.3.4
reywood:publish-composite
http#1.2.11
alanning:roles
check#1.2.4
dispatch:mocha-phantomjs
tmeasday:publish-counts
hwillson:stub-collections
practicalmeteor:mocha
xolvio:cleaner
~Edit
///the error comes from #angular/http module, I'm going to try rolling it back to see if it helps.
/**
* \#experimental
*
*/
export var QueryEncoder = (function () {//<---- this is the line causing the error
function QueryEncoder() {
}
QueryEncoder.prototype.encodeKey = function (k) { return standardEncoding(k); };
QueryEncoder.prototype.encodeValue = function (v) { return standardEncoding(v); };
return QueryEncoder;
}());
rolling back and forward didn't help at all.
I had the same problem. For me it was due to recently installed ionic plugin. It has started working normal after removing that plugin. Please try removing your recently added plugin. I hope you have tried that by now.

Why can't Processing 2.0b8 find a class or type named "Set"?

I'm trying to walk through a Processing tutorial and hitting a wall. I can't even run the sample starter code --I get an error: Cannot find a class or type named "Set" and this line comes back highlighted:
Set<String> tags = le.getCustomElements().getTags();
Am I missing something already?
Some default imports has gone in 2.0. Try
import java.util.*
at the beginning of the code

Microsoft AJAX: Unable to get property 'x' of undefined or null reference

How do I troubleshoot the following error being thrown by a Microsoft AJAX JavaScript framework method? It is an automatically generated line of JavaScript from a custom User Control in a Web Forms App (Sitefinity 5 CMS)
Error Message:
Unable to get property 'FancyBlockDesigner' of undefined or null reference
Here is the JavaScript that is throwing the error:
Sys.Application.add_init(function() {
$create(SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner, null, null, {"Editor":"propertyEditor_ctl00_ctl00_ctl00_ctl00_ctl00_Editor","propertyEditor":"propertyEditor"}, $get("propertyEditor_ctl00_ctl00_ctl00"));
});
Rather than discuss the ascx and cs files that try to abstract this detail away from me, I want to know what this error means. If I understand the detail, the abstraction might make more sense.
"$create" function in ASP.NET Ajax creates an instance of JavaScript class. Microsoft had their own opinion on how to make JavaScript object orientated and as time had shown, their approach wasn't exactly perfect.
Anyhow, to try to explain what is happening, let me give a bit of an overview oh how it works. We start by a server side control which implements IScriptControl interface which mandates two members: GetScriptDescriptors and GetScriptReferences. The second one is pretty straightforward - it lets you register references to all JavaScript files that you control will require. The GetScriptDescriptors, on the other hand, let's you define all the instances of JavaScript classes you want to use as well as it lets you set their properties - initialize them, if you will.
What the autogenerated JavaScript code you've pasted says is basically that you have defined in GetScriptDescriptors that you will need an instance of type "SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner" where you want Editor property to be initialized. This code will go and look for a JavaScript constructor that looks like this:
function SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner(element) {
}
that most probably also has a prototype defined, something like:
SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner.prototype = {
}
Now, since the error you have posted states: "Unable to get property 'FancyBlockDesigner' of undefined or null reference", most probably one of the following is the problem:
You have not included the JavaScript file which contains the class (constructor + prototype) that I've talked about above
You have forgot to add the "FancyBlockDesigner" to the constructor (it seems that you do have other object, perhaps through MS Ajax namespaces - "SitefinityWebApp.Esd.TheLab"
You have not registerd the "SampleHtmlEditor" namespace. Make sure at the top of your JS file you have this: Type.registerNamespace("SitefinityWebApp.Esd.TheLab.SampleHtmlEditor");
So, short story long, the function with name "SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner" cannot be found.
Hope this helps,
Ivan

Cache won't work in Appcelerator

Titanium SDK version: 1.6.
iPhone SDK version: 4.2
I am trying out the cache snippet found on the Appcelerator forum but I get an error: [ERROR] Script Error = Can't find variable: utils at cache.js (line 9).
I put this one (http://pastie.org/1541768) in a file called cache.js and implemented the code from this one (http://pastie.org/pastes/1541787) in the calling script, but I get the error.
What is wrong? I copied the code exactly.
Your problems is whilst the first pastie defines utils.httpcache. The variable utils is not defined outside of this function closure (because it is not defined anywhere in global namespace). As below shows.
(function() {
utils.httpcache = {
};
})();
To make it all work in this instance add the following code to the top of your cache.js file.
var utils = {};
This declares the utils variable in global namespace. Then when the function closure is executed below it will add utils.httpcache to the utils object.
The problem is actually not specific to Appcelerator and is just a simple JavaScript bug. Checkout Douglas Crockfords book, JavaScript the Good Parts. Reading it will literally make you a more awesome JavaScript developer.
You can't use utils.httpcache.getFromCache(url) until you add this to your code:
var utils = {};
That's because how the author created his function, it's called JavaScript module pattern and it's generally used to structure the code.
I seem to lose this value "value.httpCacheExpire = expireTime;" when the code does the "Titanium.App.Properties.setString(key,JSON.stringify(value));" so when I get it back using the getString method, there's no longer the "value.httpCacheExpire.
Anyone else have this issue? Am I missing something to get this working?

Resources