Google App Maker: external javascript library

Question

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.

Did you use the widget builder and added a 'Label' widget that you designated as an 'H1' type label or did you add an H1 type element using a document appendElement? — Markus Malessa
@MarkusMalessa I dragged and dropped an html box from the widgets and then added the content: <h1>test</h1> on the properties listed on the right. I can see it renders accurately when I preview the page. — jorgeAChacon

Morfinismo Morfinismo · Accepted Answer · 2018-10-16T21:51:27

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:

}

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:

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

Google App Maker: external javascript library

1 Answers