I have a Laravel project where I would like to produce a Bootstrap Toast informing the user about success/error.
When the page loads, there can be a Toast added to the top of the page, if the toast is present this javascript will check it and trigger the Toast:
alerts.js
const feedbackToast = document.getElementById('feedbackToast');
if(feedbackToast) {
const toast = new bootstrap.Toast(feedbackToast);
toast.show()
}
Here is the app.js that makes the import:
app.js
import * as bootstrap from 'bootstrap';
import './alerts.js';
Why am i getting a Uncaught ReferenceError: bootstrap is not defined error?
If I refresh the page and try bootstrap in the console, it is there, but it is not available at the time the alerts.js code is executed...?
I'm using Vite to compile the JS code, and bootstrap is imported before the above code is imported
I tried triggering a Bootstrap Toast and expected it to show up, but it didn't..
Related
I want to include beatiful flash messages to mey Laravel + Vue app, so I found a npm package on GitHub and installed this in my app (npm install)
I'm beginner in VueJs and I'm facing a problem: I just can't use the package in my vue components since it throw errors when I try to include this
What I use and what I get:
it's my app.js code
window.Vue = require('vue');
/*including the package*/
import FlashMessage from '#smartweb/vue-flash-message';
Vue.use(FlashMessage);
/*including the package*/
Vue.component('settings-form',require('./components/SettingsFormComponent.vue').default);
Vue.component('profile-nav',require('./components/ProfileNavComponent.vue').default);
const app = new Vue({
el: '#app',
});
What error I get using the code:
"TypeError: Cannot read property 'flashMessage' of undefined at app.js:1863"
I run this method (flashMessage) when I want to output a message:
Also I tried to use this code in my app.js to include the packange:
Vue.component('FlashMessage', require('#smartweb/vue-flash-message').default);
but it doesn't work too, it throws this error:
"Failed to mount component: template or render function not defined ..."
I'm trying to use my component that way (in ProfileNavComponent.vue):
<FlashMessage></FlashMessage>
Could you please tell me what the problem can be in?
thanks guys for any help)
I really appreciate this!
Im an author of this package. If you will have some issues with it, please leave the issue on github: https://github.com/smwbtech/vue-flash-message/issues
About your problem, I suppose that it is function context issue. Try to use arrow function as callback for .then
axios.post('/api/post/', body)
.then( res => {
this.flashMessage(/*your message*/);
this.data = '';/*other actions with your component data*/
})
.catch(e);
I usually use vue packages adding them from the name of the package, try:
import FlashMessage from 'vue-flash-message';
And when you want to use the component, try to use FlashMessage.show().
That's how I uncluded the package into my project
in app.js I added that code:
import FlashMessage from '#smartweb/vue-flash-message';
Vue.use(FlashMessage, {tag: 'flash-message', strategy: 'multiple'});
And then in any component I wanted to use flashMessages I used code like this:
this.flashMessage.success({
title: 'New Friend!',
message: data.user_created_by.full_name + ' started chatting with you!',
time: 5000,
blockClass: 'image-uploaded-flash',
});
Thanks a lot guys all who wanted to help me!!!
Nativescript Angular is well known for its code sharing properties. I am trying to simplify my design by using only 1 typescript file instead of splitting into the .ts and the .tns.ts file.
I was trying to import { Page } from "tns-core-modules/ui/page"; in the .ts. When running on Android, the code works flawlessly, but if I ng serve for the web app, it says Module not found: Error: Can't resolve 'tns-core-modules/ui/page'.
The reason why I wanted to import the page module is because of setting the action bar properties
constructor(private page: Page) {
if (isAndroid) {
console.log("This is Android");
this.page.actionBarHidden = true;
}
}
I was hoping to import the tns-core-modules/ui/page and some other tns-core-modules in the same file as the angular web app. Is it possible to do so? Or is it a must to split into the .ts and the .tns.ts files?
You have to go with platform specific ts files, one for web and one for tns, Page won't be valid while running inside a browser (ng serve).
If you prefer to reuse most of your code, try writting a common / base ts component, extend platform specific ts files from the common / base ts component, inject Page only within the tns specific ts file.
I am getting this error:
1) Error on page "http://localhost:8080/en/index.html":
import declarations may only appear at the top level of a module:
No stack trace available
whenever I run my test on Firefox. My tests are written in Typescript and are testing my page locally. The tests have no problems in Safari and Chrome, only in Firefox does it complain about import declarations. I have tried to recreate the error in non-local sites but have not been able to.
import { Selector } from "testcafe"
const full = "http://localhost:8080/en/index.html"
fixture`This is my tests`
.page`http://www.example.com/`;
test("URL", async t => {
const logo = Selector(".Logo")
await t
.navigateTo(full)
.expect(logo.textContent).contains("LogoName")
})
Hoping someone can shed some light on how to fix this!
Can you open the page in Firefox and check if you have error message in the JS console?
Testcafe will fail if there is any JS error.
You can use --skip-js-errors flag to ignore js errors (https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-e---skip-js-errors) or ... fix that error on your page.
After upgrading an angular nativescript project to the current versions of angular, typescript, tns, etc.. I'm getting a runtime error stating:
TypeError: Cannot set property 'actionBarHidden' of null at new
AppComponent...
The code that previously worked to hide the action bar looks like this:
import {Page} from "tns-core-modules/ui/page";
export class AppComponent implements OnInit, AfterViewInit {
constructor(page: Page) {
page.actionBarHidden = true;
}
}
Why is page null after the injection?
In the earlier versions the root was always a Frame, so by default there will be a Page.
But with the latest version, you are allowed to define flexible root components and any number of frames (page-router-outlet) within your app. So there won't be a default Frame / Page created within app component. Page can be injected only into the components those are loaded inside the page-router-outlet.
If TLDR the above link, the quick fix for me was to replace:
<router-outlet></router-outlet> with <page-router-outlet></page-router-outlet>
in app.component.html
Moving code to ngOnInit solved it for me
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>