jQuery Plugins triggerable by Console, but not by function - why that?
-
21-06-2021 - |
Question
I have a mysterious JS Problem: I activate different jQuery-Plugins with one function. It's called like this:
<script>
postAjaxCalls();
</script>
Then, the corresponding function looks like this:
function postAjaxCalls() {
jQuery("[title]").tooltip();
alert("this works great, tooltip not!");
jQuery("select").selectbox();
}
When I reload the page, everything works but the tooltip plugin. Now, if I fire the exact same Code into the JS Console, the plugin is activated:
jQuery("[title]").tooltip();
Why that? Why does it work when activated via console, but doesn't work when activated via a function?
Cheers!
Solution
Try your code within $(document).ready(function() { .. })
in short $(function() { .. })
to execute your code after DOM ready.
jQuery(document).ready(function() {
function postAjaxCalls() {
jQuery("[title]").tooltip();
alert("this works great, tooltip not!");
jQuery("select").selectbox();
}
postAjaxCalls();
});
OR in short
jQuery(function() {
function postAjaxCalls() {
jQuery("[title]").tooltip();
alert("this works great, tooltip not!");
jQuery("select").selectbox();
}
postAjaxCalls();
});
OTHER TIPS
You are probably calling postAjaxCalls
before the DOM is ready. When you call it from the console, the DOM is ready, so it works.
Try this:
$(function(){
postAjaxCalls();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow