CODEWITHSUNDEEP
google-app-maker
jorgeAChacon
jorgeAChacon

Reputation: 327

Google App Maker: external javascript library

I'm creating a POC using google app maker. I plan on using a JS library that has a dependency on Jquery. I've listed JQuery as an "external resource" to start with and added an H1 element on my html with the following code as part of a client script:

$(document).ready(function(){
   $("h1").click(function(){
      console.log("jquery works");
   });
});

When I preview my app and click on the element, nothing is logged. When I inspect the elements, I can see both the Jquery library and the code above, but the event is not triggering when I click on the element. Any suggestions? The ultimate goal is to be able to use https://querybuilder.js.org/ within the app I'm creating.

Upvotes: 1

Views: 837

Answers (1)

Morfinismo
Morfinismo

Reputation: 5253

My best guess is that when you say that you added the code: 

$(document).ready(function(){
   $("h1").click(function(){
      console.log("jquery works");
   });
});

to the client script, what you did was created a client script under the SCRIPTS section of App Maker and then added the code there. If that is so, that is why it's not working.

What you need to do is to use client scripting in the widget event handlers. Each widget has event handlers and the HTML widget is not an exception. What I recommend is to add the code to the onAttach event handler of the HTML widget:

enter image description here}

Also, you can get rid of the document.ready part and just use the code you see in the image above. That should do the trick.

BONUS: If you will be using classes and ids, for it to work you will need to use the allowUnsafeHtml option:

enter image description here

I hope this helps for now. If you need something else, I'll be happy to help you.

Upvotes: 1

Related Questions