We Keep Coding

Content script class not being added to injected element

I'm building a gmail extension that extends the compose view with an extra toolbar, using inboxSDK and content-scripts. Everything is working fine, I've injected everything, and I'm using gmail's style sheets and classes to make it flow more with the gmail UI. There is a class called "J-Z-M-I-Kq" (default gmail stylesheet) which when applied to a button-like div, gives the button the appearance of being pressed.
The issue comes when I close one compose view, and open another. Because the html for the new compose view is generated when the compose button is clicked, I have to re-inject all the toolbar things again. Everything works perfectly fine, except this class won't add to my button. I've tried making my own class and applying it in the exact same way, using the exact same jQuery selectors, and that works. In the dev tools, when I click the button, the element flashes like it would if the class was about to be added, but it just doesn't. I'm so confused as to why this might be happening.
This is the click handler:
$(dropdownContainer).click(function (e) {
let senderElement = $(e.target);
let checkTarget = senderElement.is("form") || senderElement.is("input") || senderElement.is("p");
if (checkTarget) {
return;
}
let wasOpen = false;
if (!($(dropdownContent).is(":hidden"))) {
wasOpen = true;
}
// Remove all dropdown content and un-highlight all buttons
$(".dropdown-content").hide();
$(".dropdown-btn").removeClass("J-Z-M-I-Kq");
// If the clicked button was already open, then do nothing (it has been closed). Else
// open the dropdown
if (!wasOpen) {
console.log("it wasn't open");
forceShow($(dropdownContent));
console.log(button);
$(button).addClass("red");
}
});
The ID_NUMBER is so that I can have unique ids when re-generating the tool bar.
button is the button that is clicked, and is defined earlier - console.logging this shows that the selector isn't the issue.
If I were to do button.addClass("red"), where red is an injected stylesheet - it works perfectly. All the other classes (such as one which does a similar effect but on hover) work fine, even when a second compose view is open. If I run the code in console, the effect works. Removing the class by clicking off even works when manually adding the class in console! I'm really stumped here, any help would be appreciated.

JQuery click() does not load page properly if page has not been loaded via navbar first

I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.

Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.

Clicking on a div shows a button but hides buttons on other divs

I am trying to make a note-keeping app in which there are many divs as notes and I want that whenever the user clicks on a particular div then it should be made editable and a button shows on top of div which before the action was hidden. I have somewhat done this part. Now I want that when the user clicks on other div or other parts of the page, then the already shown button goes hidden.
In short, those div's button should be visible where the user is currently working.
I am not sure how to just make the one button visible at a time.
the javascript I used for the button shown is:
edits=document.getElementsByClassName('new');
Array.from(edits).forEach((element) => {
child=element.childNode
element.addEventListener("click",(e)=>
{
let data=e.target;
data.contentEditable=true;
let btn=data.getElementsByTagName('button');
Array.from(btn).forEach(element => {
console.log(element);
element.style.display="block";
element.contentEditable=false;
});
});
});
here is that part of code
https://jsfiddle.net/mahajaved/sq7zuakf/

Select the second tab in a section of a page

index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!

As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);

Recalling JS functions on Partial Page Refresh

I am doing a partial page refresh on a div on my site. In that div I have some js functions I am calling to hide certain parts of the text. This is basically so you can click on an item and cause the hidden text to slide out using jquery.
When I do the refresh, the hide() functions need to be called again which I am now doing with a callback function and I am using display:none for the css. When one clicks on an expand button I change the class to open. The problem is that the items aren't staying open when the div refreshes.
This is the page refresh:
setInterval(function() {
$("#newsWrapper").load(location.href+" #newsWrapper");
}, 5000);
This is the click event that changes the class.
$('.expand').live('click', function (event) {
$(this).parent().next().toggle('slide');
imgName = $(this).html();
//change plus to minus or vice-versa
if (imgName == '<img src="images/plus.png">') {
$(this).html('<img src="images/minus_sign.jpg">');
$(this).parent().parent().children('.news_detail').addClass('open');
$(this).parent().parent().children('.news_detail').removeClass('close');
} else {
$(this).html('<img src="images/plus.png">');
$(this).parent().parent().children('.news_detail').addClass('close');
$(this).parent().parent().children('.news_detail').removeClass('open');
}
event.preventDefault();
});