I am using phonegap and am trying to detect the onClick, however Android seems to completely ignore it, below is what I am trying:
<select name="func" onclick="StartButtons();" data-native-menu="true">
I have tried several variations of the onClick include javascript, jQuery etc. however none of these seem to work.
I have noticed that onChange works, however this is not of much use to me as I need to use a prompt asking the user to confirm the change, if it is no then do nothing. However, using onchange still changes the item within the dropdown.
Can someone please help with this?
I had the same problem with jQuery, Android seems to ignore the click event in javascript. Originally, my code with jQuery looks like this:
$("#element").click(function () { alert("message"); });
I had to change it to:
$("#element").on("touchend", function () { alert("message"); });
Not sure if you're using jQuery at all, but hope this helps.
Add click event listener to your object with javascript. First add an id to object:
<select id="obj_id" name="func" data-native-menu="true">
And then call addEventListener() :
document.getElementById("obj_id").addEventListener("click", StartButtons, false);
Phonegap documentation recomends to run all your javascript code in "deviceready" event. So your code should look like this:
main.js:
function StartButtons() { ... }
function onDeviceReady() {
...
document.getElementById("obj_id")
.addEventListener("click", StartButtons, false);
...
}
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
index.html:
...
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body onload="init();">
...
<select id="obj_id" name="func" data-native-menu="true">
...
</body>
https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
delete this code from index.html
user1183085´s answer is the right one. Android does not recognize click events as web apps do, this makes sence since mobile apps are not web when native, so that is why phonegap was made but since it works with jquery and not native java android libraries directly. I put my code this way:
The web buttons or elements onclick to handle all web interfaces, and special buttons or elements ontouchend to handle the mobile interfaces. Here´s a part of my code:
//this handles the login button events for the mobile touch of the user
$("button.login-button").on("touchend", function () {alert('hello touch ! =o' )});
//this handles the login button events for web clicks
$("button.login-button").on("click", function () {alert('hello click ! =o' )});
thanks user user1183085, that solved my life forever =()
Watch out, bind an onclick on an input in Cordova 3.4, doesn't work. But it works great with a div element. Considering, input elements are part of form element, like select element, it may be your problem.
Have you tried setting your method to be called to "method" instead of "method();"? So maybe you could try your line as:
<select name="func" onclick="StartButtons" data-native-menu="true">
Then hopefully your method will be called.
Related
I’m trying to use React to make a Report Component.
I want to use something similar to the on() function to have an event handler for when the report enters fullscreen mode. This way I could pass a Function through props to have it called when the report goes into fullscreen mode.
Something like:
report.on('fullscreen', () => {
props.onFullscreen();
}
Does this type of functionality exist?
EDIT: here is link to Microsoft Idea: https://ideas.powerbi.com/ideas/idea/?ideaid=3ae8a8bd-bf04-eb11-b5d9-501ac524a3e3
I don't know of how you can do this with the PowerBI Javascript API. This would be a good idea request to submit; https://ideas.powerbi.com/ideas/. That said you do have an option to achieve what you are looking to do: You can add listeners to detect when the PowerBI embedded iframe on the parent page is changed to full screen.
function iFrameFullChangeDetectedFunction(e) {
console.log("screeen changed")
}
<script type="text/javascript">
document.addEventListener("fullscreenchange", iFrameFullChangeDetectedFunction, false);
document.addEventListener("webkitfullscreenchange", iFrameFullChangeDetectedFunction, false);
document.addEventListener("mozfullscreenchange", iFrameFullChangeDetectedFunction, false);
</script>
As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?
use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});
onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?
You have a syntax error, the function should be:
function moveAway () {
return "foo";
}
I have a list item with an onclick event. It runs in Chrome and Internet Explorer, but not Firefox. Any suggestions?
<li onclick="alert('test');">test test<br></li>
This works fine for me in Firefox.
Check this:
JavaScript is enabled in your browser.
Try adding a return false; statement in your tag.
Or a function like this:
function test() {
//your code here
return false;
}
Or use this:
Link
or this
Link
I was trying to minimize my html code to send a complete code to simulate the error as Boris Zbarsky requested. Then I found my mistake.
I was using marquee tag which has been deprecated. Now I am going to use jQuery instead of it.
thx
In Firefox, the event object is not global. You have to access it within your script tags not in html.
onclick works likes this
<li id="alert">test<br></li>
<script>
document.getElementById("alert").addEventListener("click", function( event ) {
alert('test');
}, false);
</script>
Attributes can be ignored by Firefox when it is served invalid HTML, use
https://validator.w3.org/
to clean up the HTML.
I'd like to build onmouseover directly into a javascript block. I can do it within a hyperlink but I need to do it in the actual script section for the code im writing. Can I do object.onMouseOver()? Or is there another way to do it?
So for example I'd like
<script>
something i can put in here that will make on mouseover work on a specific object
</script>
Yes. :)
<span onmouseover="alert('Hi there')">Hi there</span>
Do you mean like that?
edited to add:
Ah I see so like this?
<span id="span1">Hi there</span>
<script>
document.getElementById('span1').onmouseover = function() {
alert('Hi there');
}
</script>
You bind events to HTML elements not javascript blocks. If you are talking about binding events to elements using script, yes you can do it. You can use addEventListener to bind events.
document.getElementById("eleid").addEventListener("mouseOver", myEventMethod, false);
Yes you can so if you have a link somewhere in the page that you want to fire the hover for you can use the following.
http://jsbin.com/asoma4/edit
EDIT: I should add that the attached is just an ugly example to demonstrate that what you want to do can be done. I would look into popular js libraries (jquery, prototype, etc..) to clean this up a lot and make it easier.
You can use addEventListener in Firefox/Chrome/etc. and attachEvent in IE. See this page.
For example,
<div id="cool">Click here!</div>
<script>
function divClicked()
{
// Do some stuff
}
var theDiv = document.getElementById("cool");
if(theDiv.attachEvent)
{
// IE
theDiv.attachEvent('onclick', divClicked);
}
else
{
// Other browsers
theDiv.addEventListener('click', divClicked, false);
}
</script>
If you want to avoid having to write all that code, you can use a JavaScript library (jQuery, Prototype, etc.) to simply your code.
I've created a VB.Net ClassLibrary with a UserControl in it. I can load it from an HTML page and call the methods that I created. This works as expected. I've tried several examples for how to raise an event from the VB code to the js caller, and none of them seem to work (I'm using IE7).
What I'm doing:
Public Class ctrlABC
Public Event TestEvent()
Then when I want to raise this event, I call:
RaiseEvent TestEvent()
In my JS file, I've tried the following:
<OBJECT id="myControl1" name="myControl1" classid="ABC.dll#ABC.ctrlABC" width=400 height=400></OBJECT>
<SCRIPT LANGUAGE=javascript FOR=myControl1 EVENT=TestEvent>
myControl1_TestEvent()
</SCRIPT>
<script>
function myControl1_TestEvent(){
alert("raised");
}
</script>
================== and then I tried ===================
<OBJECT id="myControl1" name="myControl1" classid="ABC.dll#ABC.ctrlABC" width=400 height=400></OBJECT>
<script>
function myControl1::TestEvent(){
alert("raised");
}
</script>
===========================
but neither seems to get the event. Does anyone have any ideas?
Thanks!
I've not used <object>'s like that so I cant be sure, but I would expect you declare the event handler like regular events in Javascript.
In the elements attributes:
<object id="myControl1" .... onTestEvent="functionName"></object>
or as a function in the object: (might not be the correct term)
document.getElementById("myControl1").onTestEvent = functionName
or using the event registration function(s):
document.getElementById("myControl1").addEventListener("TestEvent", functionName, false);
(these are browser specific, this one is for firefox, not sure about others)
with each of these "functionName" is a function you declare in the <head>.
Might want to have a look at Quirksmode - Advanced event registration