Hello
In my project i have created the jquery popup panel in that i want to call the
struts action.
thereafter i have created control textfields and button and on button click the record saved in the database. Please tell me how to call the struts action in jquery.
<%@ 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">
<%@page import="java.util.ArrayList"%>
<%@page import="com.udhc.model.City"%>
<%@page import="com.udhc.model.Country"%>
<%@page import="com.udhc.model.State"%>
<%@page import="com.udhc.config.ApplicationConstant"%>
<%@page import="com.udhc.model.User"%>
<%@page import="com.udhc.model.Professional"%>
<%@page import="org.apache.struts.Globals"%>
<
jsp:include page="Header.jsp"></jsp:include>
<style type="text/css">
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
.Level2HeadingStyle
{
font-weight: bold;
font-size: 15pt;
color: #2D84A7;
line-height: 20px;
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
//JQuery function for opening the popup box by clicking on the add button.
$(document).ready(function ()
{
$("#btnAdd").click(function (e)
{
ShowDialog(false);
e.preventDefault();
});
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e)
{
HideDialog();
e.preventDefault();
});
//JQuery function for opening popup box by clikcing on update button.
$("#btnUpdate").click(function (e)
{
ShowUpdateDialog(false);
e.preventDefault();
});
$("#btnClose1").click(function (e)
{
HideUpdateDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e)
{
//var brand = $("#brands input:radio:checked").val();
//$("#output").html("<b>Country</b>" + brand);
HideUpdateDialog();
e.preventDefault();
var val = [];
$(':checkbox:checked').each(function(i)
{
val[i] = $(this).val();
});
});
});
//JQuery Function for showing the dialog by clicking on the Add country
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function (e)
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
//Jquery function for showing the dialog by clicking on the Update Country button.
function getUpdateId()
{
var counter = 0,
i = 0,
url = '',
input_obj = document.getElementsByTagName('input');
for (i = 0; i < input_obj.length; i++)
{
if (input_obj[i].type =='checkbox' && input_obj[i].checked == true)
{
counter++;
}
// display url
string or message if there is no checked checkboxes
}
if (counter == 1)
{
url = input_obj[i].value;
alert("Country ID " +url);
}
else
{
alert('Please select only one country');
}
}
function ShowUpdateDialog(modal)
{
$("#overlay1").show();
$("#dialog1").fadeIn(300);
if (modal)
{
$("#overlay1").unbind("click");
}
else
{
$("#overlay1").click(function (e)
{
HideUpdateDialog();
});
}
}
function HideUpdateDialog()
{
$("#overlay1").hide();
$("#dialog1").fadeOut(300);
}
</script>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<script type="text/javascript">
function checkAll()
{
if(document.forms[0].master.checked==true)
{
for(var i=0;i<document.forms[0].choices.length;i++)
{
document.forms[0].choices[i].checked=true;
}
}
else
{
for(var i=0;i<document.forms[0].choices.length;i++)
{
document.forms[0].choices[i].checked=false;
}
}
}
</script>
<!-- <script>
function AddCountry()
{
var url="/udhc/CountryManage.do?nextStep=addCountry";
if(window.XMLHttpRequest)
{
request.onreadystatechange=callMessage();
try
{
request.open("POST",url,true);
}
catch (e)
{
// TODO: handle exception
alert("Unable to connect");
}
}
}
function callMessage()
{
alert("Record saved");
}
</script>-->
<%
Professional professional=(Professional)request.getAttribute(ApplicationConstant.UDHC_USER_MODEL);
%>
<input type="hidden" name="countryId"></input>
<bean:define id="professionalModel" name="UDHC_USER_MODEL" scope="session"></bean:define>
<div><a href="Admin_MasterManagement.jsp">Back</a></div>
<logic:iterate id="countryList" name="COUNTRY_LIST">
<div id="output"></div>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Add Country</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country Name</b> <input type="text" value="" style="padding-right 20px;" maxlength="10"/>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country Shortname</b> <input type="text" value="" maxlength="10"/>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country ISOCode</b> <input type="text" value="" maxlength="10"/>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country Currency</b> <input type="text" value="" maxlength="10"/>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Save" onclick="javascript:AddCountry();"/>
</td>
</tr>
</table>
</div>
</logic:iterate>
<logic:iterate id="countryList" name="COUNTRY_LIST">
<div id="output1"></div>
<div id="overlay1" class="web_dialog_overlay"></div>
<div id="dialog1" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Update Country</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose1">Close</a>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country Name</b> <input type="text" value="<bean:write name="countryList" property="name"/>" style="padding-right 20px;" maxlength="10"/>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country Shortname</b> <input type="text" value="<bean:write name="countryList" property="shortName"/>" maxlength="10"/>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country ISOCode</b> <input type="text" value="<bean:write name="countryList" property="isoCode"/>" maxlength="10"/>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Country Currency</b> <input type="text" value="<bean:write name="countryList" property="currency"/>" maxlength="10"/>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Update" onclick="javascript:getUpdateId();"/>
</td>
</tr>
</table>
</div>
</logic:iterate>
<table width="100%" class="back_img" height="300">
<logic:messagesPresent message="true">
<tr>
<td valign="top" style="height: 20px;">
<html:messages id="message" message="true">
<div class="success">
<bean:write name="message"/>
</div>
</html:messages>
</td>
</tr>
</logic:messagesPresent>
<tr valign="top">
<td valign="top" align="center">
<logic:notEmpty name="COUNTRY_LIST">
<div style="height: 480px; overflow: auto;">
<table id="countryTable" width="80%" class="border" style="margin-top: 60px;">
<tr valign="top">
<td align="left" valign="top" colspan="8"><b><u>List Of Countries : </u></b></td>
</tr>
<tr class="background1" valign="top" style="font-weight: bold;">
<td width="5" align="center">Sr.No</td>
<td width="30" align="center">Name</td>
<td width="10" align="center">Short Name</td>
<td width="20" align="center">ISO Code</td>
<td width="10" align="center">Currency</td>
<!-- <td width="5" align="center"><input type="checkbox" value="unchecked" id="chk1" name="master" onchange="javascript:checkAll();"/></td>-->
<td width="5" align="center">Select</td>
</tr>
<% int i=0; %>
<logic:iterate id="countryList" name="COUNTRY_LIST">
<tr>
<td width="5" align="center"><%=++i%></td>
<td width="10" align="center"><bean:write name="countryList" property="name"/></td>
<td width="20" align="left"><bean:write name="countryList" property="shortName"/></td>
<td width="10" align="left"><bean:write name="countryList" property="isoCode"/></td>
<td width="10" align="center"><bean:write name="countryList" property="currency"/></td>
<td width="5" align="center"><input type="checkbox" value="<bean:write name="countryList" property="countryId"/>" id="chk2" name="choices" /></td>
</tr>
</logic:iterate>
<tr>
<td><input type="button" value="Add" id="btnAdd" /></td>
<td><input type="button" value="Update" id="btnUpdate"/></td>
</tr>
</table>
<table>
</table>
</div>
</logic:notEmpty>
</td>
</tr>
</table>
<jsp:include page="Footer.jsp"></jsp:include>
