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.
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.
Related
In GTM I have added a custom html:
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
///////////////
// Chat started
function notifyFacebookAboutAboutChatStarted(content_category){
fbq('track', 'Contact', {how: "chat_started", content_category: content_category}); // Breakpoint
}
function notifyAllSystemsAboutChatStarted(content_category){
notifyFacebookAboutAboutChatStarted(content_category);
}
//////////////
// Chat form submit
function notifyFacebookAboutChatFormSubmit($element, content_category){
fbq('track', 'Lead', {content_category: content_category});
}
function notifyAllSystemsAboutChatFormSubmit(content_category){
notifyFacebookAboutChatFormSubmit($element=$element, content_category=content_category);
}
// Event listeners
Tawk_API.onChatStarted = function(data){notifyAllSystemsAboutChatStarted(content_category=content_category);};
Tawk_API.onOfflineSubmit = function(data){notifyAllSystemsAboutChatFormSubmit(content_category=content_category);};
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/6131ae1fd6e7610a49b36846/1fel10b81';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
Please, don't pay much attention to this code because the question is not about it. It is just a piece of code to show what I usually put into GTM containers rather than to be analysed.
And I want to debug this JavaScript in Chrome. In other words I'd like to be able to stop at the breakpoint (marked in the code as // Breakpoint).
I mean in Chrome DevTools panel. Like this:
But this is some code inserted without GTM. I open Sources tab and try to find my JavaScript addeb via GTM there.
Tawk is an online chat I have added via GTM. And it is definitely there as the icon of Tawk has appeared on the site.
So, I'd like to debug my JavaScript code by stopping at breakpoints. But I fail to find where to put those breakpoints. Whether it is possible at all? Or should I debug the code first outside GTM and then insert it inside GTM? But this is clumsy: if users report an error, I'd like to first analyse the problem without changing anything.
So, the question: how to debug JS code with breakpoints if the code is inserted via GTM?
If you put this in a Custom HTML tag it will be inserted as string and run through eval at runtime, so I doubt the debugger will even notice this is JavaScript.
Basically your alternatives are
put it in an external file, which kind of defeats the purpose of GTM
rewrite the code as a custom template (which will require a lot of effort, but means that at least you can write tests inside GTM to make sure your code runs. However custom template code is transpiled, so it might be hard to identify in the debugger)
I think your best choice is actually to test outside GTM first (which I admit is not a real test, since this means you do not test the configuration that will run in the end).
I'm trying to create a trigger in GTM that would trigger a chat widget (ex: Zendesk) only after 60 seconds on the landing page but that would trigger on window loaded for all consecutive pages.
I've been able to create the first page of the trigger using the built-in timer trigger but I'm not sure how to implement the second part.
Chat widget is something that I would suggest doing through front-end. It's not generally expected to see something like this residing in a tag manager since it has no relation to analytics.
Make a customHTML tag, attach your trigger to it.
Find out how the chat widget is supposed to be envoked. There's likely a line of JS code to open it.
Test that JS code in your console first to make sure it actually makes the chat pop up.
Paste the JS code in your customHTML tag make sure it's within like so:
<script>
your code here
</script>
Test it out.
I am new to DOJO and have a requirement where in we need to embed already running website on our new website using an iframe. Both websites will be running on same domain.
I tried using dojo/request/iframe, and am able to see the website in my iframe BUT when clicking on any of the link in embedded website, it opens in another window. But i want it to work in my iframe internally.
Below is the code snippet:
<script>
require(["dojo/request/iframe", "dojo/dom", "dojo/dom-construct"], function(iframe, dom, domConst){
iframe("http://localhost:8080/phpkbv8/", {
handleAs: "html"
}).then(function(data){
var greetingNode = dom.byId('siteInclude');
domConst.place(data.documentElement,greetingNode);
}, function(err){
var greetingNode = dom.byId('siteInclude');
domConst.place('<p>Error Occured!!!</p>' + err,greetingNode);
});
// Progress events are not supported using the iframe provider
});
</script>
Please help me in making it work. Looking for help.
If you are intending to embed an iframe into your page for display/interaction purposes, you shouldn't really be using dojo/request/iframe to do so. If you need to create the iframe programmatically, use DOM APIs or dojo/dom-construct. For example, based on your code above:
domConst.create('iframe', {
src: 'http://localhost:8080/phpkbv8/'
}, greetingNode);
dojo/request/iframe is specifically intended as a transport for sending Ajax requests, in cases where XHR, script injection, etc. aren't sufficient.
I have an Google apps script and I want to call this Google apps script on my web page?How can I achieve this?This is my Google apps Script code for creating a google doc on my drive.
function createAndSendDocument() {
var doc = DocumentApp.create('Hello World');
doc.appendParagraph('This document was created by my first Google Apps Script.');
doc.saveAndClose();
var url = doc.getUrl();
var emailAddress = Session.getActiveUser().getEmail();
GmailApp.sendEmail(emailAddress,
'Hello '+ url);
}
and I want to call this function when I click on a button on my web page.But I don't know how to call this function on my button click.And one more thing I also save this script and change this version number and deploy as a web app and get the URL of this Google apps Script.
UPDATE: (added incorrectly in an answer)
Actually i am using this line like this.
btnClick.addEventListener("click", function () {
Page.ClientScript.RegisterStartupScript(this.GetType(), "GoogleFunction", "createAndSendDocument()", true);
}
So please now tell me what's wrong in that?When i run my application then it's show me an error like "The Page is not defined".
Look also at this documentation and also this one, everything is clearly explained .
you can add the div and the code in your page as you needed. also you need to add the javascript codes inside your head if it exists.
hi you can use this code on button click after adding a script manager in the form
Page.ClientScript.RegisterStartupScript(this.GetType(),"GoogleFunction","createAndSendDocument()",true);
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");