Reading the title you could think that it is easiest question ever, but it ain't so. Problem: I have to use the click() method on querySelectorAll. As I found in Google, it does have the method in the library, but once I wrote the next code I got an error:
const gsdCaseNewBtn = $("#someId")
const gsdCaseOldButton = document.querySelectorAll('input[value="SomeValue Case"]')
gsdCaseNewBtn.click(() => {
gsdCaseOldButton[0].click()
})
So, as you can see, I'm creating a new button and trying to attach to it the 'onclick' behavior of already existing button. Method click() doesn't work with the error ("this method does not exist on type ..."). I tried to resolve the issue with addEventListener, but I don't need to set the onclick behavior of the old button, I just have to get it. Do someone has the idea how to get this code work?
Requirements: gsdCaseOldButton can't be of jQuery type. gsdCaseNewBtn can be any type.
This should fix your code:
<script>
const gsdCaseNewBtn = document.querySelector("#someId")
const gsdCaseOldButton = document.querySelectorAll('input[value="SomeValue Case"]')
gsdCaseNewBtn.addEventListener('click', () => {
gsdCaseOldButton[0].click();
});
</script>
I tested this in localhost ( I did not have access to Jquery) so i am not certain what the cause of the problem was.
Please let me know if this fixed your code.
Related
I have a page that I am trying to remove an element of with this section of code
oldContainer = $('div.choose-location-options');
oldContainer.addClass('hidden');
I am using the $ selector because I read online and in this answer that $ is short for document.querySelector, this code is working fine.
During code review my colleagues have told me that they do not want us using the $ is not best practice because it looks like jquery. So I changed it to this.
oldContainer = document.querySelector('div.choose-location-options');
oldContainer.addClass('hidden');
However this code will return an error message saying that cannot add class to undefined
Running this code in the browser will also remove the oldContainer so I thought it was an issue with the page loading so I added an event listener to the code for a page load
window.addEventListener('load', (event) => {
oldContainer = $('div.choose-location-options');
oldContainer.addClass('hidden');
});
This also returns undefined So I know it is not a timing issue. Why is the shorthand $ working but not the document.querySelector?
Problem
I am trying to use react-monaco-editor to render a json code. When I try to format the json , I was suggested the method: editor.getAction('editor.action.formatDocument').run() . The code that I use is
const editorDidMount = (editor, monaco) => {
setTimeout(() => {
console.log(editor);
editor.getAction('editor.action.formatDocument').run()
}, 300);
};
but I get the following error: Uncaught TypeError: Cannot read property 'run' of null
Could some one please help me understand why I am missing getAction method in the editor instance.
One other thing that I noticed is that, when checking in the context-menu(right-click).. I dont see the Format Document. Aslo the action editor.action.formatDocument is missing in the _actions object of the editor instance. Any help is much appreciated.
This seems to be an issue created by myself. I had to add the option format in the list of features of the monaco-editor-webpack-plugin(https://github.com/microsoft/monaco-editor-webpack-plugin). But one downside is I still cannot find the editor.getAction() method. Instead I had to use the editor.trigger() method to simulate a format action throught code.
I am looking to retrieve a focused element's HTML. Looking at the webdriver.io documentation, the method .getActiveElement() is supposed to do the trick. However, my IDE (WebStorm) shows an error stating that it is an "unresolved function or method" (the method isn't recognized). I've also seen someone mention the method .elementActive(), however this method shows up unrecognized as well.
Help! How can I retrieve the HTML of the current focused element?
If you're using WebdriverIO v5, you should be able to run the following:
const activeElement = $(function () { return document.activeElement });
const html = activeElement.getHTML();
console.log(html);
https://webdriver.io/docs/selectors.html#js-function
I am using TableExport.js script to export an html table, and I need to export the data after I've filtered it by hiding the rows I don't want. TableExport's method .update() comes in really useful here, but I am having some problems to call it every time the data is filtered, which is associated to an onchange event. Here are the relevant pieces of my code:
$(function () {
var exportedTable = $("#taskListTable").tableExport();
exportedTable.update({
// some options
});
$('body').on('change', '.filter', function (exportedTable) {
// some code for filtering
tableUpdate(exportedTable);
});
})
function tableUpdate(table) {
table.update({
ignoreCSS: ["tr.tableexport-ignore", "tr.tableexport-ignore>td",
"tr.tableexport-ignore>th", "tr.hidden", "tr.hidden>td"]
});
}
I keep getting an error of the type Uncaught TypeError: Cannot read property 'update' of undefined. I've been reading lots of threads (like this: Javascript passing object to function) and other info to understand the difference between passing by value and reference, but the more I read and try the more chaotic my mind is getting. So can anyone see what it is failing in my approach? - It's partly legacy code though, but I'm open to re-structure most of it if necessary.
I guess this is more a problem of JS misuse, so I hope this question will be useful both for people working with TableExport and people with similar JS issues. So I summon thee, JavaScript Jedis!
Event handler functions are called with an event object as the parameter. You probably just wanted to access exportedTable from the scope, rather than accepting it as an argument.
As #guest said, you simply have to remove exportedTable from parameters:
$('body').on('change', '.filter', function () {
# some code for filtering
tableUpdate(exportedTable);
});
I can set the onclick handler using jQuery by calling
$('#id').click(function(){
console.log('click!');
});
Also using jQuery, how can I get a reference to the function which is currently handling the click() event?
The reason is that I have another object and want to set its click handler to the same one as #id.
Update
Thank you for all the suggestions. The problem is that I do not know which function is currently handling the clicks. Keeping track of it would add state to an already complicated template-editing system.
jQuery's .click(function) method adds the function to a queue that is executed on the click event~
So actually pulling out a reference to the given function would probably be hairy-er than you expect.
As noted by others, it would be better to pass in a reference to the function; and then you already have the reference you need.
var clicky = function () { /* do stuff */ };
$('#id').click(clicky);
// Do other stuff with clicky
Update
If you really really need to get it out, try this:
jQuery._data(document.getElementById('id')).events.click[0].handler
Depending on your version of jQuery that may or may not work~ Try playing around with
jQuery._data(document.getElementById('id'))
and see what you get.
Got the idea from this section of the source:
https://github.com/jquery/jquery/blob/master/src/event.js#LC36
if you dont know the name of the function you can use
args.callee
https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/arguments/callee
function clickHandle(e){
if($(e.target) == $('#id')) {
$(newTarget).bind('click', clickHandle);
}
}
$('#id').bind('click',clickHandle);
I think this would be the most symantic way of going about it