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

Dynamic separate KT ajax init


Hi keenthemes,

Bear with me witness for a sec, (sorry for hammerring on you).
------

Let's imagine I have a lot's of html pages, but with 2 categories : "Flat" (Refresh the page) and "Ajax".


for the "Flat", we know that just use the Metronic inline js scripts that commes with the bundles,


but for "Ajax" it depends on what functionnality you want to init in that specific ajax file or call.

for example an Ajax html want to initMetronic menu, we just put a js line inside that Ajax like : KTMenu.createInstances();,

Or init a Metronic KT image, we just put a js inline : KTImageInput.createInstances();

NOW :
------

Imagine we create an inline js file named kt_app_init.js :



KTApp.createInstances();
KTScroll.createInstances();
KTDrawer.createInstances();
KTMenu.createInstances();
KTImageInput.createInstances();



What's the DRAWBACKS of calling the inline js above for every Ajax html file in the whole project like :

<script src="assets/js/custom/kt_app_init.js"></script>



Knowing that we have at least 1300 ajax html files and every ajax files will find what it needs inside this inline, wether KTImageinput, or KTMenu ... and ignore the rest.

----
It's a way of centralize all the calls in one file.

Please advise.

Thank you.


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


EDIT :

What's the DRAWBACKS of calling the inline js above for every Ajax html file in the whole project like :

<script src="assets/js/custom/kt_app_init.js"></script>

NB : forum BUG Here, there's alway no way to edit the answer once you post the question, you got one shot. that's why I reply rather than Edit my question. hope you're agonna fix it.
here's the error : <a>https://ibb.co/5xPKMrR</a>



Hi,

We will check and improve it further. In the meantime please refer to the formatting guidelines below the form:



Regards.



You don't understand !

It's not about the formatting ...

Even if you post a simple text, and you get back after and edit it, It won't go through...


thank you



Hi,

You can use the global ajax get request event handler to initialize the above core components in one place. You can refer to https://github.com/axios/axios the ajax library that Metronic includes.

For Metronic 8.1.x you can use below


// Boostrap & 3rd-party components initialization(flat)
KTApp.init();

// Boostrap & 3rd-party components dynamic creation(ajax)
KTApp.createInstances();


Regards.



Hi Sean,

You quite didn't answer my question in its form... LoL, we do not want to use any thirdparty lib, like axios or ....,

---------
What's the drawbacks importing the inline js files created above in the post to re-init Ajax for every time we needed to, knowing that we may not need all the KTApp ???
---------

Take a moment and please read the post above and tell me.

Sorry for Not being so precise ...


Thank you



Hi,

Sorry if I missed kt_app_init.js. I think that there is no drawback actually to this approach. The init methods are called but if there are no pending components they just do nothing and just exit. You may use KTApp's new shortcode methods to handle global components on each ajax response.

Regards.



Great, thank you Sean.

That's the answer that I was waiting for.

Thank you



Glad to help you out happy. All the best to your projects my friend!


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