I want to disable the jQuery event if a Text box is in focus. I am using following code. If a user is entering any text in text field then if by change the cursor moves to the image then it will reset the text in text field to the value shoot by event. I don't want to the event to execute if text field is in focus.
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="team" />
<script>
$("input").focusin(function() {
document.getElementById("team").value = "I am in Focus Dont shoot events PLZ";
}
);
$(document).ready(function() {
$("img").mouseover(function(event) {
if(event.target.name != '')
{
document.getElementById("team").value = event.target.name;
}
//alert(event.target.name);
});
});
</script>
<img src="http://1.bp.blogspot.com/-bVD6mGlH_ik/TnHV75bw9KI/AAAAAAAAB84/1hJU7WJuU8k/s400/fewr.jpg" name="I" />
</body>
</html>
I have already tried following function
$("input").focusin(function() {
document.getElementById("team").value = "I am in Focus Dont shoot events PLZ";
});
Now I am using below code but still not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img src="http://1.bp.blogspot.com/-bVD6mGlH_ik/TnHV75bw9KI/AAAAAAAAB84/1hJU7WJuU8k/s400/fewr.jpg" name="Ihhhhhhhhhhhhhhh" id="myimage" />
<input id="theone">
<input type="image" src="http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.thumb.png" id="bind">
<input type="image" src="http://www.clker.com/cliparts/4/3/1/f/1195436930767206781not_ok_mark_h_kon_l_vdal_01.svg.thumb.png" id="unbind">
<script>
$("#unbind").click(function(event) {
$("img").off();
alert("off");
});
$("#bind").click(function(event) {
$("img").on();
alert("on");
});
$("img").mouseover(function(event) {
if(event.target.name != '')
{
document.getElementById("theone").value = "done";
}
//alert(event.target.name);
});
</script>
</body>
</html>
Just put one condition in mousehover event...
Enter Text in text box if textbox is not focus using this code !$("#team").is(":focus")
here is the demo : http://jsfiddle.net/s8zxY/1/
Related
I'm having a JSP page as follows :
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Tools</title>
<jsp:include page="/basic/nav.jsp"/>
<link rel="stylesheet" type="text/css" href="tools.css"/>
</head>
<body>
<div class="container">
<h2>Admin Tools</h2>
<br/><br/><br/><br/>
<%#page import="java.sql.ResultSet"%>
<%
boolean def_admin = false, def_admin_changed = false;
conn.connect.main(null);
conn.dbc.main(null);
ResultSet rstools = conn.connect.st.executeQuery("select * from admins where uname='admin'");
if (rstools.next()) {
if (rstools.getString("uname").equals("admin") && rstools.getString("password").equals("123")) {
def_admin = true;
}
if (rstools.getString("uname").equals("admin") && !rstools.getString("password").equals("123")) {
def_admin_changed = true;
}
}
%>
<%if (def_admin == false) {%>
Add Default Admin Account :<br/>
<input type="button" value="Add" onclick="<% add_admin(); %>"/>
<% } else if (def_admin == true && def_admin_changed == false) { %>
Delete Default Admin Account :<br/>
<input type="button" value="Delete" onclick="<% delete_admin(); %>"/>
<% } else if (def_admin == true && def_admin_changed == false) { %>
The Default Admin Password Exists but the password has been changed<br/>
Do you still want to delete the Default Admin Account?<br/>
<input type="button" value="Even so, Delete it" onclick="<% delete_admin(); %>"/>
<% }%>
<div id="tools_error"></div>
<%!
boolean insert_success = false;
void add_admin() {
try {
int Urows;
Urows = conn.connect.st.executeUpdate("insert into admins(uname,password) values('admin','123');");
if (Urows == 1) {
insert_success = true;
} else {
insert_success = false;
}
%>
<script>
(function () {
boolean i_s = "<%=insert_success%>";
if (i_s == false) {
document.getElementById("tools_error").value = "There has been an error in Adding Default Admin";
}
});
</script>
<%!
} catch (Exception e) {
}
}
void delete_admin() {
}
%>
</div>
</body>
<jsp:include page="/basic/footer.jsp"/>
</html>
As you can see when the button is clicked I have made it to run the declared JSP functions. But when the JSP file is loaded the functions run automatically and the insert MYSQL query runs which automatically inserts the values given in the query.
I don't want it the functions add_admin() and delete_admin() to run automatically on load. Any suggestions?
The events in the webpage (onclick event for example) is executed client side when someone opens your webpage and clicks the button. The JSP scriplets are executed when the webpage is opened and their result is the actual page that the client receives. So your method executes ONLY when the page is loaded (and the JSP is compiled). The java code is not even visible in the webpage you generate. If you open it in browser and check the source you will see what I mean.
TL;DR: You can't
Your Java code is executed once, when the page is loaded. The page is not on the server anymore, so you can't use its back-end capabilities. Otherwise, that would mean someone reewriting your HTML could make your page execute any code on your back-end.
Once your page is loaded, all there is on it is HTML and Javascript (CSS if you want to bicker).
I am using webstorage to save data.When i get the data through form & save it in a variable (in this case 'one') and try to display in the same page , it does that correctly. But when i import the same '.js' file and try to display it in a different page, it doesn't work. How to use webstorage to retrieve the data in a different page ? Also, i don't want to use query string !
First page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="leftbox">
<section id="leftbox">
<form action="seconddisplayfile.html" method="post">
<p>(key) One: <input type="text" id="one" /></p>
<p>(value)Two:<textarea id="two"></textarea></p>
<p><input type="submit" id="button" value="Save" /></p>
</form>
</section>
<section id="rightbox">
Nothing yet !
</section>
</section>
</body>
</html>
Second page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="wbox">
Nothing yet!
</section>
</body>
</html>
Javascript code:
// JavaScript Document
function doFirst(){
var button = document.getElementById("button");
button.addEventListener('click',save,false);
}
function save(){
var one = document.getElementById("one").value; //but only contents is to be taken not label n all
var two = document.getElementById('two').value;
localStorage.setItem("one",two); //Store in key-value pair. Anytime you use this you use if by addressing the variable ie key name.
//Retriveing data n displaying stored data
display(one); //now u hav stored two so its time to use one
}
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
window.addEventListener('load',doFirst,false);
#charset "utf-8";
/* CSS Document */
#leftbox{
float:left;
padding:20px;
border:3px solid #F20B84;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid #8E1783;
}
Your second page doen't contain any element with id rightbox.so
var rightbox = document.getElementById('rightbox');
will return null.and when try to set innerHTML property of rightbox,js will throw
Uncaught TypeError: Cannot read property 'innerHTML' of null
so change your display to
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
if(rightbox)
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
You have to call display in second page .
Last few hours i am trying to solve this but i can not.I am sending ajax request using jquery and based on response i set data on jsp.actully i am checking login detail so if login fail it set error message on label problem is that error message is set for few second and removed i mean to say error message is set for few second i want that if login fails the message is set on label still user enter valid details
thanks in advance
Here is my code
LoginDemo.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/firstpage.css" rel="stylesheet" type="text/css" /><!-- <style> -->
<script src="js/jquery.min.js"></script>
<title>Insert title here</title>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type: "POST",
url: "AddInspServlet",
cache:false,
data: { userid: $('#username').val(), password: $('#password').val(),btn:$('#submit').val() },
success:function(data,textstaus){
alert("success:"+data);
if(data == "no"){
alert( document.getElementById("error").innerHTML);
document.getElementById("error").innerHTML= "UserName OR Password is incorrect";
alert( document.getElementById("error").innerHTML);
}else{
location.href = 'Home.jsp';
}
},
error:function(data){
alert("error"+data);
},
});
});
});
</script>
</head>
<body>
<form id="login" name="Loginform" method="post">
<h1><b>Log In</b></h1>
<fieldset id="inputs">
<input id="username" type="text" placeholder="Username" autofocus required>
<input id="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="login">
Forgot your password?
</fieldset>
<label id="error" style="color: red;font: bolder; font-size: 18px;">
</label>
</form>
</body>
AddInspServlet
Here i m adding code which server executed and retrieve response
if(btn.equals("login"))
{
System.out.println("***** login condition checking ******");
String password =request.getParameter("password");
UserVO v =op.loginCheck(username, password);
if(password.equals(v.getPassword()))
{
System.out.println("inside true condition");
HttpSession session = request.getSession();
session.setAttribute("userid",v.getUser_id());
session.setAttribute("username",v.getUsername());
session.setAttribute("user", v.getFirst_name()+" "+v.getLast_name());
session.setAttribute("roleid", v.getRole_id());
// response.sendRedirect("Home.jsp");
System.out.println("submitting data success fully");
out.print("yes");
}
else
{
System.out.println("false condition");
out.print("no");
}
}
Get rid of the form tags.
By adding a type="submit" input element without using the action attribute in the form tag, the page will be reloaded.
Or you could keep the form tags and change the type of the submit button to type="button". The form will then not be executed and the page will not reload.
It would be better if you be more specific about the problem. I assume your problem is Label is getting displayed for few seconds and then get disappeared. Is that is true? then try to return "false" inside you data == "no" logic.
Thanks.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Enter Your Data!</TITLE>
</HEAD>
<script type="text/javascript">
function changeVal()
{
document.getElementById("textfield2").value="abc";
}
</script>
<BODY>
<form method="GET" action='index.jsp' name="good">
<input type="submit" name="submit" value="submit" id="textfield2" />
<input type="text" name="done" value='<%=request.getAttribute("k")%>' />
<% String k=request.getParameter("done");
request.setAttribute("k",k);
%>
</form>
</BODY>
</HTML>
This is my simple index.jsp file code am unable to display text after Button click please Help me how i ll do this after Button click Text disappointing of iN put value
If I understood correct, you want to display submitted value.
Try to change
<input type="text" name="done" value='<%=request.getAttribute("k")%>' />
to
<input type="text" name="done" value='<%=request.getParameter("done")%>' />
But it's better not to do any logic in jsp. Try to move all logic into servlet or any other controller.
You may need to call the changeVal() somewhere in your code, probably in onload of the body.
<script type="text/javascript">
<%
String paramValue = request.getParameter("submit");
paramValue = (paramValue==null)?"":paramValue;
%>
var buttonValue = <%=paramValue%>;
function changeVal()
{
if(buttonValue!="")
{
document.getElementById("textfield2").value = buttonValue;
}
}
function formSubmit()
{
//set the value need to be changed
document.getElementById("textfield2").value="abc";
document.getElementById("good").submit();
}
</script>
<BODY onload="changeVal()">
<form method="GET" action='index.jsp' id="good" name="good">
<input type="button" onclick="formSubmit()" name="submit" value="submit" id="textfield2" />
<input type="text" name="done" value='<%=request.getAttribute("k")%>' />
<%
String k=request.getParameter("done");
request.setAttribute("k",k);
%>
</form>
</BODY>
There is a simple web page which sends request, handles & manipulated by a servlet class and send back the response text.while i want ajax type handleing the request at client side that is why i am giving the response target to a invsible iframe. *but i want to print success on the page after iframe gets the response *
<html> <body>
<form action="test" method="post" target="IFrame"> /*response target is iframe*/
<input type="text" name="logic" />
<input type="submit" value="Submit" />
</form>
<iframe name="IFrame" style="width:0; height:0"> </iframe>
</body> </html>
i think this can be done using javascript or jquery, please guid me if you have any idea.
In the page which loads in the iframe, you will need to invoke a parent function.
<!-- This is the Parent. Call it JSTest1.html -->
<html>
<head>
</head>
<body>
<script type="text/javascript">
function parentAlert() {
alert('hey there from the parent');
}
</script>
I'm the parent
<iframe src="/JSTest2.html"></iframe>
</body>
<!-- this is the iframe html loaded. Call it JSTest2.html-->
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function() {
window.parent.parentAlert();
});
</script>
In the Iframe.
</body>
To send a message from Iframe to Parent window page:
<script type="text/javascript">
$(document).ready( function() {
//Message part is two parts Event name and Data you want to send
// Example message = "my_action,my_data"
message = "my_action,my_data"
parent.postMessage(message, "*");
});
</script>
At the parent window you can do the following to listen to this message and capture it:
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
// Youe message which you send is captured here in e.data will split it on ',' to get the event and the data
message = e.data.split(',')[0]
value = e.data.split(',')[1]
if ( message === "my_action" ) {
myParentFunction(value)
}
},false);