Is there any way to check either jquery, jquery.ui and dependent plugins loaded or still in loading state?

Question

Is there any way to check either jquery, jquery.ui and dependent plugins loaded or still in loading state?

mehmood tekfirst 771

Is there any way to check either jquery, jquery.ui and dependent plugins load or still in downloading ?

I mean jquery plugin must be loaded first then jquery.ui plugin should be loaded and after then all other dependent plugins should be loaded and work.

I need to load these in a sequential orders.

and I want to see the conflicts as well.

Actually I have developed a widget in Asp.Net MVC Core 6 and the users of my widget are third parties. Many of the users of my widget are already using jquery and jquery.ui plugins in their application. My widget is a part which should work everywhere.

@page "/c-index"  
@inject IConfiguration Configuration  
@model CarWidget.Views.Home.MainPageModel  
@{     
    string fullUrl = @Configuration["CustomSettings:LiveUrl"];    
    string fullUrl = "";  
    if (!string.IsNullOrWhiteSpace(isLocal) && isLocal.ToLower() == "live")  
    {  
        fullUrl = liveUrl + baseName + "/";  
    }  
    else  
    {  
        fullUrl = localUrl;  
    }  
}  
  
@section Scripts{  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"   
   integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="   
   crossorigin="anonymous" referrerpolicy="no-referrer" ></script>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"  
   integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="   
   crossorigin="anonymous" referrerpolicy="no-referrer" ></script>  
    <script src="@(fullUrl + "lib/mbExtruder/mbExtruder.js")></script>     
    <script src="@(fullUrl + "lib/apis/commondata.js")" asp-append-version="true"></script>         
    <script src="@(fullUrl + "lib/apis/responsive-tabs.js")" asp-append-version="true"></script>  
    <script src="@(fullUrl + "lib/apis/searchbycodeorlocation.js")" asp-append-version="true"></script>  
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>      
    <script type="text/javascript">  
        //var jq = jQuery = jQuery.noConflict();  
        jQuery.noConflict();    
    </script>   
}

Thank you for the guidence.

Now I am trying to add in the following way:

var jQuery;  
            loadJquery();  
            /******** Load jQuery if not present *********/  
                function loadJquery() {  
                    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.5.1') {  
                        var script_tag = document.createElement('script');  
                        script_tag.setAttribute("type", "text/javascript");  
                        script_tag.setAttribute("src",  
                            "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js");  
                        if (script_tag.readyState) {  
                            script_tag.onreadystatechange = function() { // For old versions of IE  
                                if (this.readyState == 'complete' || this.readyState == 'loaded') {  
                                    scriptLoadHandler();  
                                }  
                            };  
                        } else {  
                            script_tag.onload = scriptLoadHandler;  
                        }  
                        // Try to find the head, otherwise default to the documentElement  
                        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);  
                    } else {  
                        // The jQuery version on the window is the one we want to use  
                        jQuery = window.jQuery;  
                    }  
                }  
  
            /******** Called once jQuery has loaded ******/  
            function scriptLoadHandler() {  
                // Restore $ and window.jQuery to their previous values and store the  
                // new jQuery in our local jQuery variable  
                jQuery = window.jQuery.noConflict(true);  
                // Call our main function               
                loadJqueryUI();  
            }            
  
                function loadJqueryUI() {  
                debugger;  
                    if (window.jQuery && window.jQuery.fn.jquery === '3.5.1') {  
                        var script_tag = document.createElement('script');  
                        script_tag.setAttribute("type", "text/javascript");  
                        script_tag.setAttribute("src",  
                            "https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js");  
                        if (script_tag.readyState) {  
                            script_tag.onreadystatechange = function() { // For old versions of IE  
                                if (this.readyState == 'complete' || this.readyState == 'loaded') {  
                                    loadJquerymbExtruder();  
                                }  
                            };  
                        } else {  
                           loadJquerymbExtruder();  
                        }  
                        // Try to find the head, otherwise default to the documentElement  
                        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);  
                    } else {  
                        // The jQuery version on the window is the one we want to use  
                        //jQuery = window.jQuery;  
                    }  
                }  
  
                 function loadJquerymbExtruder() {  
                    debugger;  
                    if (window.jQuery && window.jQuery.fn.jquery === '3.5.1') {  
                        var script_tag = document.createElement('script');  
                        script_tag.setAttribute("type", "text/javascript");  
                        script_tag.setAttribute("src",  
                            '@fullUrl' + "lib/mbExtruder/mbExtruder.js");  
                        if (script_tag.readyState) {  
                            script_tag.onreadystatechange = function() { // For old versions of IE  
                                if (this.readyState == 'complete' || this.readyState == 'loaded') {  
                                    loadJqueryCommonData();  
                                }  
                            };  
                        } else {  
                           loadJqueryCommonData();  
                        }  
                        // Try to find the head, otherwise default to the documentElement  
                        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);  
                    } else {  
                        // The jQuery version on the window is the one we want to use  
                        //jQuery = window.jQuery;  
                    }  
                }  
  
                function loadJqueryCommonData() {  
                    debugger;  
                    if (window.jQuery && window.jQuery.fn.jquery === '3.5.1') {  
                        var script_tag = document.createElement('script');  
                        script_tag.setAttribute("type", "text/javascript");  
                        script_tag.setAttribute("src",  
                            '@fullUrl' + "lib/apis/commondata.js");  
                        if (script_tag.readyState) {  
                            script_tag.onreadystatechange = function() { // For old versions of IE  
                                if (this.readyState == 'complete' || this.readyState == 'loaded') {  
                                    loadJqueryResponsive();  
                                }  
                            };  
                        } else {  
                           loadJqueryResponsive();  
                        }  
                        // Try to find the head, otherwise default to the documentElement  
                        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);  
                    } else {  
                        // The jQuery version on the window is the one we want to use  
                        //jQuery = window.jQuery;  
                    }  
                }  
  
                function loadJqueryResponsive() {  
                    debugger;  
                    if (window.jQuery && window.jQuery.fn.jquery === '3.5.1') {  
                        var script_tag = document.createElement('script');  
                        script_tag.setAttribute("type", "text/javascript");  
                        script_tag.setAttribute("src",  
                            '@fullUrl' + "lib/apis/responsive-tabs.js");  
                        if (script_tag.readyState) {  
                            script_tag.onreadystatechange = function() { // For old versions of IE  
                                if (this.readyState == 'complete' || this.readyState == 'loaded') {  
                                    loadJquerysearchbycode();  
                                }  
                            };  
                        } else {  
                           loadJquerysearchbycode();  
                        }  
                        // Try to find the head, otherwise default to the documentElement  
                        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);  
                    } else {  
                        // The jQuery version on the window is the one we want to use  
                        //jQuery = window.jQuery;  
                    }  
                }  
  
                 function loadJquerysearchbycode() {  
                    debugger;  
                    if (window.jQuery && window.jQuery.fn.jquery === '3.5.1') {  
                        var script_tag = document.createElement('script');  
                        script_tag.setAttribute("type", "text/javascript");  
                        script_tag.setAttribute("src",  
                            '@fullUrl' + "lib/apis/searchbycodeorlocation.js");  
                        if (script_tag.readyState) {  
                            script_tag.onreadystatechange = function() { // For old versions of IE  
                                if (this.readyState == 'complete' || this.readyState == 'loaded') {  
                                    //scriptLoadHandler();  
                                }  
                            };  
                        } else {  
                           // script_tag.onload = scriptLoadHandler;  
                        }  
                        // Try to find the head, otherwise default to the documentElement  
                        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);  
                    } else {  
                        // The jQuery version on the window is the one we want to use  
                        //jQuery = window.jQuery;  
                    }  
                }

Accepted answer

1 additional answer

Your answer

Answer 1

Bruce (SqlWork.com) 77,686 Volunteer Moderator

you should create loaders for each library. once the livery is loaded call next loader

so jquery successful load would call the datepicker load and so on. after you load. or just use require.js

simple loads function:

function loadScript(src, test) {  
    test  
    ? return Promise.resolve()  
    : return new Promise(function(resolve, reject) {  
      const s = document.createElement('script');  
      let r = false;  
      s.type = 'text/javascript';  
      s.src = src;  
      s.async = true;  
      s.onerror = function(err) {  
        reject(err, s);  
      };  
     s.onload = s.onreadystatechange = function() {  
        // console.log(this.readyState); // uncomment this line to see which ready states are called.  
        if (!r && (!this.readyState || this.readyState == 'complete')) {  
          r = true;  
          resolve();  
        }  
      };  
      const t = document.getElementsByTagName('script')[0];  
      t.parentElement.insertBefore(s, t);  
  });  
}

then its just:

loadScript(jqueryurl, window.jquery)  
   .then(() => loadScript(datepickerurl, jQuery.fn.datepicker))  
   .then(() => ...   
   .then(myStartup)  
   .catch(e => alert("failed to load libraries"):

mehmood tekfirst 771

Hi, @Bruce (SqlWork.com) . Thank you

loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', window.jquery)  
    .then(() => { jQuery = window.jQuery.noConflict(true); loadScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js", jQuery.fn.datepicker))}  
    .then(() => loadScript('@fullUrl' + "lib/mbExtruder/mbExtruder.js",window.jquery))  
    .then(() => loadScript('@fullUrl' + "lib/apis/commondata.js",window.jquery))  
    .then(() => loadScript('@fullUrl' + "lib/apis/responsive-tabs.js",window.jquery))  
    .then(() => loadScript('@fullUrl' + "lib/apis/searchbycodeorlocation.js",window.jquery))      
    .catch(e => alert("failed to load libraries"):

What does that mean ?

mehmood tekfirst 771

And When I omit the first return then plugins have been added in the head but again the order is opposite.

const loadScript = (src, test) => {  
                return new Promise((resolve, reject) => {           
                       const s = document.createElement('script');  
                       let r = false;  
                       s.type = 'text/javascript';  
                       s.src = src;  
                       s.async = true;  
                       s.onerror = function(err) {  
                         reject(err, s);  
                       };  
                      s.onload = s.onreadystatechange = function() {                         
                         if (!r && (!this.readyState || this.readyState == 'complete')) {  
                           r = true; resolve();  
                         }  
                       };  
                       const t = document.getElementsByTagName('script')[0];  
                       t.parentElement.insertBefore(s, t);  
                });  
            }   
 function removeJqueryConflict() {                 
                jQuery = window.jQuery.noConflict(true);                                 
            }

mehmood tekfirst 771

loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', window.jquery).then(() => loadScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js", jQuery.fn.datepicker)).then(() => loadScript('@fullUrl' + "lib/mbExtruder/mbExtruder.js", window.jquery)).then(() => loadScript('@fullUrl' + "lib/apis/commondata.js", window.jquery)).then(() => loadScript('@fullUrl' + "lib/apis/responsive-tabs.js", window.jquery)).then(() => loadScript('@fullUrl' + "lib/apis/searchbycodeorlocation.js", window.jquery)).then(removeJqueryConflict).catch((error) => { console.error(error); });

see the order is reversed. is it due to async true ?

Order is Revered but this is a bit working now. thank you @Bruce (SqlWork.com) . If can correct more then it would be more appreciated.

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

While node modules support dependencies, jquery plug-ins do not. Your documentation should identify its required plug-ins.

At runtime you can test for required components and display an error if missing.

// simple check for jQuery and components   
if (!window.jQuery) {  
      alert(“jQuery required”);  
       return;  
}  
if (!jQuery.fn.slideAccordian) {  
      alert(“jQuery slide accordion package required”);  
       return;  
}

mehmood tekfirst 771 Reputation points

2022-07-20T15:05:46.373+00:00
thank you Bruce.

Bruce , I am also using using datepicker as well as time picker and some other controls as well.

Should I have to check through like you mentioned for jQuery.fn.slideAccordian ?

jQuery.fn.datePicker and jQuery.fn.timePicker (something like this ) ?

Bruce, I tried to add jquery, jquery.ui and other plugins through javascript . Many of the errors are gone and js files have been included

but these are still not in sequence.

I need to set in following order

1 -> jquery 2) -> jquery.ui 3). -> mbExtruder 4)-> commondata.js 5-> responsive-tabs.js 6-> searchbycodeorlocation.js

If I add in following order and files are loaded properly then my code works as expected.

please see above in the main thread , I have added more code to add plugins dynamically .

Share via

Is there any way to check either jquery, jquery.ui and dependent plugins loaded or still in loading state?

1 additional answer

Your answer