Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Init KTApp.createInstances() on ajax modal select2 search not working


i initiated KTApp.createInstances() on an modal ajax call. The modal has select 2, however, the search textbox for the select2 search is not working. i cannot input any search term.

Please help.


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


Hi,

We have this known issue in the recent Laravel. Please try to remove this file;
/resources/assets/core/js/layout/app.js

Recompile the asset using npm run dev.

We will fix it in the next update soon.

Thanks



Could not find the folder /resources/assets/core/js/layout/app.js in my application.

Im using the HTML version



Hi,

You can try to init select2 after the modal is shown. The select2 cannot initialize when the select input is hiding.


$("#myModal").on("shown.bs.modal", function (e) {
KTApp.createInstances();
})


https://getbootstrap.com/docs/4.0/components/modal/#events

Thanks



Thank you very much for your response.
in my case, the select2 partially works. it works perfectly well for multi select when i initiate


KTApp.init()
KTApp.createInstances()

or

KTComponents.init(); on the ajax modal call on the dynamic modal content.

The only challenge is the single select search box which is static and doesnt allow any search term.

so the select2 actually initializes just that the search input doesnt work.



When i used $('#myModal').on('shown.bs.modal', function (e) {
KTApp.createInstances();
})

it gives the following error

show:9326 Uncaught TypeError: KTApp.createInstances is not a function
at HTMLDivElement.<anonymous> (show:9326:19)
at HTMLDivElement.dispatch (plugins.bundle.js?v=8.1.5:5430:27)
at elemData.handle (plugins.bundle.js?v=8.1.5:5234:28)
at Object.trigger (plugins.bundle.js?v=8.1.5:8719:12)
at HTMLDivElement.<anonymous> (plugins.bundle.js?v=8.1.5:8797:17)
at Function.each (plugins.bundle.js?v=8.1.5:385:19)
at jQuery.fn.init.each (plugins.bundle.js?v=8.1.5:207:17)
at jQuery.fn.init.trigger (plugins.bundle.js?v=8.1.5:8796:15)
at Object.trigger (plugins.bundle.js?v=8.1.5:12886:5590)
at plugins.bundle.js?v=8.1.5:12886:32662



Which build tool are you using? Is it gulp or webpack?


KTApp.createInstances is not a function


You got this error. KTApp should exist in the script.bundle.js file. Have you imported before calling for KTApp.createInstances?

Thanks



Am still not able to get this to work on ajax modals even with the current update 8.1.6.
I used gulp to compile.

Please help



Do you put this JS in the ajax modal content? Could you please try to add it in the parent content, not inside the modal ajax?


$("#myModal").on("shown.bs.modal", function (e) {
KTApp.createInstances();
})


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