Having trouble setting up malihu-custom-scrollbar-plugin.
I installed it as follows:
jspm install mCustomScrollbar=npm:malihu-custom-scrollbar-plugin
I import it to the relevant viewmodel as follows:
import mCustomScrollbar from 'mCustomScrollbar';
...
$('.article').mCustomScrollbar();
I get the following error:
$(...).mCustomScrollbar is not a function
looking at the dev-tools:network, the library has loaded ??
You have two problems:
1) you've spelled mCustomScrollbar wrong (missing the r in Scroll)
2) you need to required the css in the template otherwise the plugin fails to load
(your css location may differ)
<link rel="stylesheet" href="../jspm_packages/npm/malihu-custom-scrollbar-plugin#3.0.9/jquery.mCustomScrollbar.css" />
<template>
...
</template>
check the script file loaded or not...
$.getScript( "/jquery.mCustomScrollbar.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
DataBind();
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
Related
I installed the package tightenco/ziggy, set it up as in the documentation, everything works.
But the template displays the entire list of addresses as in the screenshot
Please tell me where I went wrong
<head>
#routes
#vite('resources/js/app.js')
#inertiaHead
</head>
<body>
#inertia
</body>
<Link :href="route('listing.show', listing.id)">
<listingAddress :listing="listing" />
</Link>
app.js
import { ZiggyVue } from 'ziggy'
import { Ziggy } from './ziggy';
vite.config
.use(ZiggyVue, Ziggy)
resolve: {
alias: {
ziggy: path.resolve('/vendor/tightenco/ziggy/dist/vue.es.js')
},
},
As stated on the documentation you can exclude certain routes or include the route you want to expose to the client .
Ziggy supports filtering the routes it makes available to your JavaScript, which is great if you have certain routes that you don't want to be included and visible in the source of the response sent back to clients. Filtering routes is optional—by default, Ziggy includes all your application's named routes.
To set up basic route filtering, create a config file in your Laravel
app at config/ziggy.php and define either an only or except setting as
an array of route name patterns.
// config/ziggy.php
return [
'except' => ['_debugbar.*', '_ignition.*',],
];
I have a nextjs project. I want to implement oneTrust CMP solution for my domain. I am required to place oneTrust scripts before any other scripts In the _app.js file and I want to check if the sub-domain is 'X' then I do not want to load the scripts. I have implemented this using useEffect.I have initially set load = true and in useEffect for domain 'X' I have set load = false. In the code I load the sciprts if the load is set to true. But for domain 'X' my scripts are stil loading.
My Code:
function MyApp({ Component, pageProps }) {
const [load, setLoad] = useState(true);
useEffect(() => {
if (window != undefined) {
// console.log(window.location);
const paths = window.location.host;
if (paths.includes("X")) {
setLoad(false);
}
}
}, []);
return (
<Fragment>
<Head>
</Head>
{load ? (
<>
<Script
strategy="beforeInteractive"
src="src"
type="text/javascript"
charSet="UTF-8"
data-domain-script="some-id"
></Script>
<Script
id="test"
strategy="beforeInteractive"
type="text/javascript"
dangerouslySetInnerHTML={{
__html: `
js code
`,
}}
/>
</>
) : (
""
)}
Some other scripts....
<Component {...pageProps} />
</Fragment>
);
}
What am I doing wrong here? and will my oneTrust script execute before other scripts in this manner?
For those with the same question, I solved the problem. You can add getInitialProps to your _app.js file and add your host detection code there.
rest of the _app.js code
MyApp.getInitalProps = async(context)=>{
const url = context.ctx.req.headers.host;
// pass the url data to your component
return { data: url };
}
export default MyApp
I'm lost in a struggle for making CKEditor 5 work in Laravel 8 Jetstream.
I have installed it using npm (I don't want CDN for production mode later on).
How I installed it
I executed the following npm command on the root folder of my Laravel project:
npm install #ckeditor/ckeditor5-build-classic --save-dev
Then, inside the app.js file I added:
/** CKEditor 5*/
import ClassicEditor from '#ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
Then, inside the view where I require it, looks like the following:
{{--Content--}}
<div>
<x-jet-label value="Content" />
<textarea wire:model="post.content" rows="6" class="form-control w-full" id="editor"></textarea>
</div>
...
#push('js')
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( 'CKEditor error: '+error );
} );
</script>
#endpush
I ran npm run dev:
npm run dev
after that I see the following message:
webpack compiled successfully
It does not work
However, when I visit the page and look at the inspect element (since I see that the CKEditor is not loaded), I get the following log error:
Uncaught ReferenceError: ClassicEditor is not defined
What else I've tried
The strange thing is that, if I then call the CDN like so:
#push('js')
<script src="https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( 'CKEditor error: '+error );
} );
</script>
#endpush
Now I get a different error of calling it twice!:
Uncaught CKEditorError: ckeditor-duplicated-modules
What works
If I just use the CDN, it does work. However, from the NPM method, it doesn't. If I only leave the NPM, it says it's undefined. If I add the CDN, it says it's duplicated!
The only thing that works is to use the CDN only by removing the
/** CKEditor 5*/
import ClassicEditor from '#ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
part, from the app.js file and npm run dev again.
My question
What am I missing? How do I make it work with the NPM installation?
Try this in bootsrap.js...
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic/build/ckeditor');
Then run...
npm run dev
Try using document.addEventListener('livewire:load', function instead of #push
https://laravel-livewire.com/docs/2.x/inline-scripts
I am trying to make an API call and the following errors with Ajax not being a function:
import $ from 'jquery';
const apiCall = function () {
var url = 'https://images.nasa.gov/#/search-results';
var request = {
q: 'sun',
media_type: 'image'
};
var result = $.ajax({
url: url,
dataType: 'json',
data: request,
type: 'GET'
})
.done(function() {
alert(JSON.stringify(result));
})
.fail(function() {
alert('failed');
})
}
module.exports = apiCall;
I am importing the above in another module and calling it on a button click in the react's render() function like:
import apiCall from './../api/apiCall';
class Gallery extends React.Component {
render () {
return (
<section id="gallery" className="g-site-container gallery">
<div className="grid grid--full">
<div className="gallery__intro">
<Button extraClass=""
type="button"
handleButtonClick={apiCall} />
</div>
</div>
</section>
)
}
}
module.exports = Gallery;
Any thoughts with what am I doing wrong?
In my experience, this type of issue is most often because your transpilation is not working as you might expect - or you are transpiling your code while also using jquery (or any other lib) by including it with a CDN link. If this is the case, here's some info that might help you sort it out:
First, check that your transpiler is actually pulling jquery in. Just having it on the page won't necessarily allow this code to work - because when your transpiler operates on:
import $ from 'jquery'
It's going to expect to first load the jquery package from node_modules and then create an internal name for it, such as $_1 which will be used inside your bundle. If you intend to include jquery on the page via CDN, rather than bundling it in this fashion, you need to mark it as external in your webpack or rollup config. If using webpack, it would look something like:
{
entry: '/path/to/your/application.js',
externals: {
'jquery': '$',
}
}
This essentially tells webpack, "when I import from 'jquery', don't look in node_modules - instead, just assume jquery already exists on the page as window.$. Now, webpack won't attempt to include and bundle all of the jquery lib - and instead of creating $_1 it will actually honor what $ is.
If you do intend to load and bundle jquery as part of your build (not recommended, due to the incredible size-bloat it will entail) - I suggest ensuring that it's installed in node_modules. You can do this with:
npm install -S jquery
or, if you're using yarn:
yarn add jquery
Now, your import statement should load the lib correctly when you re-transpile.
First, ensure you're not using jquery-lite as it excludes ajax features.
Btw, it's not recommended to use both exports.module together with ES6's import / export. Try to just use one of them. Not pretty sure, but it may cause some module troubles that hard to understand.
Additionally, based on $.ajax official document, you have to process data in the callback
$.ajax({
url: url,
dataType: 'json',
data: request,
type: 'GET'
})
.done(function(data) {
// Process data provided from callback function
alert(data);
})
.fail(function() {
alert('failed');
})
Personally I do prefer isomorphic-fetch to make ajax call in React application.
I'm writing a sencha touch app using sencha architect. Because my app do lot of ajax request, most of it need to send 'token' in request header for authentication. So I think of create child class base on Ext.Ajax which always has 'token' in request header. Then I can use this child class without care of the header.
MyApp.override.Ajax.request({ ... })
I try define this in app/override/Ajax.js
Ext.define('Myapp.override.Ajax', {
override: 'Ext.Ajax',
headers: {
'token': 'test'
}
});
I also set this as 'requires' in Application. But get error when try to call
Myapp.override.Ajax.request({ ... })
Seem Myapp can not locate .override package (MyApp.override is undifined)
How to let MyApp know override package or what is the correct/best way to do this.
A quick example is very appreciated. Thank you very much.
Update info:
override file location: app\override\Ajax.js
html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="resources/css/sencha-touch.css">
<script src="app/override/Ajax.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js file
Ext.Loader.setConfig({
});
Ext.application({
requires: [
'MyApp.override.Ajax'
],
views: [
'ContactDetailView'
],
name: 'MyApp'
...
App can start without error, but when call MyApp.override.Ajax.request : Cannot read property 'Ajax' of undefined , mean MyApp.override is undefined
Update
Here something news, it better but not working yet.
Ext.define('MyApp.Ajax', {
extend: 'Ext.data.Connection',
singleton: true,
request: function( options ) {
this.constructor(options, options.url);
console.log(options);
options.header = {'Token':'mytoken'};
this.callParent( options );
}
});
and error when try MyApp.Ajax.request() . I'm sure that options.url is exist in options by check the log
[ERROR][Ext.data.Connection#request] No URL specified
I add extend from constructor function
constructor : function (config, url)
{
config = config || {};
//config.url = 'google.com';
this.initConfig(config);
this.callParent(config);
},
Error just disappear when I remove comment from config.url = 'google.com'; but it comes that the config.url there is ajax request url but local file url ??? I see from chrome console and network ?
GET file:///C:/MyApp/assets/www/google.com?_dc=1370855149720
Please help. thanks.
Finally, this is work with me
Ext.define('MyApp.Ajax', {
extend: 'Ext.data.Connection',
singleton: true,
request: function( options ) {
options.headers = {
Token: 'mytoken',
};
this.callParent( [options] );
}
});
And this simple do what i want too, great.
Ext.Ajax.on('beforerequest', (function(conn, options, eOpts) {
options.headers = {
Token: 'mytoken',
};
}), this);
You don't seem to agree with yourself about the name of your override class:
Myapp.override.Ajax
Lunex.override.Ajax
Myapp.override.data.proxy.Ajax
Which one is it? Pay attention to this, the Loader won't go easy about it...
Anyway, you seem a bit confused about override and extend.
extend does create a new class from the parent class, with the modifications you've specified. Then you can use the class you defined, like you're trying to do.
override, on the other hand, applies the modification to the existing class. In this case, the class name is only used for the require statement, and by the loader. No actual class is created. So, in your example, the namespace MyApp.override is not defined, hence the error. Nevertheless, whenever you use Ext.Ajax, your custom header should be sent. Provided you're manager to load your file, that is ;p
Now, your case is a bit special because Ext.Ajax is a singleton instance of Ext.data.Connection. See its code, there's not much in there. And while overriding a singleton can make sense, extending from it would be disturbing.
So, what you were probably trying to do is that:
Ext.define('Myapp.Ajax', {
extend: 'Ext.data.Connection',
headers: {
'token': 'test'
}
});
So that you can do:
Myapp.Ajax.request({ ... });
Whether the best choice here is to override or to extend is a tough question. I'm glad you didn't ask it!
Why not using the config 'defaultHeaders' in your extended class? In that way it's always added to your headers.
http://docs-origin.sencha.com/touch/2.4.0/apidocs/#!/api/Ext.data.Connection-cfg-defaultHeaders
From the source of Ext.data.Connection
setupHeaders: function(xhr, options, data, params) {
var me = this,
headers = Ext.apply({}, options.headers || {}, me.getDefaultHeaders() || {}),
contentType = me.getDefaultPostHeader(),
jsonData = options.jsonData,
xmlData = options.xmlData,
key,
header;