I am really new to appMobi, HTML and JavaScript. The only thing I want to do is that I have a button with an onClick method and this method should do anything.
I have defined a Script, I have a button but the method doesn't get called. Can someone please tell my why? The examples provided by appMobi don't do anything different - I think.
Here is my code:
<head>
<!-- the line below is required for access to the appMobi JS library -->
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function myfunction(){
AppMobi.debug.log("test");
alert("Hallo Welt");
}
</script>
<script type="text/javascript">
function myfunction(){
AppMobi.debug.log("test");
alert("Hallo Welt");
}
</script>
</head>
<body >
<br>
<button onclick="myfunction();">MyButton</button>
</body>
Finally, I found the solution!
Instead of onclick="myfunction" you have to use ontouchstart="myfunction"!
Would be nice if someone could tell me why.
Related
I have written a small program to pop up an alert on click of a button using an addEventListener() . PFB the code below:
html file
<html>
<head>
<title>name alert</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input id="p" type="button" value="alert">
</body>
</html>
javascript file
document.getElementById("p").addEventListener("click",greet,true);
function greet(){
alert("hello there !");
}
I dont get a pop up screen this way both the files are in the same folder btw.
test.js loads and executes before the DOM is loaded. So, at that point #p returns null. Try listening to onload event, and add click event.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("p").addEventListener("click",greet,true);
});
// global scope
function greet(){
alert("hello there !");
}
<input id="p" type="button" value="alert">
try to move your
<script type="text/javascript" src="test.js"></script>
just before
</body>
You need to put the addEventListener inside a function that is called on the load event. As the page is being created it will run the javascript as it comes to it. If it hasn't created the HTML yet, when the addEventListener runs it won't find the 'p' element and it will give you an error.
You can also move the javascript to be after the html, but it's more organized to put it in something like this:
<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)
function pageload()
{
document.getElementById("p").addEventListener("click",greet,true);
}
</script>
I ran the below code and tried it on all browsers but it didn't work
//HTML Code
<html>
<head><title>Test</title></head>
<body onload="LaunchImageSlider();">
<script type="text/javascript" src="Scripts/javascript code.js"></script>
</body>
</html>
//javascript code.js
function LaunchImageSlider() {
window.addEventListener("load",function() {alert("Hi")});
}
I did not get any alert message. My actual aim is to create an image slider once the page is loaded so I began first by seeing whether the "addEventListener" works.
What am I doing wrong here?
I referred to the below questions already, but nothing helped:
addEventListener is not working
addEventListener() not working
addEventListener not working
addEventListener in javascript
A possible solution:
<html>
<head>
<title>Test</title></head>
<body>
<script type="text/javascript" src="Scripts/javascript code.js"></script>
<script type="text/javascript">
(function () {
LaunchImageSlider();
})();
</script>
</body>
</html>
But in the function you should not add and eventListener, as it is run after the window has loaded. You should just run the callback method directly. So using your example:
//javascript code.js
function LaunchImageSlider() {
alert("Hi");
}
I am using a script to make tables in html sortable. The script is here- http://www.kryogenix.org/code/browser/sorttable/. I want the text which sorts the html table to be clicked automatically when the i loaded. The autoclick script i am using is this-
<head>
<script LANGUAGE='javascript'>
function autoClick(){
document.getElementById('sort').click();
}
</script>
</head>
<body onload="autoClick();">
<table><tr><th><p id="sort">Click here to sort the table</p></th>...
The problem is that this is not working and i am confused that why this isnt working.
--------------------EDIT------------------
Sorry for this but actually i was typing something wrong in the body onload statement. Thus the script i was using was correct.
Where have you defined your event?
Because I see juste one function in your onload.
Below, a little example which work fine:
<html>
<head>
<script type='text/javascript'>
var init = function()
{
document.getElementById('test').addEventListener('click', function() {
alert('Auto test is ok');
}, false);
};
function autoClick(){
document.getElementById('test').click();
}
</script>
</head>
<body onload="init(); autoClick();">
<button id="test">Test</button>
</body>
</html>
It's always safer to use Jquery library. Just include the latest Jquery library on your header section of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and this function Should solve your issue:
$("#sort").live('click');
I think you missed the class name in the table
Please add your table tag with class name called "sortable".
I have working in asp.net web application. Here I need to run JavaScript before page load.
I have tried:
<body oninit="funinit();" onprerender="funRender();" onload="funload();">
</body>
<script type="text/javascript" language="javascript">
function funinit() {
alert("funinit");
}
function funload() {
alert("funload");
}
function funRender() {
alert("funRender");
}
</script>
here only funload() is working.
You can use window.onpaint for such purpose like :
<script type="text/javascript">
function preloadFunc()
{
alert("PreLoad");
}
window.onpaint = preloadFunc();
</script>
I hope it helps you....
Just inline it?
<script type='text/javascript'>
alert("funload");
</script>
Or put it in a function and call it immediately. Try to put it to the topmost of your page, however since the DOM isnt loaded yet you cant get any other elements.
What is it you want to do?
just insert a <script> tag wherever inside the body you want it to run. it will be executed as soon as the parser reads it, as long as it doesn't reference an element not yet created
try to put your script in head section of the page:
<head>
<script type="text/javascript" language="javascript">
alert("funinit");
alert("funRender");
</script>
</head>
Why not Use the ClientScriptManager.RegisterClientScriptBlock Method
http://msdn.microsoft.com/en-us/library/btf44dc9.aspx
I am new to javascript and jquery. I want to use $(document).ready to register some event handlers. For example, code like this, and my question is what javascript libraries do I need to refer to at the head of the page in order to use $(document).ready? Appreciate if anyone could provide me a simple easy to use sample to learn $(document).ready.
<script>$(document).ready(function()
{
// function implementation internals
});
</script>
thanks in advance,
George
All you need is the jQuery library.
http://www.jquery.com
You can either download the library and include it from your own server or you could use one of the many CDN's which provide the library. For instance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// do something useful
});
</script>
Google keeps copies of a bunch of libraries on their servers, which are pretty reliable.
Just add the following to your <head> section, and place your snippet somewhere below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
In summary,
Put the <script> tag provided by sje397 in the <head> section of the page, which provides the only library you need... jQuery.
(Alternatively: <script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script>)
Read http://docs.jquery.com/Tutorials:How_jQuery_Works
And you should be good to go.
<html>
<head>
</head>
<body>
<div id="someElement">Click Me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#someElement').bind('click', function(event) {
// event.preventDefault(); // you might want to do this if your event handler has a default action associated with it (e.g. a link that gets clicked with an href)
// do stuff on your event (change click to whatever you need)
});
});
})(jQuery);
</script>
</body>
</html>