File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes Struts and the fly likes calling the struts action on jquery button click Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "calling the struts action on jquery button click" Watch "calling the struts action on jquery button click" New topic
Author

calling the struts action on jquery button click

umesh annegirikar
Greenhorn

Joined: May 09, 2011
Posts: 24
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>
Nitin Surana
Ranch Hand

Joined: Jan 21, 2011
Posts: 129

Its best to use Struts2 Jquery plugin, for using jquery with Struts2.

Large number of struts2 jquery plugin examples can be found here :

http://www.weinfreund.de/struts2-jquery-showcase/index.action
http://www.onlinexamples.com/searchaction.action?idlabels=21&label=struts2jquery

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: calling the struts action on jquery button click
 
Similar Threads
<spring:nestedPath> and <spring:bind>
How to get onclick value from button which is there in hidden div?
Getting search results on same search page
Need to Hide Table inside div:Code is Working Fine in FireFox but Not in IE..Please Help
org.apache.jasper.JasperException: javax.servlet.ServletException: javax.servlet.jsp.JspException