Dynamic html onClick - google-apps-script

So I am playing around with the HTML service of GAS.
It has been working fine (more or less). But I hit a wall now.
I want the script (inside the html file) to create some html on when called.
In particular a few tags.
However, I want those tags to have onClick handlers (which will edit the div element).
Now the problem is that the onClick should depend on certain properties and I can not
pre-create those objects, they have to be made pragmatically and for some reason when I add a
onClick="someFunction(elementID)" after the new code has been added to the old one the click handler disappears.
(it works tho if the handler function has no parameters)
eg.
var div="<div id=\"box"+count+"\" class=\"square\" insert></div>";
if(something)
div=div.replace("insert", "onclick=\"myFunction(box"+count+"\"");

This is intentional and documented: see the section called "Dynamically adding scripts or external CSS" in the HtmlService user guide.

Related

Is there any way we can directly connect to the function without wanting to click the button i.e., when ever the page loads the function gets called

here is the Html button i want to disable the click function, reducing the extra step so that the function gets called whenever the page gets loded in the browser.
i want to scrape the data(info that comes after clicking the button) from this html file.
OR
Suggest me if we can dirctly call this JS function In Python
I tried Js2Py but cannot translate the Js File.
i have not tried anything as im not fimailar with html.
i'm supposed to modify the code according to my preferences and im a novoice in html.
i searched in google but couldnt find any relaiable source.
the answer is onload function on the Body tag of html instead for onclick it took a while to figure out.
before:
After:
.
.

How do I add a second click event to an a tag that already has an href?

I need to add a second click event to a link. I would like to add a modal event like shown in this codepen - but it already uses the HREF for the download link. What is the best way to handle this?
<a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
To be clear. I need the link to file to stay as is but also trigger the popup.
An <a> element can trigger functionality on its way to its href (target). It has a built-in HTML property (global event handler, to be specific), called onclick, that's common across most HTML content elements.
The onclick handler will be performed first. It takes an attribute (named event), which is the PointerEvent.
So this will work:
<script lang="javascript">
function doSomething(e) {
console.log(`You clicked <${e.target.localName}>`);
debugger;
// Press F8 to resume execution
}
</script>
<a download href="/path-to-file" onclick="doSomething(event)"><strong>DOWNLOAD</strong></a>
The click pointer event bubbles. Which means once the onclick handler bound on the element has been executed, the document looks for any other onclick handlers bound on its ancestors (parent elements). If it finds them, it executes them as well, in order (closest first), all the way up to document (which contains <body>, as .body).
What this means is that you don't necessarily have to bind your onclick handler onto the element with the href itself. You can bind it on any of its parents and it will still be performed before the document goes to the <a>'s href:
<script lang="javascript">
function doSomething(e) {
console.log(`You clicked <${e.target.localName}>`);
// uncomment next line to stop it getting to href (and see the log above)
// e.preventDefault();
}
</script>
<div onclick="doSomething(event)">
<a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
</div>
You can call .preventDefault() on the event to stop it from going to href and from bubbling.
To stop it from bubbling but still allow it to go to its href you can call .stopPropagation() on it.
Note: throughout my answer I used links to the MDN web docs. Instead, I could (some might even say should) have used links to the actual HTML Living Standard (a.k.a. "official HTML documentation"). I chose not to, because most people find the Standard too technical, therefore harder to digest. But note every MDN page has a link to the official documentation for that resource at the bottom of the page.

Modify DOM in content-script as a replacement for the non-ability to trigger pop-ups programmatically?

I'm working on an extension that's supposed to use the content of the page to determine whether to show an interface to the user.
The ways to show an interface, if I'm correct, are using a browser action or a page action.
And neither can be triggered programmatically. But content scripts could be written to inject an equivalent GUI into the webpage.
So, does it make sense to modify the DOM using content-scripts to display an interface as a substitute for page action? It seems like an obvious work around to me, and I'm sure there are good reasons to not let page actions be triggered programmatically.
Well, modifying DOM must be done by only Content Scripts, as that is the reason they exist.
Want to fetch any data from current page, alter anything in the page, add new UI in the page - whatever, content script will help you do that.
It has nothing to do with Page script Or Browser Script.
YES, you can not programatically trigger page/browser action. It has to be done by explicit clicking.
But if you want to open a UI by clicking a chrome extension, then there is a popup js for that.

asp:button reloads the page instead of firing OnClick event in Sitecore

I am using Sitecore and I have a header sublayout that I use in all pages. This layout contains a Logout button that fires OnClick event when clicked and executes the onclick event function. But in few pages it wont fire OnClick event at all instead it reloads the page.
Below is the code for the logout button
<asp:button id="btnLogout" runat="server" borderstyle="None" onclick="btnLogout_Click" text="Log out" ToolTip="Log out" backcolor="Transparent" style="cursor:pointer" class="logout_new"></asp:button>
Below is the code for the event function
protected void btnLogout_Click(object sender, EventArgs e)
{
Sitecore.Security.Authentication.AuthenticationManager.Logout();
Response.Redirect("/Login.aspx");
}
I found out that the difference between the pages where the logout fires the onclick event and pages where it does'nt is that they use the same header sublayout containing the logout button but they use different content sublayout though.
Note: I have not applied Cache to any sublayout.
Can anyone help me with this?
From the given context I don’t know what is the issue but here is what I will do if I have issue like this.
As you said only on few pages it is not working, it could be the other controls on that particular page is causing the issue.
I will pick two pages which has less controls on the presentation layer. Say PageA is a working page and PageB is a non-working page. Then I compare PageA and PageB and remove all common controls, this should narrow down the number of the controls on the presentation layer. Now check again to see if Page B is working or not. If not, I will try to remove one control at a time on PageB untill it starts working. If you find by removing certain control and the page started working then you can look into the particular control and identify the issue.
I hope this helps.
try disabling the cache as it would return the html without triggering the back end code.
To do so, one option is going to the presentation detail of those pages, find the control and click on it to edit. Under the "Caching section" uncheck "Cacheable" and publish the item. If this fixes your problem, I'd review the standard values of the template, to apply the change to all the items with the same template
This behavior happens to me at annoying times too, but it's almost always the same thing: the Sitecore sublayout the code is in is being cached.
The onclick javascript fires, but the page is not re-rendered with new content because the "unclicked" version is stored in the cache.
You'll need to disable caching on the sublayout to make the button work.
This can, however, be somewhat annoying if you're trying to cache as much presentation stuff as you can. In those cases, it often means you need to, counter-intuitively, create a number of "sub-sublayouts" and place them statically. Set the containing sublayout to be uncached, and then you can set each smaller one's caching appropriately (caching static parts, not caching dynamic stuff).
The problem was in the content sublayout in which it was not working, the Page_Load function was calling a Response.Redirect function to itself and it was not checking if it was a post back request or not before that. So Whenever a user clicked logout button it used to post it back to the server and the page used to reload instead of executing the onclick event.
I noticed that in the other content sublayout where it was working, it was checking if it was a post back or not.
I added a if(!IsPostBack) before that and it started working.

Detect element I click in UIWebView

How I can detect element I click in UIWebView. I have simple html, but I want differ elements, so I want get for example "alt" from the element I click.
In points:
User click one of images loaded in WebView.
It calls function that has info which about clicked element.
Is it possible?
You should add some bindings between your webview and your Objective-C. You can do this using javascript.
You pretty much inject javascript into the webview so you will get a event when some HTML element is touched. Then your javascript will communicate to Objective C, to trigger some action.
This is technique is described pretty well here: http://blog.techno-barje.fr/post/2010/10/06/UIWebView-secrets-part3-How-to-properly-call-ObjectiveC-from-Javascript/