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}); };
Related
<%# 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'
}
}
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?
I am struggling with using the JSP wrapper in Kendo UI.
I checked their forum and found nothing. I checked stackoverflow and found nothing. I read through the APIs but could not find an answer to my issue.
The call to
url: "CustomerAjaxServlet?str=The R",
returns the following json object:
[
{"id":0,"customerId":"RO113","name":"The Robe Gallery Inc."},
{"id":1,"customerId":"TH204","name":"The Robe Collection"}
]
The grid is being rendered with the correct column headers and the paging is coming back
1 of 10 121 Items. But there is no data.
121 is the character count of the json object.
If I change the call the ajax servlet, the number of items changes too along with the 1 of ...
<%# page language="java" %>
<%# taglib uri="/WEB-INF/tlds/esc.tld" prefix="esc" %>
<%# taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>
<%# taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %>
<%# taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %>
<%#taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%# page import="org.apache.struts.taglib.TagUtils" %>
<% SessionContext context = SessionContext.getSessionContext(request); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Detail template</title>
<meta http-equiv="Content-Type" content='text/html; charset=us-ascii'>
<meta name='author' content=Test'>
<link href="common/js/kendo/examples/content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="common/js/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="common/js/kendo/styles/kendo.default.min.css" rel="stylesheet">
<script src="common/js/kendo/js/jquery.min.js"></script>
<script src="common/js/kendo/js/kendo.web.min.js"></script>
<script src="common/js/kendo/content/shared/js/console.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" class="k-content">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
<div>
<div class='customer-details'>
<ul>
<li><label>id:</label>#= id #</li>
<li><label>name:</label>#= name #</li>
<li><label>customerId:</label>#= customerId #</li>
</ul>
</div>
</div>
</div>
</script>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
$.ajax( {
url: "CustomerAjaxServlet?str=The R",
data: options.data, success: function(result) {
options.success(result);
//alert(result);
}
});
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true
},
height: 450,
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "id",
title: "Id"
},
{
field: "name",
title: "Name"
},
{
field: "customerId",
title: "Customer Id"
}
]
});
});
</script>
<style scoped="scoped">
.customer-details ul
{
list-style:none;
font-style:italic;
margin-bottom: 20px;
}
.customer-details label
{
display:inline-block;
width:90px;
font-style:normal;
font-weight:bold;
}
</style>
</div>
</body>
</html>
Your code runs fine. Did you check the contentType of the json object returned? It should be "application/json".
I run your code with the following CustomerAjaxServlet
<%# page contentType="application/json;charset=UTF-8" language="java" %>
<%
out.println("[" +
"{\"id\":0,\"customerId\":\"RO113\",\"name\":\"The Robe Gallery Inc.\"}," +
"{\"id\":1,\"customerId\":\"TH204\",\"name\":\"The Robe Collection\"}" +
"]");
%>
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>
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.