Josette Smith Posted May 27, 2022 Posted May 27, 2022 Hi im currently having difficulty getting a jquery object to function and the console keeps throwing Uncaught ReferenceError: $ is not defined when doing this inside a custom PHP block var table = $("#anscestryMainContainer").tableSortable(options); how do i go about fixing this
Marc Posted May 27, 2022 Posted May 27, 2022 I will move this ticket to our developer forum, which is better placed for these kinds of questions, which would not be covered as part of standard support. I'm sure someone will be able to assist you in this
Josette Smith Posted May 27, 2022 Author Posted May 27, 2022 seems a workaround is to upload custom jquery/js files and directly reference them 1 line above as the jquery file referenced by ips is strangely considered out of scope for some reason and not allowing the $ variable to be accessed post ips access
Solution Martin A. Posted May 27, 2022 Solution Posted May 27, 2022 (edited) Wait for DOM to be loaded before doing anything in your JS. jQuery is loaded at the end of the document, which is why it isn't available at the time your PHP block is executed. Loading a second set of jQ libraries is not the solution here. Edited May 27, 2022 by Martin A.
Josette Smith Posted May 27, 2022 Author Posted May 27, 2022 thats completly un normal js/jquery should be handled in <head>
Martin A. Posted May 27, 2022 Posted May 27, 2022 (edited) That was the norm a couple of years ago, but it's not the practice anymore for speed and SEO reasons. https://levelup.gitconnected.com/all-about-script-87fea475b976 Quote The best practice is to put JavaScript <script> tags just before the closing </body> tag rather than in the <head> section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body. If we put our JavaScript in the head section, the entire JavaScript will load before loading any of the HTML, which could cause a few problems : If you have code in your JavaScript that alters HTML as soon as the JavaScript code loads, there won’t actually be any HTML elements available for it to affect yet, so it will seem as though the JavaScript code isn’t working, and you may get errors. If you have a lot of JavaScript, it can visibly slow the loading of your page because it loads all of the JavaScript before it loads any of the HTML. When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time. Edited May 27, 2022 by Martin A.
Josette Smith Posted May 27, 2022 Author Posted May 27, 2022 I can partially see your point for run of the mill js but with a commonly used library like jQuery <head> is more relevant otherwise you have to throw in many window.onload() function wrappers usually bound to anonymous functions just to "wait". In small cases sure this is not a problem but when a user accesses the $ variable many times that's many more randomly inserted wrappers needed to "wait" and increases both file size and potentially load time, not to mention if someone else gets brought in on the project and sees all these wait wrappers strewn about the place they will have to have more effort to bring them up to speed.
Martin A. Posted May 27, 2022 Posted May 27, 2022 This is not an issue with JS files that follow the coding standards of the software. The framework will halt the execution for us. I rarely, or rather never(?), need to wrap anything in an onload event. You might be better off creating a plugin or an app if you plan on adding lots of javascript to the PHP block.
Recommended Posts