{"id":1697,"date":"2022-08-30T15:18:41","date_gmt":"2022-08-30T15:18:41","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/29\/how-to-effectively-use-yepnope-js-with-document-ready-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:18:41","modified_gmt":"2022-08-30T15:18:41","slug":"how-to-effectively-use-yepnope-js-with-document-ready-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-to-effectively-use-yepnope-js-with-document-ready-collection-of-common-programming-errors\/","title":{"rendered":"How to effectively use yepnope.js with $(document).ready()?-Collection of common programming errors"},"content":{"rendered":"<p>Using guidance from @ezmilhouse, I thought about the best way to achieve what I was after while still keeping compatibility with our older code.<\/p>\n<p>My solution was to set up my yepnope scriptloader to load all necessary scripts in a hierarchical fashion, based on their individual dependencies. Once all scripts are loaded, you can use the <code>complete<\/code> property of my call to yepnope to call my ready function. This meant that the document was effectively ready and the code would work with no issues.<\/p>\n<p>I also moved my js to the base of my pages (something that I should have done a long time ago, but we had a lot of legacy pages! \ud83d\ude42 )<\/p>\n<p>Here is an example (using false libray\/script names for illustration purposes only):<\/p>\n<pre><code>yepnope({\n    test: baseLib.debug,\n    yep: { \"max\": \"\/version2\/res\/jquery\/jquery-1.5.2.js\" },\n    nope: { \"min\": \"\/version2\/res\/jquery\/jquery-1.5.2.min.js\" },\n    callback: {\n        \"max\": function (url, result, key) {\n            baseLib.Log(\"jQuery full loaded.\");\n        },\n        \"min\": function (url, result, key) {\n            baseLib.Log(\"jQuery min loaded.\");\n        }\n    },\n    complete: function () {\n        if (window.$) {\n            yepnope({\n                test: base.debug,\n                yep: {\n                   \"anotherscript\": \"script\/url\/here.js\",\n                   \"anotherscript2\": \"script\/url\/here2.js\"\n                },\n                nope: {\n                    \"anotherscript\": \"script\/url\/here-min.js\",\n                    \"anotherscript2\": \"script\/url\/here2-min.js\"\n                },\n                both: {\n                    \"anotherscript3\": \"script\/url\/here3.js\"\n                },\n                callback: {\n                    \"anotherscript\": function (url, result, key) {\n                        baseLib.Log(\"anotherscript \" + (result ? \"Max\" : \"Min\") + \" loaded.\");\n\n                    },\n                    \"anotherscript2\": function (url, result, key) {\n                        baseLib.Log(\"anotherscript2 \" + (result ? \"Max\" : \"Min\") + \" loaded.\");\n                    },\n                    \"anotherscript3\": function (url, result, key) {\n                        baseLib.Log(\"anotherscript3 loaded.\");\n                    }\n                },\n                complete: function () {\n                    baseLib.Log(\"Scripts Loaded\");\n                    baseLib.Page.Ready();\n                }\n            });\n\n        }\n        else {\n            baseLib.Log(\"Could not load jQuery. No further jQuery dependent files loaded.\", \"error\");\n        }\n    }\n});\n<\/code><\/pre>\n<p>In my page js I will assign a function to <code>baseLib.Page.Ready<\/code> that will then be called by yepnope on complete.<\/p>\n<p id=\"rop\"><small>Originally posted 2013-11-29 06:06:51. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>Using guidance from @ezmilhouse, I thought about the best way to achieve what I was after while still keeping compatibility with our older code. My solution was to set up my yepnope scriptloader to load all necessary scripts in a hierarchical fashion, based on their individual dependencies. Once all scripts are loaded, you can use [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1697","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1697"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1697\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}