Chrome console: snippet command can't open dialog - javascript

I have a simple oneline snippet to "click" on a «load file» button on a visible page to call a dialog-popup (to load an image, for example).
this.document.getElementsByName("image")[0].click() // snippet code
While manual paste and run this line in console is successful (it opens the dialog), the above snippet can't do that. Seems like Chrome doesn't allow to open dialog not by user call. So, I set browser to allow all popups but there is no result.
Tested on different pages where file load button presents.
Thanks for any ideas.
A similar but different issue, solved

Seems like Chrome doesn't allow to open dialog not by user call.
I created a snippet to test if this statement is true. It seems like it is incorrect.
Click the Run Snippet button in this answer.
Open DevTools.
Click Inspect and click the image that says 350x150.
Evaluate document.querySelector('img').click() in the Console. The text below the image increments.
Run the same statement from a Snippet. The text still increments.
document.querySelector('img').addEventListener('click', () => {
let p = document.querySelector('p');
p.textContent = parseInt(p.textContent) + 1;
});
<img src="https://via.placeholder.com/350x150"/>
<p>0</p>
Possible solutions:
Make sure that you are in the correct Console context when you run the snippet. See Selecting Execution Context.
The use of this in your statement might be causing problems. Try removing it.
Try adding an ID to your element and then referencing it by its ID, rather than the getElementsByName array. So, use document.getElementById('myCustomId').click() instead. Make sure to add the ID to the HTML element, e.g. <img id="myCustomId" .../>. It's possible that you're referencing the wrong element, so that's why you're seeing the wrong result when you execute click().
Add comments to this answer and we'll eventually figure out what's going wrong.

Related

Attaching an event listener for left or right click - onclick doesn't work for right click

I am currently applying for an Internship Internship Link
One of the things that I noticed right away is that you click on upload cover letter or paste cover letter, you're redirected to the home page of the job invite site Job Invite and sadly you can't upload your cover letter. On the other hand, the upload resume works perfectly fine but paste resume has the same issue.
Does anyone know how to resolve this issue and and be able to submit a cover letter?
I am not a web guru but since I am applying for an engineering position, I am trying to find a way around this. I right clicked the upload cover letter link and inspected the link with the inspect element tool. I found that this function
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')
was going to get called when the button is clicked. Now going into the JavaScript file for this html page, Inspect Element -> Sources -> *careers_8.js?v=303, I tried to do a basic alert statement, from alert dialog, to do some debugging to see what the issue is. Here's the code now
function jvAddAttachment2(id, companyId){
alert("I got here");
....
}
I then did control s and the Inspect Element console outputted "Recompilation and update succeeded." so I am assuming the JavaScript file has been updated. However when I click the link(via right click, open new window), no alert box shows up. Does anyone know how to get the alert dialog to show up? I think I've done as much as I can with my working knowledge from one web development course haha.
You're looking for the contextmenu event for right click:
element.addEventListener('contextmenu', function() {
// code here
});
Please don't use inline js, like onclick in your html. The above sample is the proper way to attach event listeners.
You should get your element reference in javascript with var myElem = document.getElementById('the-id') or some similar function like document.querySelector, etc.
Then, you can easily attach both events like this:
// left click
myElem.addEventListener('click', myFn);
// right click
myElem.addEventListener('contextmenu', myFn);
If you're adamant to do this with inline js, that would be:
<div onclick="myFn()" oncontextmenu="myFn()"></div>
Full demo of both approaches for ya:
var myElem = document.getElementById('my-element');
myElem.addEventListener('click', myClickFn);
myElem.addEventListener('contextmenu', myClickFn);
function myClickFn() {
console.log('this is myClickFn!');
}
function someFn() {
console.log('this is someFn!');
}
<div id="my-element" onclick="someFn()" oncontextmenu="someFn()">Left or Right click me!</div>
Also, since you're wanting to pass parameters to the function you'll be calling on click, it is good to use an intermediary function for the event, and have that function call the other function, passing the parameters, like this:
function myClickFn() { // this is called on click
myOtherFunction('some', 'params');
}
That prevents you having to repeat the same function call, passing those same parameters in both places.
Make sure to close your onclick string at the end with a ":
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
And left click instead of right clicking.
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
I think that double quotation was absent.
demo

Completely delete all instances of a div with a specific class using javascript/jquery?

I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.

Element is not displaying on FireFox & Opera, but on Chrome & Safari is working

I have a problem where an element is not showing on Opera nor Firefox. Using firebug on Firefox I could see that an error saying that a function I use to initialize the code 'is not defined'
Now here's the thing, when I empty the cache on the Firefox browser, I can see my element which contains a "facebook button" and the error is gone, but once I refresh the browser I can't see my element and returns the error again. I would have to empty out the cache in order to see the button once again.
The element is supposed to be triggered with jQuery to show if a facebook user is online, and if not it will show that button. But this is only working on Chrome & Safari, and I believe on IE8 (which i don't have) but someone told me it worked.
This is the code to show the element on my Javascript file:
jQuery('#fbLogin').show();
Now, if i was to change this on my .css file:
#fbLogin {
display:none;
}
to this:
#fbLogin {
display:block;
}
it will display, but the problem i saw was that it showed all the time, and this needs to be hidden if the user is logged in. I basically have a code that says .show the button and .hide if logged in...
here's a link to a page if you want to take a look further:
http://gullypost.com/entertainment/tim-westwood-kendrick-lamar-interview/
On Safari & Chrome you will notice that the facebook button shows up on the right sidebar, but not visible on the other browsers.
Can someone help me solve the problem to this? Thanks.
There's a weird problem when using jQuery when trying to use .show() on an element that doesn't have a defined height. The fix is to set the height either explicitly or dynamically.
​$(selector).height(function() { return $(this).height() });​​
It looks like the second time the page loads, you're getting the following JavaScript error:
fb_og_actions_init_vid is not defined
The file that contains the function is being added to the page correctly. My only guess would be to try and move the reference to the function:
fb_og_actions_init_vid("Connected to Facebook", "108821");
To within a document.ready function:
$(document).ready(function(){
fb_og_actions_init_vid("Connected to Facebook", "108821");
});
I believe this will work:
document.getElementById('fbLogin').style.display = 'block';

How do I discover which function is called when I press a button?

I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.
In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!
Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)
Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);
You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)

getElementById works only after refreshing the page

I'm Trying to access results div in the results page of google.co.uk.
Using firebug one can see that the id of the div is "res" but for some reason getElementById('res') fails. to make things even weirder - if i refresh the page (F5 or ctrl+F5), the function succeeds.
Also, if i look in the source code of the results page i dont see anything that looks like the DOM described in firebug.
Why is this happening and how can i ensure getElementById('res') will succeed with any refresh by the user.
Thanks.
EDIT: im adding a a short code to simplify the problem. after placing a query in google.co.uk the page redirects and the alert 'working' pops but the second alert doesnt.
after refreshing, both alerts pop although the second one says 0 which is not right
because the div has children according to the firebug DOM.
p.s: i also failed to mention that im using greasmonkey
(function() {
alert('working');
var results = document.getElementById('res');
alert(results.childNodes.length);
})();
window.addEventListener("DOMContentLoaded", function () {
var results = document.getElementById('res');
alert(results.childNodes.length);
}, false);

Categories