If you share the link to the page I'll be able to better investigate.

My first instinct is to add padding/margin to the search box, or revisit its position in the page - something is forcing it to be that small.

Thanks for trying it out!

is there any documentation for these wonderful AppDrag features like translating, storing cookies/local storage, and resourcesLoader?

Can I help create some?

There is a last parameter to check if it's already on the page, try that :

resourcesLoader.loadResources("select2", "//" + cdnPath + "/resources/assets/select2/select2.min.css?v=1","//" + cdnPath + "/resources/assets/select2/select2.min.js", setupBlogSearch, typeof($("body").select2) != "undefined")

You are right that it doesn't work in private tab.

Sorry to keep revisiting this, but I can't quite seem to figure it out.

Directly following "Loading select2..." I am using resourcesLoader to load select2, and then submitting setupBlogSearch as the callback.

Yet, the blogSearch bar doesn't load.

If you type setupBlogSearch() into the console after "Loading select2", you will see that it works perfectly.

So, is it getting called or not? If not, why not?

If it gets called properly, the search bar fades in below the "NOS ARTICLES" text.

On both I don't see a Select2 and I have this in the console :

Sorry Wassim, the code you suggested seems to work in preview but not when published:

    addEventListener('load', function(e) {
        console.log("Loading select2...");
        // Load Select2 if not already loaded....
        resourcesLoader.loadResources("select2", "https://" + cdnPath + "/resources/assets/select2/select2.min.css?v=1", "//" + cdnPath + "/resources/assets/select2/select2.min.js", setupBlogSearch);

    }, false);

Preview (works)

Public (does not work)

Can you help?

PS: nice!

P.S. I've updated it to include the subTitles on search and highlight the word searched for:
https://www.visigo.fr/preview/Blog.html?ts=23435323322

You can easily navigate the JS document object, just pop open a console and start writing something like window. and it will show you a list of all functions inside that object.

Here an example of the Appdrag setup functions:

So in the case of resourcesLoader, it's available just by writing resourcesLoader in the console.

resourcesLoader doesn't seem to be available in the JqueryLoaded scope, try using it outside of it.

Thanks for that. I've tried implementing and I'm getting "resourcesLoader is not defined".

Old ($.getScript) Implementation
New (AppDrag loader) Implementation:

Code:

    addEventListener('JqueryLoaded', function(e) {
        // Load Select2 if not already loaded....
        resourcesLoader.loadResources("select2", "//" + cdnPath + "/resources/assets/select2/select2.min.css?v=1","//" + cdnPath + "/resources/assets/select2/select2.min.js", setupBlogSearch)
        
    }, false);

If I copy/paste that into the console once the page is loaded, it runs without an error, but it doesn't actually run setupBlogSearch properly.

If I run setupBlogSearch() in the console, things work fine.

Any help?

resourcesLoader.loadResources("select2",
"//" + cdnPath + "/resources/assets/select2/select2.min.css?v=1",
"//" + cdnPath + "/resources/assets/select2/select2.min.js",
function() {
  // do whatever you want
});

The first param is the plugin name.
The second is the css file.
The third is the js file.
The fourth is the callback when the plugin is loaded, if the plugin with the name "select2" was already loaded then it won't load it another time and instantly call the callback function.

Wassim I'm having a problem on a production page, actually - it's trying to execute the .select2() BEFORE the select2 plugin is loaded.
If I take the same code

Right, it's better to import it yourself if you need it directly. AppDrag imports it in a particular way when your website requires one. It won't be re-imported if you already import it

...It's not ideal, but I was tired of troubleshooting why AppDrag's select2 script was taking so long to come into effect.

If I take the same code

$(BLOG_SEARCH_SELECTOR).select2({
                                data: select2data,
                                matcher: titleAndSubtitle   
                            });

and run it in the console after everything has loaded, it works fine.

Do you know how best to wait for select2 to be loaded? I thought it was all part of the same jQuery package from AppDrag.

If you have any information about how I could turn it into a plugin I'd be happy to try.