Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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?


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 (2)


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



thanks its working.


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