1

For the convenience of the user, I'm implementing the requirement of katakana is automatically entered when entering hiragana or kanji in Japanese using this JavaScript library.

You can check the behavior described above at this URL.

That external JavaScript depends on jQuery, so I have to use jQuery. First, I'm importing jQuery and trying to see whether it can be used.

I'm trying with a custom component (LWC) in Experience Cloud (Community Cloud).

This Url is my testing community page.

As it, I mentioned before, the question that can't be loaded, but it seems that jQuery doesn't work on the loaded page.

Here is my code to load jQuery at my custom component(LWC).

renderedCallback() {
    loadScript(this, jQueryUrl + '/jquery-3.5.1.min.js')
      .then(() => {
        console.log(`jQuery loaded.`);
      })
      .catch((error) => {
        console.log(`jQuery loading was failed.`);
      });
  }

I tried window.jQuery in the Chrome developer console, but it didn't seem to reference to jQuery.You can check the behavior at this Url.

I confirmed that it is displayed as follows in the developer tools of chrome.You can also check the script tag at my testing community page's in <head> tag.

<script data-locker-src="/resource/***/jQuery/jquery-3.5.1.min.js" type="text/javascript"></script>

How can I solve it?

Improve this question
4
  • 4
    What do you mean "can't load"? The more details we have, the better we can help you.
    – sfdcfox
    Oct 16, 2020 at 16:26
  • First, are you sure you need it and if so share the reason.
    – Keith C
    Oct 16, 2020 at 19:08
  • Thank you for your comment @sfdcfox. I added my additional info to share with you.Thank you for your helping.
    – sagekoder
    Oct 17, 2020 at 0:45
  • Thank you for your comment @keith-c. I added my additional info to share with you.Thank you for your helping.
    – sagekoder
    Oct 17, 2020 at 0:46

3 Answers 3

Reset to default
0

The issue that you are facing is that LWC is loading libraries within your specific component and isolates it from outside.

So if you try to use it inside the component, you'll be able to write something like $('input'), but window.jQuery in developer console will produce undefined.

Hopefully, this helps.

UPDATE: You can access $ after callback on jQuery loaded. In your code you're trying to call jQuery on renderedCallback when it's not yet loaded.

Try something like this

            connectedCallback() {
                Promise.all([i.loadScript(this, t + "/jquery-3.5.1.min.js").then(()=>{
                    console.log("jQuery loaded."),
                    i.loadScript(this, l + "/jquery.autoKana.js").then(()=>{
                        console.log("autoKana loaded")
                        this.usejQuery();
                    }
                    ).catch(a=>{
                        console.log("autoKana was not loaded. error is " + a)
                    }
                    )
                }
                ).catch(a=>{
                    console.log("jQuery loading was failed.")
                }
                )])
            }


            usejQuery() {
                console.log($(".li-kanji").val()),
                $.fn.autoKana(".li-kanji", ".li-furigana", {
                    katanaka: !0
                })
            }
            renderedCallback() {
            }
            handleLiKanji(a) {
                this.liKanji = a.target.value
            }
            handleIKanji(a) {
                this.iKanji = a.target.value
            }
Improve this answer
3
  • Thank you so much for your reply. But I can't use $('input').val() inside the component. You can check the source at my testing community site resource. How can I use it inside the component? @ytiq
    – sagekoder
    Oct 17, 2020 at 10:33
  • added update according to your code, use jQuery after callback. You can also add property like jQueryLoaded to component
    – ytiq
    Oct 17, 2020 at 13:55
  • $ ('.input').val () remains unavailable directly from within the component, but I was able to resolve it with this.template.querySelector (). Thanks for your help and hints.
    – sagekoder
    Oct 18, 2020 at 0:10
0

Have you tried to loadScript call using async connectedCallback as per below?

async connectedCallback() {
        try {
            await loadScript(this, `${jQuery_bundle}/jquery.min.js`);
            });
        } catch (error) {
            console.log(error);
        }
    }
Improve this answer
0

I couldn't quite figure out how to mark this question as a duplicate. But I suspect the answer you need is on this answer.

For visibility here: Salesforce-sas gave the answer:

Firstly, if you are absolutely sure that you cannot get the needed functionality using standard Javascript and SLDS classes, only then you should go for Using Third-Party JavaScript Libraries.

Option 1: You should use import statements in every component that need to use this library.

Option 2: You use import these libraries in base class and extend that class in every component that needs these libraries.

import MyBase from 'c/myBase';

export default class MyComp extends MyBase {
    ...
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.