Blog Search Box

[Wassim]

Well in fact you can use AppDrag built-in functions to do it :

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.

[Thomas D]

@Wassim Awesome, this is it would be nice with JS docs

[Daniel Mulroy]

Hi @Wassim,

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?

[Thomas D]

@Daniel-Mulroy

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

[Daniel Mulroy]

@Thomas-Djärf I don't know how you knew, but that was it! Thanks so much! I used "load" instead.

[Thomas D]

@Daniel-Mulroy

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.

[Daniel Mulroy]

Sure, I know that - but I didn't realize that inside the jQueryReady context would be different. Either way, I'm very grateful you had the answer!

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

[Thomas D]

@Daniel-Mulroy Ah, right, yeah jQuery uses namespace jQuery and $ depending on how you initiate it.

PS: nice!

[Daniel Mulroy]

@Wassim

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?

[Wassim]

Hi,

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

[Daniel Mulroy]

The problem is that setupBlogSearch doesn't seem to get called properly on the live site.

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

[Wassim]

For me it doesn't appear on both... Did you try on private navigation?

[Daniel Mulroy]

Thanks @Wassim

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?

[Wassim]

Ok I digged into it and you are missing the last parameter (I didn't provide it to you)

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")

[Daniel Mulroy]

Perfect- works perfectly. Thank you @Wassim

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

Can I help create some?

[Olivier MAGNIN]

Hi @Daniel-Mulroy , I'v tried your code in my site. It works fine.
I'm just facing an issue in preview mode, the input box is not taking all the line space available and as a result, it's display is very small.

I see in your own website that it is sized correctly !
Can you tell me how I shall solve this ?

[Daniel Mulroy]

Hi Olivier,

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!

[Olivier MAGNIN]

Hi Daniel,
I've placed in a full line (one column) without any padding or margin... Just in a line on top of top of the blog Article list 4.
I don't know.
I'll investigate further later.
Thanks for your help Daniel.