Content script class not being added to injected element - javascript

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.

Related

autoComplete.js Is there a way to TAB through results list and press enter to trigger a search query in IE11?

I am updating my question because I have figured a way to make this work in Chrome, Firefox, Edge, etc. The last remaining browser is IE11.
I am using the autoComplete.js javascript library. Everything is hooked up and working.
I want to make a small accessibility improvement.
I notice when I type in the my search and the results list displays, I can press the TAB key to tab through the results list items.
However, when I press "ENTER" it does not trigger the query. This is strange behavior because when I press the down arrow after typing a search, I see the results list items highlighted (same as it did when I pressed the TAB button) and when I press ENTER the query fires.
I have tried adding tabSelect: true in the resultsLists config section, but I don't see any difference.
What I ended up doing was in my "resultItem" section, I added an eventlistener on the source to look for keyup events. I took the logic we had used for the "onSelection" section and applied it to the "resultItem" section.
What I see in IE11 is when I TAB through the list, I do not see the "selected" class getting added to the autocomplete suggestions. I can tab to them, but when I press ENTER it is only getting what I have typed in the input field.
Basically, the code I have looks like this, but i think this is an issue within autoComplete.js. This is totally understandable since the world is leaving IE11 behind. Our team may determine is not worth spending the time to fix.
A short code example:
resultItem: {
content: function content(data, source) {
source.tabIndex = 0;
source.innerHTML = data.match;
source.addEventListener('keyup', function (event) {
if (event.keyCode == 13) {
// do something
}
});
document.querySelector("#div-autoComplete").style.display = "block";
input.classList.add("div-expanded");
},
element: "li"
},

Different links with target = _blank works only twice

I have a code that covers the whole content with a link (target= _blank), then turns that link's display into none, brings another link and so on.
In my browser everything works just fine but I got a complaint about how only 2 of these links work.
No matter which link they click, after the second one it doesn't work.
Did the same thing with addEventListener and onclick but they caused different problems so therefore I used "a href".
I only can use JavaScript to create these elements and unable to use plain HTML.
I searched about browser's behaviors on multiple new tab or window but couldn't find anything useful.
This is how I create the links:
var hidden= document.createElement("a");
hidden.href="somelink";
hidden.style.height="100%";
hidden.style.width="100%";
hidden.target="_blank";
hidden.style.display="none";
container.appendChild(hidden);
And to make them appear, I add an event listener to a video and make them appear and disappear the right time.
video.addEventListener("timeupdate",function () {
if(video.currentTime>=3 && video.currentTime<5){
hidden.style.display="block";
} else if(video.currentTime>=5 && video.currentTime<6) {
hidden.style.display="none";
}
}
Is it a browser behavior that blocks the multiple new tabs or should I look for the answer in something else in my code?

Can't simulate a click event with javascript in "web application"

I have searched a lot of information about this but have not found the solution yet.
My problem is the following, I am creating an extension to speed up the movement through several web pages, I have managed it with many of them, but I have come to some where I cannot simulate a click with Javascript and I don't know how to do it.
One of the pages is this: https://sports.betway.es/es/sports/in-play The page is in Spanish domain, therefore I do not know if they can access it from another country (without vpn), although I think that with domain ".com" it works.
The code is as follows, it's pretty simple.
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelectorItemButton")
for(let i=0;i<deportesActivos.length;i++){
let nombre = deportesActivos[i].lastChild.firstChild.innerText
if(nombre == data.deporte){
deportesActivos[i].click()
}
}
deportesActivos I collect the DIV elements with that class from the page.
deportesActivos[i].lastChild.firstChild.innerText I extract the text of each element
if(nombre == data.deporte){
deportesActivos[i].click()
}
When it matches, click to enter the link.
The problem is that the click does not simulate me.
I have bought exactly the element that you click on, I have clicked manually and it works, I have tried to click on other elements of the web page and it does not work, I have tried to give a "listener on click" to the element and it does not work either.
The HTML of the page is as follows:Image with HTML Code of the website
I don't know if this helps but on website build with Ionic app neither works
The click event does not fully simulate a user click. It just fires the onClick handler on the element that you are targeting (and any parents).
If your are just redirecting to a new URL when the button is clicked, you could just do that in your loop instead.
// get the links, not the buttons
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelector");
for (let i=0; i < deportesActivos.length; i++) {
// Drill down one extralevel to get the button text
let nombre = deportesActivos[i].firstChild.lastChild.firstChild.innerText;
if (nombre === data.deporte) {
// Redirect to the href in the link
window.location.href = deportesActivos[i].href;
}
}

Obstructed JavaScript code: part of codes are not executed starting from second click

What I want is to trigger a Bootstrap modal (with an Id testModal) by a button click and update its content dynamically. Be more precise, I want to check if a certain div tag has been created, if yes then remove it and create a new one. For this I came up with the following jQuery code for testing purpose:
jQuery('#testModalButton').on('click',
function(){
'use strict';
jQuery('#testModalTitle').html('Country list');
console.log('Check if a div exists');
//...other codes...//
var $testModalBodyDiv = null;
if (jQuery('#testModalBodyDiv').length != 0) {
// if yes, then remove it.
jQuery('#testModalBodyDiv').remove();
}
else {
$testModalBodyDiv
= jQuery("#testModalBody")
.append($('<div id="testModalBodyDiv">'));
}
// end of...other codes...//
jQuery('#testModal').modal('show');
}
);
What bugs me is that, after the first click, everything runs fine, [...other codes...] is executed and modal is opened too. However, when I click the button again, the modal can be opened, yet the [...other codes...] part is not executed at all. At the third click, it runs fine again. This pattern repeats. I am wondering what went wrong.
NOTE ADDED: Well, my stupidity comes from a misuse of
$testModalBodyDiv = jQuery("#testModalBody").append($('<div id="testModalBodyDiv">'));
which, as a matter of fact, first selected the testModalBody instead of testModalBodyDiv in my previous codes.

How to add history to jQuery UI tabs using a back button

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});​
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.

Categories