aspose file tools*
The moose likes Struts and the fly likes I want create UI desing in jsp using html and javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "I want create UI desing in jsp using html and javascript" Watch "I want create UI desing in jsp using html and javascript" New topic
Author

I want create UI desing in jsp using html and javascript

Arulmozhi Govindaraju
Greenhorn

Joined: Feb 20, 2013
Posts: 17
I have attached JPEG format (design page)please any one help
Hi upload the page design image format the page doing in java server page using java -script and HTML and also using struts then db MySQL Du(department unit) sales select from database table once Du select what are the project assigned and unassigned split the box you know displayed we can assigned anything assigned or unassigned to submit and store the database
Swastik Dey
Rancher

Joined: Jan 08, 2009
Posts: 1457
    
    6

Where is the attachment?


Swastik
Arulmozhi Govindaraju
Greenhorn

Joined: Feb 20, 2013
Posts: 17
Swastik Dey wrote:Where is the attachment?



[Thumbnail for page.jpg]

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61063
    
  66

Where is your code? What specific problems are you having with it.

Surely you are not expecting other people to do your work for you?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Arulmozhi Govindaraju
Greenhorn

Joined: Feb 20, 2013
Posts: 17
Bear Bibeault wrote:Where is your code? What specific problems are you having with it.

Surely you are not expecting other people to do your work for you?


what???
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61063
    
  66

Just what I asked. You haven't posted any code. What work have you done so far? We can't help you with your code is you don't post it. (Be sure to UseCodeTags when you do.)
Arulmozhi Govindaraju
Greenhorn

Joined: Feb 20, 2013
Posts: 17
Bear Bibeault wrote:Just what I asked. You haven't posted any code. What work have you done so far? We can't help you with your code is you don't post it. (Be sure to UseCodeTags when you do.)



Hi this is my coding

<%--

--%>





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@ page import="java.util.*" %>
<%

LinkedHashMap<String,String> deliveryUnitMap = (LinkedHashMap)(request.getAttribute("DeliveryUnit") == null ?
(new LinkedHashMap<String, String>()): request.getAttribute("DeliveryUnit"));
LinkedHashMap<String,String> DepartmentMap = (LinkedHashMap)(request.getAttribute("Department") == null ?
(new LinkedHashMap<String, String>()): request.getAttribute("Department"));
//Added By hyder on 28-jan-2013 for adding behalfof --Starts

//Added By hyder on 28-jan-2013 for adding behalfof --Ends
%>

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/gems.css" />
<link href="styles/report_table.css" rel="stylesheet" type="text/css" />
<link href="styles/gems_base.css" rel="stylesheet" type="text/css" />
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />-->
<script type="text/javascript" src="./js/customJs.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/livevalidation.js"></script>
<script language="JavaScript" src="js/gen_validatorv31.js" type="text/javascript"></script>
<style>
.error_strings{ font-family:Verdana; font-size:10px; color:#FF0033;}
a img{border:none;}
a{
text-decoration:none;
border:none;
}
</style>
<SCRIPT type="text/javascript">




$(function() {
$("#fromDate").datepicker({ disabled: true,autoSize: true,minDate: 0 });
/*If mindate is set as 0-It means Today and onward,
If mindate is set as 1-It means Tomorrow and onward*/
$("#toDate").datepicker({ disabled: true,autoSize: true,minDate: 0 });
});


//purpose:sales configuration author:Arul Date:23-04-2013
//function makeAjaxCallForDept(Id){
// var DUId= document.getElementById("Project").value;
// var duDelUnit=document.forms[0].deliveryUnit.value;
// alert('duDelUnit: '+duDelUnit);
// alert('DUId' +DUId);
// var ajaxUrl = "<%=request.getContextPath()%>/AdvanceRequest.do?mtc=getDeptByProjId&ID="+Id+"&ID1="+duDelUnit;
// var deptResult = getAjaxResult(ajaxUrl);
//var projResult= result.substring(0,result.indexOf("@#%"));
//var deptResult= result.substring(result.indexOf("@#%")+3,result.length);
// var deptIdDescArray = splitAjaxResponse(deptResult);
// updateComponent(deptIdDescArray,'deptDiv','Department');
//}

////purpose:sales configuration author:Arul Date:23-04-2013 end



function makeAjaxCallForProj(Id){

var ajaxUrl = "<%=request.getContextPath()%>/ProjectEditAction.do?mtc=getProjByDuId&ID="+Id;
var projResult = getAjaxResult(ajaxUrl);
alert(projResult);

//var projResult= result.substring(0,result.indexOf("@#%"));
//var deptResult= result.substring(result.indexOf("@#%")+3,result.length);
var projIdDescArray = splitAjaxResponse(projResult);
updateComponent(projIdDescArray,'projDiv','Project');

}
function updateComponent(IdDescArray,divId,componentName)
{
var returnArray = [];
document.getElementById(componentName).options.length=0;
//var optionlist=document.createElement("option");
//document.getElementById(componentName).options.add(optionlist);
//optionlist.value="-1";
//optionlist.innerHTML="Select Any";
//optionlist.value="-3";
//optionlist.innerHTML="new";
var opt = document.createElement("option");
opt.value="-1";
opt.text="Select Any";
document.getElementById(componentName).options.add(opt);

//var opt1 = document.createElement("option");
//opt1.value="-2";
//opt1.text="new";
//document.getElementById(componentName).options.add(opt1);
var opt2 = document.createElement("option");
opt2.value="-3";
opt2.text="new";
document.getElementById(componentName).options.add(opt2);











if(IdDescArray.length > 0)
{
for(var i=0;i<IdDescArray.length;i++)
{
if(IdDescArray[i].indexOf("--") != -1)
{
returnArray = IdDescArray[i].split("--");
opt=document.createElement("option");
document.getElementById(componentName).options.add(opt);
opt.value=returnArray[0];
opt.innerHTML=returnArray[1];
opt.setAttribute("title", returnArray[0]+" - "+returnArray[1] );
}// end if
} // end for

} //end if




}





function getAjaxResult(url) {
var oXMLHTTP = getHTTPObject();
oXMLHTTP.open("GET", url, false);
oXMLHTTP.send("Firefox");
return oXMLHTTP.responseText;
}
function getHTTPObject() {
var xmlhttp;

if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = "true";
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.ActiveXObject) {
isIE = "true";
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
return xmlhttp;
}

function splitAjaxResponse(result){
var resultArray = [];
if(result.indexOf(" || ")!= -1){
resultArray = result.split(" || ");
//alert(subCatIdDescArray.length);
}
return resultArray;
}

function submitForm(mode)
{

var errMsg="Please provide the data for the following fields\n\n";
if(document.forms[0].deliveryUnit.value == -1) {
errMsg+="DU-Department\n";
}


if(document.forms[0].Project.value == -1){
errMsg+="Project Name\n";
}



// if((document.forms[0].subj.value.length>="0") &&(!validateSpecChars(document.forms[0].subj.value))){
//Modified alert messages by Priya.L on 09-dec-2011 w.r.t ticket-IM482810
//alert("Special characters are not allowed in Comments");
// alert('Kindly avoid special characters like /=+^?&!~*|":<>`\'$#% ');
// }



if(errMsg=="Please provide the data for the following fields\n\n"){
var x=window.confirm("Are you sure you want to Submit");
if(x){
document.forms[0].action = "<%=request.getContextPath()%>/ProjectEditAction.do?mtc=preLoadAR";

document.forms[0].submit();
disableAndShowProgressBar('submitId');
}else
return false;
}else{
alert(errMsg);
return false;
}
}
function validateString(string)
{
var iChars = '0123456789/+ -';
for (var i = 0; i < string.length; i++){
if (iChars.indexOf(string.charAt(i)) == -1){
return false;
}
}
return true;
}
function CompareDates()
{
var str1 = document.getElementById("fromDate").value;
var str2 = document.getElementById("toDate").value;
var mon1 = str1.substring(0,2);
var dt1 = str1.substring(3,5);
var yr1 = str1.substring(6,10);
var mon2 = str2.substring(0,2);
var dt2 = str2.substring(3,5);
var yr2 = str2.substring(6,10);
var date1 = yr1+mon1+dt1;
var date2 = yr2+mon2+dt2;
if(date2<date1)
{
return false;
}
return true;
}






function move_list_items(Project, to_select_list)
{
$("#"+Project+" option:selected").appendTo("#"+to_select_list);
}

//this will move all selected items from source list to destination list
function move_list_items_all(Project, to_select_list)
{
$("#"+Project+" option").appendTo("#"+to_select_list);
}









></SCRIPT>

</head>

<BODY >

<html:form action="/ProjectEditAction.do?mtc=" ><center>
<div id="right_col" style="width:970px">
<table border="0" >
<tr><th> <h1 class="menuhead">Du Project Sales Mapping </h1>




<!--inner table start-->





<table >
<tr>
<td ><fieldset><legend>New Delivery Unit</legend>
<table border="0" >
<tr>
<td >DU-Department:</td><td>
<select name="deliveryUnit" class="select_med" style="height: 19px;width: 200px;"
onchange="makeAjaxCallForProj(this.options[this.selectedIndex].value);">

<option value="-1">Select DU-Department</option>


<% Iterator d_it = deliveryUnitMap.keySet().iterator();
String duId="";
while(d_it.hasNext()){
duId=(String)d_it.next();
%>
<option title="<%=duId%> - <%=deliveryUnitMap.get(duId)%>" value="<%=duId%>"><%=deliveryUnitMap.get(duId)%></option>
<% } %>
</select></td>
</tr>

</tr></table></fieldset>
</td>

</div></table> <table >Assigned Projects         Unassigned Projects <div id="projDiv"> <tr>

<td >
<select id="Project" multiple="multiple" name="Project">

</select>
</td>


<div id="projDiv">
<td >
<select id="to_select_list" multiple="multiple" name="to_select_list">

</select>
</td>

</tr>

<tr>

<td><input id="moveright" type="button" value="Move Right" onclick="move_list_items('from_select_list','to_select_list');" /></td>


<td><input id="moveleft" type="button" value="Move Left" onclick="move_list_items('to_select_list','from_select_list');" /></td>



</tr>
</div>
</table>
<!--inner table end-->


<tr><td>




<table border=0 >
<tr>
<td> <center>
<!-- <input type="button" class="submit" value="Save As Draft" onclick="javascript:submitForm('Draft');"/>   -->
<input type="button" class="submit" value="Submit" onclick="javascript:submitForm('submit');" id="submitId"/></center></td>

</tr>
</table>
</td></tr>
</table>
</div></center>


</html:form>
</BODY>
</html>


now i select department in drop down the department based on active project and inactive project displayed two list box nowl only all project displayed one list box.i want separate two list box active and in active how to ajax url?here only stored var projResult = getAjaxResult(ajaxUrl); all active inactive projects...please anyone solve the issue?
 
 
subject: I want create UI desing in jsp using html and javascript