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.

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)

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.

Could you please verify if there is any JS error in the console log?

Thanks

Yes there is some error.

https://ibb.co/vkWSSFn

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

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.

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,

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

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.

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  :(