Adding parameters in the url in struts2 is not being shown - java

I am adding a parameter in the url of the page of I was trying to go but in the generated url it is not being shown, why is that?
Here's my jsp.
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<sj:head ajaxhistory = "true" ajaxcache="true" />
<script>
</script>
</head>
<body>
<h5>Struts Jquery Ajax Integration</h5>
<div id="resultContent"></div>
<noscript>Please Turn On Javascript to make the full use of this site</noscript>
<h4>Choose A task</h4>
<ul>
<s:url value="views/ajaxvalidation.jsp" var="ajaxvalidation" >
<s:param name="menuId" value="1"/>
</s:url>
<li><sj:a targets="resultContent" href="%{ajaxvalidation}">Ajax Validation</sj:a></li>
</ul>
<div>
<h6>Play A Music while You Navigate</h6>
<audio src="x.mp3" controls>Your browser does not support the
audio element.
</audio>
</div>
</body>
</html>
The URL That is being shown is this
http://localhost:8090/HelloStruts2/#resultContent=_sj_action_anchor_860825673resultContent
Where is the menuId parameter that I have added in the url?
I do not know if this will make a difference but I am using this plugin for jquery.
struts2-jquery
Generated HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="/HelloStruts2/struts/js/base/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/HelloStruts2/struts/js/base/jquery.ui.core.min.js?s2j=3.5.0"></script>
<script type="text/javascript" src="/HelloStruts2/struts/js/plugins/jquery.subscribe.min.js"></script>
<script type="text/javascript" src="/HelloStruts2/struts/js/plugins/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="/HelloStruts2/struts/js/struts2/jquery.struts2.min.js?s2j=3.5.0"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.5.0";
jQuery.scriptPath = "/HelloStruts2/struts/";
jQuery.struts2_jquery.ajaxhistory = true;
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js");
jQuery(window).trigger('hashchange');
});
</script>
<link id="jquery_theme_link" rel="stylesheet" href="/HelloStruts2/struts/themes/smoothness/jquery-ui.css?s2j=3.5.0" type="text/css"/>
<script>
</script>
</head>
<body>
<h5>Struts Jquery Ajax Integration By Kyel</h5>
<div id="resultContent"></div>
<noscript>Please Turn On Javascript to make the full use of this site</noscript>
<h4>Choose A task</h4>
<ul>
<li><a id="anchor_2068827505" href="javascript:void(0)">Ajax Validation</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_anchor_2068827505 = {};
options_anchor_2068827505.jqueryaction = "anchor";
options_anchor_2068827505.id = "anchor_2068827505";
options_anchor_2068827505.targets = "resultContent";
options_anchor_2068827505.href = "views/ajaxvalidation.jsp";
options_anchor_2068827505.hrefparameter = "menuId=1";
jQuery.struts2_jquery.bind(jQuery('#anchor_2068827505'),options_anchor_2068827505);
});
</script></li>
<li><a id="anchor_1381525763" href="javascript:void(0)">Thank you JSP</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_anchor_1381525763 = {};
options_anchor_1381525763.jqueryaction = "anchor";
options_anchor_1381525763.id = "anchor_1381525763";
options_anchor_1381525763.targets = "resultContent";
options_anchor_1381525763.href = "views/thankyou.jsp";
options_anchor_1381525763.hrefparameter = "menuId=2";
jQuery.struts2_jquery.bind(jQuery('#anchor_1381525763'),options_anchor_1381525763);
});
</script></li>
</ul>
<div>
<h6>Play A Music while You Navigate</h6>
<audio src="x.mp3" controls>Your browser does not support the
audio element.
</audio>
</div>
</body>

Use action tag and use nested param tag see below code .
<s:url id="login" action="admin/showProfile" var="profileUrl">
<s:param name="user">Rais</s:param>
</s:url>
<a href='<s:property value="#profileUrl"/>'>
<s:property value="#profileUrl"/></a>

Related

Java Rest app problem with printing results in HTML

I am a student and I have to develop a rest app using Java Spring, and the app is an online marks register. I have a StudentController class where I implemented a method in Java to show all the subjects which a student has and the grades related to each subject. I have an array list of hash maps that link a subject with the grades related to it. My problem is that I have to display the results from the Hash Maps from inside the list in the Html and even though I tried some things from the internet, it does not work. Can you please help me? Thank you in advance.
Here is the Java method:
#RequestMapping(value = "student")
public ModelAndView showGrades()
{
ModelAndView modelAndView = new ModelAndView();
List<Subject> subjects = subjectRepo.findAll();
Student student = new Student();
Person person = session.getUser();
ArrayList<HashMap<Subject, ArrayList<Integer> >> grades = new ArrayList<HashMap<Subject, ArrayList<Integer> >>();
student.setName(person.getName());
student.setAccount(person.getAccount());
for(int i=0; i<subjects.size(); i++){
HashMap<Subject, ArrayList<Integer> > mappingGrades = new HashMap<Subject, ArrayList<Integer>>();
Random rand = new Random();
ArrayList<Integer> studentGrades = new ArrayList<Integer>();
studentGrades.add(rand.nextInt(10));
studentGrades.add(rand.nextInt(10));
studentGrades.add(rand.nextInt(10));
mappingGrades.put(subjects.get(i), studentGrades);
student.setGrades(mappingGrades);
grades.add(mappingGrades);
}
modelAndView.addObject("grades", grades);
return modelAndView;
}
And here is the HTML code including my try for printing:
<!DOCTYPE html>
<html>
<head>
<!-- Site made with Mobirise Website Builder v4.11.4, https://mobirise.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v4.11.4, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/logo4.png" type="image/x-icon">
<meta name="description" content="">
<title>Student</title>
<link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/dropdown/css/style.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="header1 cid-rLBDn2JTwv" id="header16-9">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-10 align-center">
<h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style display-1">
GRADES
</h1>
<p class="mbr-text pb-3 mbr-fonts-style display-5">
Subjects and related grades.
</p>
</div>
</div>
</div>
</section>
<section class="engine">bootstrap theme</section>
<section class="services5 cid-rLBDGcNu8T" id="services5-b">
<!---->
<!---->
<!--Overlay-->
<!--Container-->
<div class="container">
<div class="row">
<!--Titles-->
<div class="title pb-5 col-12">
</div>
<!--Card-1-->
<div class="card px-3 col-12">
<div class="card-wrapper media-container-row media-container-row">
<div class="card-box">
<div class="top-line pb-3">
<h4 class="card-title mbr-fonts-style display-5">
<table>
<tbody>
<form action="student" method="showGrades">
<div th:each="map : ${grades}">
<div th:each="mapEntry : ${map}">
<span th:text="${mapEntry.key}"></span> =
<span th:text="${mapEntry.value}"></span>
</div>
</div>
</form>
</tbody>
</table>
</h4>
<p class="mbr-text cost mbr-fonts-style m-0 display-5">
$400
</p>
</div>
<div class="bottom-line">
</div>
</div>
</div>
</div>
<!--Card-2-->
<!--Card-3-->
<!--Card-4-->
<!--Card-5-->
<!--Card-6-->
<!--Card-7-->
<!--Card-8-->
<!--Card-9-->
<!--Card-10-->
<!--Card-11-->
<!--Card-12-->
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/popper/popper.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/smoothscroll/smooth-scroll.js"></script>
<script src="assets/dropdown/js/nav-dropdown.js"></script>
<script src="assets/dropdown/js/navbar-dropdown.js"></script>
<script src="assets/touchswipe/jquery.touch-swipe.min.js"></script>
<script src="assets/theme/js/script.js"></script>
</body>
</html>
In the code you supplied the value of mapEntry.key is a Subject object and the value of mapEntry.value is an ArrayList. You need to tell thymeleaf how to output those objects. If Subject has a proper toString method it will work as you expect but an ArrayList will not print properly. You need to use another nested each statement or you need to join it into a single string.

Unable to link a column in datatables

<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Populating JSP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').dataTable( {
serverSide: true,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(2)', nRow).html('<a href="http://www.google.com' + aData[2] + '">' +
aData[2] + '</a>');
return nRow;
},
ajax : {
url: 'hello/data1',
dataType:'json',
type: 'POST'
}
}
);
});
</script>
</body>
</html>
I have 2 coulmns, ID and Salary. I am linking the salary to google.com, for that I am using fnRowCallback function. But that doesn't seem to work. Where do you think I am going wrong. The jsp is shown above.
Use custom column definition columnDefs to alter column rendering.
$('#example').dataTable( {
serverSide: true,
"aoColumnDefs" : [
{
"mData": "name",
"sClass": "dataTable-user-list-name",
"fnRender": function (oObj) {
return '<a href="/#/' + oObj.aData['detailsUrl'] + '">oObj.aData['name']<a>'
}],
ajax : {
url: 'hello/data1',
dataType:'json',
type: 'POST'
}
}

JSON data is not visible in jqgrid

I am quite new with JSON. I want to show the java object data as JSON data. I have done some code but it is showing only the grid, not the grid data.
My jsp page looks like this:
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jeeni Software - jQuery Ajax Data Grid Example</title>
<c:set var="baseURL" value="${pageContext.request.contextPath}"/>
<script type="text/javascript" src="${baseURL}/js/jquery.min.js"></script>
<script type="text/javascript" src="${baseURL}/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${baseURL}/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/redmond/jquery-ui.css">
<link rel="stylesheet" href="css/redmond/jquery.ui.theme.css">
<link rel="stylesheet" href="css/jqgrid/ui.jqgrid.css">
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> -->
<!-- <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> -->
<!-- <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> -->
<script>
$(document).ready(function() {
setupGrid();
attachSendDataEvent();
attachDeleteButton();
});
function attachSendDataEvent(){
$("#sendData").click(function(){
var data = "firstName=" + $("#firstName").val() + "&" +
"lastName=" + $("#lastName").val() + "&" +
"address=" + $("#address").val() + "&" +
"postcode=" + $("#postcode").val();
$.post("data/person/put",
data,
dataSentOK
);
});
return false;
}
function attachDeleteButton(){
$("#deleteBtn").click(function(){
var grid = jQuery("#dataTable").jqGrid();
var rowNum = grid.getGridParam('selrow');
if(rowNum){
var person = grid.getRowData(rowNum);
var data = "perId=" + person.id;
$.post("data/person/delete",
data,
dataSentOK
);
}
});
}
function dataSentOK(){
jQuery("#dataTable").jqGrid().trigger("reloadGrid");
}
function setupGrid(){
jQuery("#dataTable").jqGrid({
url: "data/person/get",
datatype: "json",
loadonce : false,
jsonReader: {root : "rows", repeatitems: false, id: "id"},
colNames:['ID','First Name','Last Name', 'Address', 'Postcode'],
colModel:[
{name:'id',index:'id', width:20},
{name:'firstName',index:'firstName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'address',index:'address', width:380},
{name:'postcode',index:'postcode', width:100}
],
rowNum:4,
rowList:[5,10,20,30],
height:200,
pager: "#pagingDiv",
viewrecords: true,
caption: "Names and Addresses"
}).navGrid('#pager', {edit:false,add:false,del:false, search: false});
}
</script>
</head>
<body>
<div class="centreDiv">
<div class="heading"><h1>Jeeni Software - jQuery Ajax Data Grid Example</h1></div>
<div>
<div style="height:170px;">
<div class="form">
<div class="padding">
<label>First Name:</label> <input id="firstName"/><br/>
<label>Last Name:</label> <input id="lastName"/><br/>
<label>Address:</label> <input id="address" size="40"><br/>
<label>Postcode:</label> <input id="postcode"/><br/>
<button id="sendData">Send</button>
</div>
</div>
</div>
<!-- jqGrid will be injected into this DIV-->
<h2>jqGrid Data Table</h2>
<div>
<table id="dataTable"></table>
<div id="pagingDiv"></div>
<button id="deleteBtn">Delete Row</button>
</div>
</div>
</div>
</body>
</html>
And the spring controller like this:
#RequestMapping(value="get", method = RequestMethod.GET)
#ResponseBody
public JqGridData<Person> getPeople(#RequestParam("page") int page,
#RequestParam("rows") int rows,
#RequestParam("sidx") String sortColumnId,
#RequestParam("sord") String sortDirection){
int totalNumberOfPages = GridUtils.getTotalNumberOfPages(people, rows);
int currentPageNumber = GridUtils.getCurrentPageNumber(people, page, rows);
int totalNumberOfRecords = people.size();
List<Person> pageData = GridUtils.getDataForPage(people, page, rows);
JqGridData<Person> gridData = new JqGridData<Person>(totalNumberOfPages, currentPageNumber, totalNumberOfRecords, pageData);
return gridData;
}
Can anybody please tell me what's wrong with this code?

A Simple AJAX with JSP example

I am trying to learn AJAX with JSP and I have written the following code. This does not seem to be working. Kindly help:
This is my configuration_page.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var config=document.getElementById('configselect').value;
var url="get_configuration.jsp";
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2 align="center">Saved Configurations</h2>
Choose a configuration to run:
<select name="configselect" width="10">
<option selected value="select">select</option>
<option value="Config1">config1</option>
<option value="Config2">config2</option>
<option value="Config3">config3</option>
</select>
<button type="button" onclick='loadXMLDoc()'> Submit </button>
<div id="myDiv">
<h4>Get data here</h4>
</div>
</body>
</html>
This is my get_configuration.jsp which I am trying to access from the AJAX code above:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h4>Mee..</h4>
</body>
</html>
I have used jQuery AJAX to make AJAX requests.
Check the following code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#call').click(function ()
{
$.ajax({
type: "post",
url: "testme", //this is my servlet
data: "input=" +$('#ip').val()+"&output="+$('#op').val(),
success: function(msg){
$('#output').append(msg);
}
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
input:<input id="ip" type="text" name="" value="" /><br></br>
output:<input id="op" type="text" name="" value="" /><br></br>
<input type="button" value="Call Servlet" name="Call Servlet" id="call"/>
<div id="output"></div>
</body>
You are doing mistake in "configuration_page.jsp" file.
here in this file , function loadXMLDoc() 's line number 2 should be like this:
var config=document.getElementsByName('configselect').value;
because you have declared only the name attribute in your <select> tag. So you should get this element by name.
After correcting this, it will run without any JavaScript error
loadXMLDoc JS function should return false, otherwise it will result in postback.

Use JQuery SWF plugin in JSP

I used an example script of how to load an SWF file with the JQuery SWF plugin (http://jquery.thewikies.com/swfobject/examples). I am trying to get the plugin to work in a JSP. It appears to work in FireFox and Chrome but not in IE8.
Can anyone see any obvious issues? Thanks in advance.
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
</head>
<script type="text/javascript" src="js/jquery.swfobject.1-1-1.js"></script>
<body>
<script type="text/javascript">
var bar_chart = $.flash.create (
{
swf: 'flash/open-flash-chart.swf',
width: 350,
height: 260,
wmode: 'transparent',
play: true,
flashvars: {
"get-data": "getChart1Data"
}
}
);
function getChart1Data()
{
return JSON.stringify(${chart1Data});
};
function ofc_ready()
{
/**/
};
$(document).ready(
function() {
$('#bar_chart').html(bar_chart);
}
);
</script>
<tr>
<td colspan="2">
<table>
<tr>
<td>
<div id="bar_chart"></div>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
Your HTML is syntactically invalid. The browser behaviour is unpredictable.
This one is syntactically valid. Give it a try.
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Insert your title</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.swfobject.1-1-1.js"></script>
<script type="text/javascript">
var bar_chart = $.flash.create ({
swf: 'flash/open-flash-chart.swf',
width: 350,
height: 260,
wmode: 'transparent',
play: true,
flashvars: {
"get-data": "getChart1Data"
}
});
function getChart1Data() {
return JSON.stringify(${chart1Data});
}
function ofc_ready() {
/**/
}
$(document).ready(function() {
$('#bar_chart').html(bar_chart);
});
</script>
</head>
<body>
<div id="bar_chart"></div>
</body>
</html>
PS: I removed the table since it's incomplete and only adds noise to the demo.
All you have to do is change your swfobject version to latest SWFObject 2.2
<script type="text/javascript" src="js/jquery.swfobject.1-1-1.js"></script>
This will fix ie issue
try
flashMovie = null;
$(document).ready(
function () {
flashMovie = $('#bar_chart');
flashMovie.flash(
{
swf: 'flash/open-flash-chart.swf',
width: 350,
height: 260,
wmode: 'transparent',
play: true,
flashvars: { "get-data": "getChart1Data" }
}
);
}
);
function getChart1Data() { return JSON.stringify(${chart1Data}); };

Categories

Resources