Populate data on same window - html

Hi, my requirement is to populate the data on same window where i have provide the employee id , Employee Id button and input field is present on left corner the of window and i want to populate the data on right corner of window as shown on figure right now i m population data on different window please help me out .
Here is my JS
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<jsp:include page="Header.jsp" />
<!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/style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="1255" height="952" border="0">
<tr>
<td width="357" height="251" bgcolor="#CC6600">
<table width="285" border="0" align="center" bgcolor="#FF9900">
<c:if test="${requestScope.x}">
<div id="div3">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentid">
<span>Find By ID </span>
<form:input path="departmentId" />
<input type="submit" name="submit1" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.y}">
<div id="div1">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentname">
<span>Find BY Name</span> <form:input
path="departmentName" />
<input type="submit" name="submit" value="search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.w}">
<div id="div2">
<form:form commandName="projectForm"
action="/EmployeeWebAppUI/ProjectController/getprojectsbyId">
<span>Employee Number: </span>
<form:input path="employeeNumber" />
<input type="submit" name="submit2" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.A}">
<div id="div2">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyid"
method="get">
<span>Employee Id:</span>
<form:input path="employeeNumber" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.B}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyname"
method="post">
<span>Employee Name:</span>
<form:input path="firstName" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.C}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findByDepatmentId"
method="post">
<span>Department ID:</span>
<form:input path="departmentId" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
</table>
<p> </p>
</td>
<td width="888" rowspan="2">
<tr>
<td height="693" bgcolor="#CC6600"></td>
</tr>
</table>
</body>
</html>

Instead of getting complete page get only data from Server and then render data on page using JavaScript.
This is typically possible if you post page asynchronously ( or using Ajax). The way you do is :
Call action by passing input parameters to the server using Ajax.
Get response in JSON form from server
Parse JSON data and then populate page using DOM manipulation.
You can use any JS library like jQuery to simplify your Ajax call as well as doing DOM manipulation.

Assuming you are using jquery
on click of tab or lable do AJAX request .
It will call your servlet and write the data into ajax response there.
on client side onsuccess do the required stuff .
function changeCOntent(type){
$.ajax({
type: 'POST',
url: 'servletpath?type=passtype',
success:function(data){
$('#contentDiv').innerHTML = data;
}
});
}

Related

esp32, button onclick Can't find variable: of function

I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}

HTML form with dropdownlist using jsp code

I have this form used to insert data into a database.
I want to change one value selecting from a dropdownlist connected to a mysql database.
This is the form:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<body>
<div id="container">
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
</div>
</body>
</html>
But to fill the country I want to use a jsp getting the data from Mysql DB with a jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%# page import="java.sql.*" %>
<%ResultSet resultset =null;%>
<HTML>
<%
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","1234");
Statement statement = connection.createStatement() ;
resultset =statement.executeQuery("select country_id, country_name from country") ;
%>
<center>
<h1> Drop down box or select element</h1>
<select>
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt("country_id")%>"> <%= resultset.getString("country_name")%></option>
<% } %>
</select>
</center>
<%
//**Should I input the codes here?**
}
catch(Exception e)
{
out.println("wrong entry"+e);
}
%>
</BODY>
</HTML>
Both codes work independent. My question is how can I integrate the Country dropdown list into the form.
Thanks !
You can achieve above in following ways :
1) . Put all your code in same page and use jquery/js to assign value of <select> to your <input..> like below :
//onchange of select this will execute
$("select").on("change", function() {
//getting value of select-box
var value = $(this).val();
//assign value to input with id="emp_country"
$("#emp_country").val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- put your db connection code here-->
Select-box:
<select>
<option value="0">Select Country</option>
<!--put your option code here-->
<option value="something">Something</option>
</select>
<!--put catch block here-->
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
2).In CountryDropdown.jsp put your select-box inside <form></form> with a submit button like below :
<form method="post" action="Yourformpagename">
<%
<!--connection code->
%>
<center>
<h1> Drop down box or select element</h1>
<select name="country">
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt(" country_id ")%>">
<%= resultset.getString("country_name")%>
</option>
<% } %>
</select>
</center>
<%
<!--catch block code here-->
%>
<input type="submit" value="SEND" />
</form>
And then get it in your form page like below:
<input type="text" name="emp_country" id="emp_country" value="${param.country}"/>

form values are not working

I have an index.php page in which, there is a login form.
Index.php:
<?php include_once("include/header.php");?>
</head>
<body>
<div class="mainContainer">
<div class="header"><!--Header start-->
<!--Inlcluding Login Barr-->
<?php include("include/loginBar.php");?>
<div class="clear"></div>
</div><!--Header end-->
<div class="centerContent"><!--Center content start-->
</div><!--center content end-->
<div class="clear"></div>
<?php include("include/footer.php");?>
</div>
</body>
</html>
header.php:
<?php session_start();
ob_start();
?>
<!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" />
<link type="text/css" href="css/mainStylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
footer.php
<? ob_end_flush(); ?>
loginBar.php
<div class="loginBar">
<form name="Login" id="Login" action="actions.php" method="post">
<span class="label">Login</span>
<input type="text" name="name" id="username" value="Username" onBlur="if(this.value==''){this.value=this.defaultValue;}" onFocus="if(this.value==this.defaultValue){this.value='';}" />
<input type="password" name="password" id="userpassword" value="Password" onBlur="if(this.value==''){this.value=this.defaultValue;}" onFocus="if(this.value==this.defaultValue){this.value='';}"/>
<input class="loginButton" id="loginButton" type="submit" value="Go" />
<input type="hidden" value="loginValues" name="login" id="login"/>
</form>
</div>
actions.php
<?php session_start();
echo $_POST['name']; echo $_POST['password'];
if(isset($_POST['login']) && $_POST['login']=="loginValues"){
echo "HAHAHAHAHA";
}
?>
The problem is, form values are echoed outside the IF block in actions.php page, but nothing works inside this block. That means form values are successfully transferred.
In firebug console, I see an error stating "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol."
I have tried all options and have placed this line after HEAD tag :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> , but nothing works.
Please help me. Thanks.
Unless it is just a typo in what you copy/pasted you have an input that isn't closed, which probably kills the input after it (login in this case).
<input class="loginButton" id="loginButton" type="submit" value="Go"
should be
<input class="loginButton" id="loginButton" type="submit" value="Go" />

where do i put the html form action file in the mvc

I am doing a tutorial that uses the mvc. I have the following view:
Index.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MovieApp.Models.Movie>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<form action="Movie/List" method="post">
<table>
<tr>
<td>
<button id="List" type="button" onclick="">List</button>
</td>
</tr>
</table>
</form>
<form action="Create.aspx" method="post">
<table>
<tr>
<td>
<input type="submit" value="Create" />
</td>
</tr>
</table>
</form>
</asp:Content>
so when you click on create it must call the Create view.
when i run the app i get an error: Resource cannot be found. Create.aspx a view in the movie folder.
What is the path that I need to specify for the Create.aspx to be found?
You shouldn't be pointing to the page, Create.aspx. You should be pointing to a method called Create in a controller.
Its not clear on any controller you are using, but by default it will post to its own controller (with the same name). Or you can specify the method and controller to post to like this, using Html.BeginFrom:
#using (Html.BeginForm("Method", "Controller", FormMethod.Post))
{
<table>
<tr>
<td>
<input type="submit" value="Create" />
</td>
</tr>
</table>
}

html page with frameset tag not working

Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.