i am using following code using dojo to have tooltipdialog ,, by using this code the dialog box is visible below the textbox , but i want to see on above to textbox ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="JavaScript" src="dojo/dojoroot/dojo/dojo.js" type="text/javascript">
</script>
<script language="JavaScript" src="dojo/dojoroot/dijit/TooltipDialog.js" type="text/javascript" >
</script>
<link rel="stylesheet" href="dojo/dojoroot/dijit/themes/claro/claro.css" />
<script>
dojo.require("dijit.TooltipDialog");
dojo.ready(function(){
var myTooltipDialog = new dijit.TooltipDialog({
id: 'myTooltipDialog',
style: "width: 100px;",
content: "<p>Nitin.",
onMouseLeave: function(){
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function(){ dijit.popup.open({popup: myTooltipDialog, around: dojo.byId('thenode')}) ;});
});
</script>
</head>
<body class="claro">
<br/>
<br/>
<input type="text" id="thenode"/>
</body>
</html>
please give me some solution ..
specify 'orient' property in dijit.popup.open function's argument object.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="./dojo-release-1.7.3-src/dojo/dojo.js"></script>
<link rel="stylesheet" href="./dojo-release-1.7.3-src/dijit/themes/claro/claro.css" />
<script>
require([ "dojo/ready", "dijit/TooltipDialog" ], function(ready, TooltopDialog) {
ready(function(){
var myTooltipDialog = new TooltopDialog({
id : 'myTooltipDialog',
style : "width: 100px;",
content : "<p>Nitin.</p>",
onMouseLeave : function() {
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function() {
dijit.popup.open({
popup : myTooltipDialog,
around : dojo.byId('thenode'),
orient: ['above']
});
});
});
});
</script>
</head>
<body class="claro">
<br />
<br />
<br />
<br />
<input type="text" id="thenode" />
<br />
<br />
<br />
<br />
</body>
</html>
dojo/dijit/popup.js:252 in Dojo 1.7.3 release.
orient = args.orient || ["below", "below-alt", "above", "above-alt"],
Related
i have this problem, I would like to load a text inside a div with .innerHTML but after the event click the text inside the div diseappers:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anagrafica</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>My Document</h1>
<input type="submit" value="submit" id="submit">
<div id="myDiv"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click',function({
document.getElementById('myDiv').innerHTML= 'hello';
});
You have syntax error , )} missing .
addEventListener('click', function({
Looks like callback but you need just function(){} to attach.
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click', function(){
document.getElementById('myDiv').innerHTML= 'hello';
}, false);
}, false);
<input type="submit" value="submit" id="submit">
<br/>
<br/>
<div id="myDiv" style="background-color:black;color:lime;width:300px" > ... </div>
On html
<button type='submit'></button>
On js
var Button = document.querySelector("button");
Button.addEventListener("click", onClickButton, false);
function onClickButton(){
// to do something here
}
I am very new to phonegap as well as javascript and I'm trying to make a simple Contact Adder application but for some reason nothing happens when I try to add a contact. No alerts even appear. By the way, I am using an android emulator within eclipse to test my application. Can someone tell me what I am doing wrong? Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Add Contacts</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady()
{
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
<body onload = "deviceIsReady()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
This code working for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<title>Add Contacts</title>
<script>
function loaded(){
document.addEventListener("deviceready", deviceIsReady, false);
}
function deviceIsReady()
{
document.getElementById("save").addEventListener("click", addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
</head>
<body onload = "loaded()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
I tried in eclipse with android sdk, and I get the alerts on the emulator and after I add a new contact I sow it on the contacts. Before you try this code watch out for the script and style link. (rewrite it, or download the newest)
Your script tag is in-between the head and body tags. Try moving it into the body tag.
Your window load event also probably won't work. Just remove it, and simply attach the device ready event, so your script looks like this:
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady() {
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact() {
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
just remove the
<body onload = "deviceIsReady()">
and make a simple
<body>
you also need to put your
<script>
in head or body, but not between them!
you need to catch the event ondevice ready, but not on bodylaod. so try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady(){
alert("READY!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
it should works (for me, it works!). if not, check the manifest, maybe you do something wrong with it
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var x=document.f1.tt1.value;
alert(x);
</script>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
</html>
*the alert message does not appear , what is the problem?
thanks for your help :) :)
*
In addition to other answers your document may not be ready.
In your script tag have:
$(document).ready(function(){
var x = document.f1.tt.value;
})
A nicer way might be to give your input an id.
<input type="text" name="tt" id="myInput" value="jawadi" />
$(document).ready(function(){
var x = $("#myInput").val();
})
The problem with your script is you are trying to get the value of element which has not been created in the DOM yet. So you are getting the null value because it does not exist. One thing you can do is include the script at the bottom of the page so that it gets the value
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
<script type="text/javascript">
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
</script>
</html>
Second thing that you can try if you are comfortable with jquery is use .ready function, so it will get the value after page load.
$(document).ready(function(){
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
<script type="text/javascript">
var x=document.f1.tt.value;
alert(x);
</script>
</body>
</html>
because javacript not found f1 try this
Replace
var x=document.f1.tt1.value;
with
var x=document.f1.tt.value;
Modified code: DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alertX(){
var x=document.f1.tt.value;
alert(x);
}
</script>
</head>
<body onload='alertX();'><!-- call alertX on body load-->
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</body>
</html>
I've been using Aloha Editor to create an example of a simple editor, but I haven't succeed to getting it to work in Opera. The menu doesn't appear and the textarea is not editable.
In all other browsers seems to work fine, but sometimes Chrome needs to refresh the page to work.
This is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
And this is the javascript code (inside notes.js):
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});
I'm answering my own question after reading the comment from Inshallah.
The problem was that the JavaScript variables Aloha and Aloha.settings should be set before including Aloha.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script>
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
</script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
JavaScript code (inside notes.js)
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});
I have a JQuery Mobile application and I seem to have several locations in the app where the JavaScript doesn't execute as expected. In short, I have a "Dashboard" page. If the user hasn't logged in, I use the "changePage" function to send them back to the Login page.
If I attempt to login directly via the Login page, everything works as expected. However, if I am redirected to the Login page from the Dashboard page, I see a JavaScript error that says: "loginButton_Click is not defined". To provide more insight, here is my code:
Dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dashboardPage" data-role="page">
<div data-role="header">
<a id="logoutButton" href="#" class="ui-btn-left jqm-home">Logout</a>
<h1>My App</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><span id="greeting"></span></li>
</ul><br />
</div>
</div>
</body>
</html>
Shared.js
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
login.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header"><h1>App Name</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" /><br />
<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />
<input type="button" value="Login" onclick="return loginButton_Click();" />
</div>
</div>
<script type="text/javascript">
function loginButton_Click() {
$.mobile.changePage("/dashboard.html", { transition: "slide" });
}
</script>
</body>
</html>
I feel like there is something that I don't understand regarding how JavaScript gets into the DOM. What am I doing wrong?
In shared.js add $(...) wrapper:
$(function(){
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
});