Is it possible to disable the LoadingBar of Quasasr completely? It's loading with every AJAX request, but I have own solution for it.
Source:
https://quasar.dev/quasar-plugins/loading-bar
WARNING
When using the UMD version of Quasar, all components, directives and
plugins are installed by default. This includes LoadingBar. Should you
wish to disable it, specify loadingBar: { skipHijack: true } (which
turns off listening to Ajax traffic).
Link - https://quasar.dev/quasar-plugins/loading-bar#Installation
Set skipHijack to true for disabling QAjaxBar.
Related
I have a WebApp which fetches data from a database.
I have +server.js files from which my frontend fetches the data.
When I run npm run build:
adapter-auto:
No suitable adapter found.
adapter-static:
#sveltejs/adapter-static: all routes must be fully prerenderable, but found the following routes that are dynamic:
- src\routes
You have the following options:
- set the `fallback` option — see https://github.com/sveltejs/kit/tree/master/packages/adapter-static#spa-mode for more info.
- add `export const prerender = true` to your root `+layout.js/.ts` or `+layout.server.js/.ts` file. This will try to prerender all pages.
- add `export const prerender = true` to any `+server.js/ts` files that are not fetched by page `load` functions.
- pass `strict: false` to `adapter-static` to ignore this error. Only do this if you are sure you don't need the routes in question in your final app, as they will be unavailable. See https://github.com/sveltejs/kit/tree/master/packages/adapter-static#strict for more info.
If this doesn't help, you may need to use a different adapter. #sveltejs/adapter-static can only be used for sites that don't need a server for dynamic rendering, and can run on just a static file server.
See https://kit.svelte.dev/docs/page-options#prerender for more details
I experienced the same problem. What worked for me is adding export const prerender = true; to my +layout.server.ts file. In your case, just add it to your +server.js file at the top and run the build command again.
You can learn more about prerendering in SvelteKit docs
I'm experimenting with adding Turbo to a Rails 6.1 app.
It seems to be loading (see "What I've tried"), but when clicking around the clicks does not seem to be intercepted. I'm still getting full page reloads.
Can anyone help me spot what is missing here?
What I've tried
Added an event handler with console.log() output that shows that the turbo:load is indeed getting triggered
Ensured Turbo.session.drive = true in application.js
Even tried adding data-turbo="true" to a <main> tag, but that seems to have made no difference. Perhaps not too surprising, given pt. 2.
Firefox and Chrome
Setup
// app/javascript/application.js
import { Turbo } from "#hotwired/turbo-rails"
Turbo.session.drive = true
# config/importmap.rb
pin 'application', preload: true
pin '#hotwired/turbo-rails', to: 'turbo.js'
// Debugging statement
document.addEventListener('turbo:load', function() {
console.log('turbo:load');
})
So I found out that the mere inclusion of the Google Analytics 4 script tag in <head> caused Turbo not to work:
<script async src="https://www.googletagmanager.com/gtag/js?id=<OUR ID>"/>
The reason? GA4's automatic outbound link click tracking, which we have enabled. There's a very recent Github issue about this. As mentioned in a comment:
"... seems like they call preventDefault on link-click events, even if
it's not an outbound click. Turbo then decides it's not a significant
event so allows the navigation to go ahead as normal"
I disabled this feature in GA4, and was good to go.
Is there any way to disable the default quasar.css which comes with a Quasar app?
It's almost 12000 lines long and I don't plan on using any of it. I can't find anything which mentions how you could do this, so I'm assuming it can't be done.
The solution I've got is for quasar v2, but I am pretty sure it should work with v1 too.
The end result is straighforward:
// quasar.config.js
build: {
chainWebpack (chain) {
chain.resolve.alias.set('quasar/dist/quasar.css', false)
chain.resolve.alias.set('quasar/dist/quasar.prod.css', false)
chain.module.rule('sass').exclude.add(path.resolve(__dirname, '../../node_modules/quasar/dist/quasar.sass'))
chain.module.rule('scss').exclude.add(path.resolve(__dirname, '../../node_modules/quasar/dist/quasar.scss'))
}
}
The chain.resolve.alias.set is taking care of import 'quasar/dist/quasar.css' in the .quasar/client-entry.js file. For a further explanation see https://webpack.js.org/configuration/resolve/#resolvealias
Setting resolve.alias to false will tell webpack to ignore a module.
The chain.module.rule part disables processing of sass/scss. Note that ../../node_modules path will need amending if you don't use workspaces (https://docs.npmjs.com/cli/v7/using-npm/workspaces or https://classic.yarnpkg.com/lang/en/docs/workspaces/).
Note: don't use IgnorePlugin as the imported module will be removed during the build (see https://github.com/webpack/webpack/issues/2858)
Another note: I only tested this in SPA mode, but will update the answer if I come across any problems while testing other modes.
//quasar.conf.js Quasar plugins
plugins: [],
removeDefaultCss: true
Is there a way to disable the media items edit button? Either in the Camaleon configuration or by using a hook... In my case, the user can only upload images and use them, but cannot edit them!
Thanks!
in the current version you can do it by adding a css style using the hook "admin_before_load".
app/apps/themes/my_theme/config/config.json
"hooks": {
"admin_before_load": ["my_function_admin_before_load"],
....
}
app/apps/themes/my_theme/main_helper.rb
def my_function_admin_before_load
append_asset_content('<style>#cama_media_gallery .media_item .edit_item{display: none;}</style>')
end
In current development version I added two hooks "file_manager_edit_file" and "file_manager_del_file"
Regards!
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function