Implementing HTML features on Laravel Demo1
Hi
i'm having some trouble implementing HTML features on my laravel blade views.
Example :
Datetimepicker :
<input class="form-control form-control-solid ps-12" placeholder="Select a date" name="due_date" />and in config\global\pages.php :
"" => array(
"title" => "Dashboard",
"description" => "",
"view" => "index",
"layout" => array(
"page-title" => array(
"description" => true,
"breadcrumb" => false,
),
),
"assets" => array(
"custom" => array(
"js" => array(
"js/widgets.bundle.js",
"js/custom/widgets.js",
"plugins/custom/datatables/datatables.bundle.js",
"js/custom/utilities/modals/new-target.js",
"plugins/global/plugins.bundle.js",
"js/scripts.bundle.js",
),
),
"vendors" => array("fullcalendar", "amcharts", "amcharts-maps"),
),
),The input is there but it doesn't load the datimetime picker.
Replies (14)
Hi,
Really sorry that we missed the issue. Do you still have the issue recently?
Thanks
Hi Mounir,
1) Multiple imports file: plugins.bundle.js. Please remove the bottom one.
In file: /laravel/config/demo1/general.php
<img src="https://i.ibb.co/fGQcMR2/image.png" alt="image" border="0">
2) This scripts.bundle.js was imported twice. The file has already been imported globally. No need for import at the page level.
In file: /laravel/config/global/pages.php
<img src="https://i.ibb.co/SrfHWVs/image.png" alt="image" border="0">
The error below would be gone:
searchObject.on is not a functionThanks
Thank You Faizal for the follow up, indeed the error is gone but the date picker and the tag input is not working as it should, the date picker doesn't show when clicking on the input, same on the tag input.
Could you please send to us your Laravel app (without vendor folder) in a zip? We will help to check it from our side.
Thanks
Here is the project folders and files :
https://drive.google.com/file/d/1qOZpAxTrF3NlunvgbywZlvbhzeY-H66K/view?usp=sharing
I don't know why it's voluminous, but I barely changed anything in the original folder that I downloaded from KeenThemes. I mean I changed just the main dashboard page to minimise what i'm viewing.
Thank You for your help
Hi Mounir,
This is another issue. Could you please try to move the order of js files? Move the plugins.bundle.js file to the top and follow by scripts.bundle.js'.
"plugins/global/plugins.bundle.js",
"js/scripts.bundle.js",
"js/widgets.bundle.js",
"js/custom/widgets.js",
"plugins/custom/datatables/datatables.bundle.js",
"js/custom/utilities/modals/new-target.js",Thanks
I have tried dozens of files orders, and nothing seems to be working unfortunately.
Hi Mounir,
The error shows $ is not defined, which means the jquery or some js file is not properly included.
From the js files list, please try to move plugins/global/plugins.bundle.js at the top. jQuery plugin is in this file.
Thanks
I guess we are missing something !! after mading that change it didn't work, also the tag input doesn't work.
please watch this video to understand more :
https://drive.google.com/file/d/11WCn1g-qIpeWfVk6hWy5NFXBySd-5Crh/view?usp=sharing
Could you please verify if there is any JS error in the console log?
Thanks
Yes there is some error.
<img src=""https://i.ibb.co/hVNSS6z/Screenshot-2022-10-13-112731.png" />
https://ibb.co/vkWSSFn
Hi,
The example date picker needs to be initialized. The sample JS files can be imported from this file.js/custom/utilities/modals/new-target.js
var dueDate = $(form.querySelector("[name="due_date"]"));
dueDate.flatpickr({
enableTime: true,
dateFormat: "d, M Y, H:i",
});Thanks
thank you for your reply.
I did initialize it in the same blade file :
<script>
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
var dueDate = $(form.querySelector("[name="due_date"]"));
dueDate.flatpickr({
enableTime: true,
dateFormat: "d, M Y, H:i",
});
</script>but nothing is changed. still a regular input.
