Light
Dark
System
Ask  Question

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.
M
MOUNIR FIDRAMAN 7 months ago
Metronic Laravel Bootstrap 4
14 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (14)

F
Faizal Author7 months ago
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
M
MOUNIR FIDRAMAN 7 months ago
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.
F
Faizal Author7 months ago
Could you please verify if there is any JS error in the console log?

Thanks
M
MOUNIR FIDRAMAN 7 months ago
Yes there is some error.
M
MOUNIR FIDRAMAN 7 months ago
https://ibb.co/vkWSSFn
F
Faizal Author7 months ago
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
M
MOUNIR FIDRAMAN 7 months ago
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
F
Faizal Author7 months ago
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
M
MOUNIR FIDRAMAN 7 months ago
I have tried dozens of files orders, and nothing seems to be working unfortunately.
F
Faizal Author7 months ago
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
M
MOUNIR FIDRAMAN 7 months ago
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
F
Faizal Author7 months ago
Hi Mounir,

1) Multiple imports file: plugins.bundle.js. Please remove the bottom one.

In file: /laravel/config/demo1/general.php

image

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

image

The error below would be gone:
searchObject.on is not a function



Thanks
M
MOUNIR FIDRAMAN 7 months ago
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.
F
Faizal Author6 months ago
Hi,

Really sorry that we missed the issue. Do you still have the issue recently?

Thanks
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle