Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Added new js plugin but its not working - Metronic Laravel v8


I added a new js plugin jquery ui as: npm require jquery-ui-dist

added resources\assets\core\plugins\plugins.js as:
"node_modules/jquery-ui-dist/jquery-ui.js",

added resources\assets\core\plugins\plugins.scss as:
@import "~jquery-ui-dist/jquery-ui.theme.min.css";

my custom script for a page: 

"use strict";

var showTracker = (function () {

 const element = document.getElementById("myModal");

 const modal = new bootstrap.Modal("#myModal");

 const dialog = document.getElementsByClassName("modal-dialog");

 return {

 init: function () {

 modal.show();

 $(".modal-backdrop").remove();



 $(dialog).draggable({

 handle: ".modal-header",

 });

 },

 };

})();



KTUtil.onDOMContentLoaded(function () {

 showTracker.init();

});


When I compile and use it on a blade, it shows error:

show-tracker.js?8b2b:18 Uncaught TypeError: $(...).draggable is not a function

 at Object.init (show-tracker.js?8b2b:18:23)

 at eval (show-tracker.js?8b2b:26:17)

 at Object.onDOMContentLoaded (scripts.bundle.js:6184:17)

 at eval (show-tracker.js?8b2b:25:8)

 at Object../resources/assets/extended/js/custom/tracker/show-tracker.js (show-tracker.js:19:1)

 at __webpack_require__ (show-tracker.js:53:42)

 at show-tracker.js:64:37

 at show-tracker.js:66:12


Can you suggest me a correct way to do this?


user
Prakash 4 years ago
Metronic Laravel Bootstrap 5
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Faizal Author 4 years ago

Could you please use this as a workaround? Place it at the top in your custom script which has draggable js code.


require("jquery-ui-dist/jquery-ui");


We will fix this in future updates.

Thanks


user
Prakash 4 years ago

thanks its working.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(