Blog Search Box

[Daniel Mulroy]

Thanks @Wassim !

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

[Daniel Mulroy]

@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

$(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.

[Daniel Mulroy]

I've fixed this by including a jQuery .getScript and getting 4.0.6 myself from CDNJS

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

[Wassim]

@Daniel-Mulroy said in Blog Search Box:

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

[Thomas D]

It would be nice if you could modularize these plugins so we can use them in custom code, otherwise we'll end up with larger-than-necessary bloated pages (which is already a problem for the HTML due to the editor adding setting in-line).

[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?