In my laravel 5.7 / jquery 3.4.1 I want to add color-picker from https://github.com/narsenico/a-color-picker and in my edit.blade.php file I add link to color-picker files and js file which is related to this editor after color-picker files :
@section('scripts')
<link rel="stylesheet" href="" type="text/css">
<script src=""></script>
<script src="?dt="></script>
<script src=""></script>
{!! JsValidator::formRequest('App\Http\Requests\ColorRequest', '#form_color_edit'); !!}
<script>
/*<![CDATA[*/
var backendColor = new backendColor('edit', // must be called before jQuery(document).ready(function ($) {
<?php echo $appParamsForJSArray ?>
);
jQuery(document).ready(function ($) {
backendColor.onBackendPageInit('edit')
});
/*]]>*/
</script>
@endsection
and in color.js I try to init color-picker as :
var this_backend_home_url
var this_id
var this_csrf_token
function backendColor(page, paramsArray) { // constructor of backend Color's editor - set all from referring page and from server
// alert( "backendColor paramsArray::"+var_dump(paramsArray) )
this_backend_home_url = paramsArray.backend_home_url;
this_backendLengthMenuArray = paramsArray.backendLengthMenuArray;
this_csrf_token = paramsArray.csrf_token;
if (page == "edit") {
this_id = paramsArray.id;
}
if (page == "list") {
this.ColorsLoad()
$(".dataTables_filter").css("display", "none")
$(".dataTables_info").css("display", "none")
}
} // function backendColor(Params) { constructor of backend Color's editor - set all from referring page and from server
backendColor.prototype.onBackendPageInit = function (page) { // all vars/objects init
backendInit()
const AColorPicker = require('a-color-picker'); // I GOT JS errors (Below) !
AColorPicker.from('color-picker');
} // backendColor.prototype.onBackendPageInit= function(page) {
...
But I got JS errors:
Uncaught SyntaxError: Cannot use import statement outside a module
DevTools failed to parse SourceMap: http://local-boxbooking2.com/css/bootstrap.min.css.map
jquery-3.3.1.min.js:2 jQuery.Deferred exception: require is not defined ReferenceError: require is not defined
at backendColor.onBackendPageInit (http://local-boxbooking2.com/js/Backend/color.js?dt=1583830130:24:26)
at HTMLDocument.<anonymous> (http://local-boxbooking2.com/admin/colors/3/edit:385:26)
at l (http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29375)
at c (http://local-boxbooking2.com/js/jquery-3.3.1.min.js:2:29677) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
c @ jquery-3.3.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
fire @ jquery-3.3.1.min.js:2
u @ jquery-3.3.1.min.js:2
fireWith @ jquery-3.3.1.min.js:2
ready @ jquery-3.3.1.min.js:2
_ @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2 Uncaught ReferenceError: require is not defined
at backendColor.onBackendPageInit (color.js?dt=1583830130:24)
at HTMLDocument.<anonymous> (edit:385)
at l (jquery-3.3.1.min.js:2)
at c (jquery-3.3.1.min.js:2)
Which is valid way to add color-picker to the project?
Thanks!
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire