Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Sticky div doesn't work after postback


Hi!
I'm using metronic v8 theme in my asp.net project (not mvc).
Generally js compenents stop working after postback on asp.net but i solve this calling them again after postback and they works. but on sticky divs doesn't work. I think I couldn't call them right way.

For example select2 dropdowns stop working after postback. and i call them like this and they works all time;


ScriptManager.RegisterStartupScript(this, GetType(), "x", "<script type = "text/javascript">$("#DrpPaymentTypes").select2();</script>", false);


or flatpickr


ScriptManager.RegisterStartupScript(this, GetType(), "x", "<script type = "text/javascript">$("#TxtInstallmentDate").flatpickr({format: "DD/MM/YYYY",minDate: "today",enableTime: false,parseDate: (datestr, format) => {return moment(datestr, format, true).toDate();}});</script>", false);


but sticky doesn't work. (data-kt-sticky-name="invoice")


ScriptManager.RegisterStartupScript(this, GetType(), "x", "<script type = "text/javascript">var stickyElement = document.querySelector("#invoice");
var sticky = new KTSticky(stickyElement);</script>", false);


or


ScriptManager.RegisterStartupScript(this, GetType(), "x", "<script type = "text/javascript">KTSticky.init();</script>", false);


could you offer a solution?
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 (3)


I tried but doesn't work.



Hi,

The initialization of KTComponents.init(); should trigger global KTSticky initialization. Please make sure that the initialization function has been triggered.

For more information about the KTSticky component, you can refer to <a href='https://preview.keenthemes.com/html/metronic/docs/general/sticky'>our KTSticky documentation</a>.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,

Can you please try to call the global component init function after postback as explained here:


KTComponents.init();


Regards.


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