I'm working on a Chrome extension, and want to use prompt() to get input from the user when they click on certain elements. Unfortunately, for some reason, I can't get prompt() or alert() to work when called as an onclick (or in a jQuery $('#something').click(function), which is how I originally ran into this).
To wit, if I use the HTML below as the popup.html for my extension, the first alert shows up, but the second one flashes on the screen and then immediately disappears without any user intervention. And then the extension popup also immediately closes.
<script>
alert("This alert works");
</script>
<input type="button" onclick="alert('This one disappears')" value="Button"/>
Any thoughts on why this might be happening and how to fix it would be greatly appreciated.
Alerts/prompts are not working inside popups (see this bug report for details). You need to find alternate solution (use html form instead).
Related
So I'm troubleshooting an issue in our app and can't figure it out. I haven't written the base code and can only inject CSS and Javascript. There's a very basic span element with an ID, below that is a snippet of Javascript basically saying "if element with ID submitButton is clicked, submit form #createForm". However, on mobile it's broken and the browser is not giving any errors.
<form method="post" action="page.html" id="createForm">
<span id="submitButton">Submit form</span>
</form>
<script>
$("#submitButton").on("click", function (event) {
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
</script>
Now, this works perfectly on desktop browsers, even when using the "display as iphone" mode Chrome has. You can click the button, everything works.
However on mobile safari and when adding the page as a webapp the button no longer works. When you press it the page just scrolls to the top and does nothing. I've checked it out through my Mac and everything seems normal and exactly the same as on desktop. I can even run $("#submitButton").click(); on my iphone through the console and it functions perfectly.
There are no errors or warnings in the console. Does anyone have any suggestions to troubleshoot this? I sadly can't give direct access to the code because everything is on an IP locked server.
Is there any way of seeing exactly what happens when I click the button? I've tried the "Timelines" tab but that shows nothing when I press the button.
This answer by another user fixed it: https://stackoverflow.com/a/3026621/3461722
Thank you to Robin Zigmond for pointing me in the right direction. I was thinking that something was preventing the click event from firing, but it was simply not picking up on it because I needed to track the touchstart event.
The linked answer does mention that a better solution was found by adding cursor:pointer; to the button with CSS, however my element already had that so it obviously didn't work in this case.
Add this function to detect the taps on mobile:
$('#submitButton').bind( "touchstart", function(e){
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to.
here are the steps that lead to the problem:
I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.
Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)
This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this
document.body.outerHTML = `*copied HTML*`;
inside the DevTools' console.
That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.
The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.
I've filed an enhancement request for that, so the behavior in this case can get improved.
Chrome Extensions have had a Version 2 of their options page since Chrome 40. I tried creating an options V2 page with a button that just has a simple alert:
js
function resetAll() {
alert("Not yet implemented.");
}
document.getElementById("reset-button").onclick = resetAll;
html
<button id="reset-button">Reset All</button>
When I click the button in the options page, nothing happens. I even pulled up the Javascript Debugger to see if my code was actually being run. And it was, but no alert showed up.
If I use Chrome Extension's older options page format, the alert shows up without problem.
Is there no way to create a browser-native alert with OptionsV2?
chrome.extension.getBackgroundPage().alert('Are you sure you want to delete X?');
chrome.extension.getBackgroundPage().confirm('Are you sure you want to delete X?')
I'm using selenium IDE (currently available only on firefox) to do some automated testing of a site I'm coding. When selenium navigates to, a form filling page, and fills in the info - a 'window.alert()' is called by a button.
When using selenium my set of commands look like this:
open /
clickAndWait document.form1.Action[1]
select stuff
type stuff
etc, etc
click name=myPreview
When I click through recording this the first time, it works no problem. When I rerun the script window.alert and alert don't work from the console or anything. I've debugged it, and its not working.
When a window.alert() is called as part of a selenium script (I'm talking at least in the IDE), it is called even though a user watching does not see an alert pop up. According to the documentation:
Under Selenium, JavaScript alerts will NOT pop up a visible alert
dialog.
Selenium does NOT support JavaScript alerts that are generated in a
page's onload() event handler. In this case a visible dialog WILL be
generated and Selenium will hang until someone manually clicks OK.
Both assertAlert and verifyAlert are both based off getAlert(), all of which do the alert 'stuff' in the background. So try adding these functions to ensure that the alert is working, run the script, and then check to see if it works.
A note: this only works if you ensure the test fails before you put in the alert (basic idea of testing, fail first - make test pass).
If I have a text page as described below. The call to $("#target").focus(); in the $() section in the header works just fine. I can also bind that command to events in a more realistic page.
However, if I open the chrome console and type $("#target").focus(); it does not change focus. If I run $("#target").val("something"); it changes the value on the screen, but it does not work with focus.
Obviously this isn't a critical problem, but I am really curious why this happens. Anyone have an idea?
<html>
<head>
<script src="jquery-1.9.1.js"></script>
<script>
$(function(){
$("#target").focus();
});
</script>
</head>
<body>
<input id="target" type="text">
</body>
</html>
You will realize that when clicking on the Chrome console, it will steal focus from any input or textarea control on the current page, and vice versa. That's because the Chrome console actually is implemented using the same HTML controls as any other HTML page, just with special properties which, for instance, prevent Chrome from inspecting the Chrome console recursively.
When you type a command in the Chrome console, i.e. in the input control that is part of the Chrome console, it will keep the focus. The Chrome engineers might have chosen to implement it differently, but in most cases the user will want to continue typing in the Chrome console after firing a command, so no command will release focus from the console.
Kind of possible way is: unfocus / blur your control. Scroll it out of View. Enter the Command to focus in the Chrome Console. If then the Website will scroll up to your Control you can be sure that the Focus Method works.
kind of hackish but works...
try to wrap your highlight code with setTimeout :D and before the timer expire click on the web page.
ele2 = $('#input')
setTimeout(function(){ele2.focus()},4000);