Dynamically load js files and scripts

Dynamically loading code is the core of automatic updates and a good opportunity to reduce loading times for the browser.

At first there is an analysis of the most used pages for the "normal user", these pages are loaded at start of the browser-app. The pages which are rarely used by "normal users" and the pages reserved for administrators are loaded on demand.

Loading is done by ajax.

This way a caching in the browser is not necessary.

Regarding apps the ajax-option to load js code is used for updates. Hashcodes for the js files are used to check, if updates are needed - same principle as with GIT.


http://demos.jquerymobile.com/1.4.4/pages/
https://api.jquery.com/jquery.getscript/ https://www.tutorialspoint.com/jquery/ajax-jquery-getscript.htm gives a good introduction.

The strategy is as follows:

• initially the main js modules are loades from index.html
• the additional js modules are loaded on demand during execution

Each module corresponds to one page. So far it is checked, if a page is already initialized on invocation, now there is an additonal check, if the page module is already loaded and loading is done accordingly.

The loading is done with $.getScript, the sample in tutorialspoint seems to be good:

               $.getScript('result.js', function(jd) {
                  // do something
               });

The first test is done with a minor function for admins.


The following problems have to be solved:

• the menu-control uses href and the hashcode of the target page, that does not work, if the target page is not yet loaded and initialized. The solution will be to capture the click-Event on the menue point and then do the loading as well as pagecontainer change to navigate to the new page, the preprocessing for the new page is done in the control logic as it is

So this is the code:

        $('<a/>', {

            id: "loginControlLink",

            href: "#",

            html: "Login-Kontrolle"

        }).appendTo(

            $('<li/>', {

                click: function (e) {

                    e.preventDefault();

                    try {

                        if (!$("#loginControl").length) {

                            var url = "js/uiloginControl.js";

                            $.getScript(url, function (data, textStatus, jqxhr) {

                                // console.log( data ); // Data returned

                                // console.log( textStatus ); // Success

                                // console.log( jqxhr.status ); // 200

                                uiloginControl.init();

                                $.mobile.pageContainer.pagecontainer("change", "#loginControl", {

                                    transition: "flip"

                                });

                            });

                        } else {

                            $.mobile.pageContainer.pagecontainer("change", "#loginControl", {

                                transition: "flip"

                            });

                        }

                    } catch (err) {

                        uihelper.putMessage("Kein LoginControl möglich:" + err.message, 3);

                    }

                }

            }).appendTo("#navpageListe")

            );

The old controller-logic remains:

                        if (link === "#loginControl" || toPage === "loginControl") {

                            console.log(">>>loginControl");

                                uiloginControl.beforechange(event, ui, function (err) {

                                    callback(null);

                                    return;

                                });

                        }

This technology can be used with a remote server or locally, if an app already has downloaded updates before.