Datatable 1.10.9 not making ajax call while using dynamic columns and data by jstl for each loop . getting ajax Json error.
my code is : top line of jsp
output getting :not getting data in table it shows only column names but nothing in return of ajax response
<%# page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<fmt:setLocale value="en" scope="session" />
<fmt:setBundle basename="ApplicationResources" scope="session" />
some other datatable refrences here .....
<script language="JavaScript">
$(document).ready( function () {
var table;
table= $('#example).DataTable( {
"processing": true,
dom: 'BRlfrtip',
"ajax": {
"url": "/example.so",
"type": "GET"
},
"columns": [
<c:forEach items="${TableFields}" var="field">
{"title":"<fmt:message key="label.${field.key}" />", "data":"${field.key}", "name":"${field.key}" },
] </c:forEach>
} );
</script>
html code :
</head>
<body>
<fmt:setLocale value="en" scope="session" />
<fmt:setBundle basename="ApplicationResources" scope="session" />
<h2><font color="#4B0082">List All Data</font></h2>
<div id="gridContainer">
<div id="gridContent" class="blockContent">
<div style="width: auto; height: 750px; overflow-x: auto; overflow-y: auto;">
<table id="example" class="display " cellspacing="0" width="100%" >
<thead></thead>
<tfoot>
</tfoot>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
using spring mvc ,controller has list method .
Related
This is my First JSP Page
I want to create a Multiple checkbox Filter page using Ajax my problem is that when i checked more than one checkbox it can replace previous checkbox value i attached 3 files in this...so please give me solution for this problem Thankyou very much.
<%--
Document : Filter
Created on : Jan 14, 2018, 3:16:01 PM
Author : Lenovo
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page language="java" %>
<%#page import="java.sql.*" %>
<%#page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Bootstrap/bootstrap.css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Filter</title>
<style>
header
{
background-color: lightblue;
height: 100px;
}
li
{
list-style-type: none;
}
#remove
{
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<header>
</header>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="thumbnail" style="padding:20px;">
<h4>BRAND</h4>
<ul>
<%
String bname=null;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
Statement st=con.createStatement();
ResultSet rs;
rs=st.executeQuery("SELECT * FROM brands ORDER BY b_name");
int a=1;
while(rs.next())
{
bname=rs.getString("b_name");
%>
<li><input class="brand" id="brand<%=a++%>" type="checkbox" name="chk" value="<%=bname%>" /><%=bname%></li>
<%
}
}
catch(Exception e)
{
out.println(e);
}
%>
</ul>
<hr>
<h4>RAM</h4>
<ul>
<%
String ram=null;
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
Statement st=con.createStatement();
ResultSet rs;
rs=st.executeQuery("SELECT * FROM ram ORDER BY ram");
while(rs.next())
{
ram=rs.getString("ram");
%>
<li><input type="checkbox" name="chk" value="<%=ram%>" /><%=ram%></li>
<%
}
}
catch(Exception e)
{
out.println(e);
}
%>
</ul>
<hr>
<h4>PRICE</h4>
<ul>
<li><input id="price" type="range" min="3000" max="100000" step="1000" value="3000" /></li>
<div id="showPrice">
</div>
</ul>
</div>
</div>
<div class="col-sm-9" id="load">
<span id="remove">
Clear filter <i class="fa fa-times"></i>
</span>
<br><br>
<div id="filter">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="FilterJS.js"></script>
</body>
</html>
This is my Jquery & Ajax page
$(document).ready(function()
{
$('.brand').on('change',function()
{
if($(this).is(":checked"))
{
var brand=$(this).val();
$.ajax({
url:"FilterAjaxDB1.jsp",
method:"post",
data:{brand:brand},
success:function(data)
{
$('#filter').html(data);
$('#remove').css({"border-radius":"40px"}).show().fadeIn('fast');
$('#remove').click(function ()
{
$('.brand').prop("checked",false);
});
}
});
}
else
{
$('#filter').html("Not");
$('#remove').hide().fadeOut('fast');
}
});
});
This is my AjaxDB file
<%--
Document : FilterAjaxDB1
Created on : Jan 14, 2018, 5:09:48 PM
Author : Lenovo
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page language="java" %>
<%#page import="java.util.*" %>
<%#page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Bootstrap/bootstrap.css"/>
<title>JSP Page</title>
</head>
<body>
<div class="thumbnail">
<%
String bname=request.getParameter("brand");
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
Statement st=con.createStatement();
ResultSet rs;
rs=st.executeQuery("SELECT * FROM mobiles WHERE b_name='"+bname+"'");
while(rs.next())
{
String name=rs.getString("m_name");
String ram=rs.getString("ram");
int p=rs.getInt("price");
out.print(name+"<br>");
out.print(ram+"<br>");
out.print(p+"<br>");
}
}
catch(Exception e)
{
out.print(e);
}
%>
</div>
<script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
</body>
</html>
I want to create a Multiple checkbox Filter page using Ajax my problem is that when i checked more than one checkbox it can replace previous checkbox value
there is something you should know,in the Multiple checkbox,if you choose more than one,you will only get one value by checkbox.value.
If you want to get all the values,you have to use for loop to check all the checkbox if the one you are checking are checked or not
I am defining a variable in scriptlet to get value from request headers, then we are using that variable c:set to set to variable to use in c:out .But i am not getting any value c:set variable, as a result c:out is giving result as ''.
please find the code snippet below and guide me if i am missing anything.
Code in jsp:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DM</title>
<SCRIPT Language="JavaScript">
function submitform()
{
this.LoginForm.submit();
}
</SCRIPT>
</head>
<body onload="submitform()">
<%
String userName= request.getHeader("IV-USER");
System.out.println("name "+userName);
if (userName == null || userName.length()==0){
response.setHeader("IV-USER",userName);
response.sendRedirect("ULM.jsp");
}
%>
<c:set var="uName" value="<%=userName%>"/>
<p>Welcome1 ${uName}</p>
<form name="LoginForm" action="/ICDDMContent/STGDM.html" method="post">
<input type="hidden" name="UserId" value='<c:out value="${uName}"/>'/>
<!--
<input type="hidden" name="UserId" value="<%=userName%>" >
-->
<input type="hidden" name="Token" value="dummy">
<p>Welcome1 <c:out value="${uName}"/></p>
</form>
</body>
</html>
String userName= request.getHeader("IV-USER");
System.out.println("name "+userName);
if (userName == null || userName.length()==0){
response.setHeader("IV-USER",userName);
response.sendRedirect("ULM.jsp");
}
Is redundant piece of code, if userName is empty, you will just assign empty value to IV-USER header, if "ULM.jsp" is the same page as you've attached, and that redirect is just to set variable - here is your problem
I need to load an aspx page that returns a string of text using jsonp since it is a cross domain call. The target page will be loaded inside a div tag and displayed as a modal window on the source page.
I am using a test form to pass 3 parameters that the target page expects, a submit button, very simple.
When I submit the page, I get an error message: Uncaught SyntaxError: Unexpected token <
When I click on the error I see the error points to this line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is the first time I am working with json/ jsonp, and I am not sure how to fix this error. Is it possible to get some help to figure this out?
My invoking page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#btnSubmit").click(function () {
$.ajax({
type: "GET",
dataType: "jsonp",
crossDomain: true,
url: "http://localhost:81/order-error.aspx",
contentType: "application/json; charset=utf-8",
data: { 'order': $("#order").val(), 'site': $("#site").val(), 'env': $("#env").val() },
success: function (r) {
$("#dialog").html(r.d);
$("#dialog").dialog("open");
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="order" value="" /></td>
<td><input type="text" id="site" value="" /></td>
<td><input type="text" id="env" value="" /></td>
</tr>
<tr>
<td><input type="button" id="btnSubmit" value="Submit" /></td>
</tr>
</table>
<div id="dialog" style="display: none">
</div>
</body>
</html>
My target/ response page (order-error.aspx):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#content {
width: 100%;
display: inline-block
}
.label {
position:relative;
float:left;
top:0;
margin-right:5px;
}
</style>
</head>
<body>
<div id="content">
<div class="order">
<div class="label">Web Order#: </div>
<div id="orderno" runat="server" class="value"></div>
</div>
<div class="error">
<div class="label">Message: </div>
<div class="value">
<asp:Label ID="lblOrderError" runat="server" Visible="false"></asp:Label></div>
</div>
</div>
</body>
</html>
And the code behind:
Partial Class order_error
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim siteKey As String = String.Empty
Dim orderId As String = String.Empty
siteKey = Request.QueryString("site").Trim
orderId = Request.QueryString("order").Trim
Me.lblOrderError.Text = Functions.GetAXErrorMessage(siteKey, orderId)
Me.orderno.InnerText = orderId.Trim
lblOrderError.Visible = True
End Sub
End Class
The output html of order-error.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="content">
<div class="order">
<div class="label">Web Order#: </div>
<div id="orderno" class="value">A1G759</div>
</div>
<div class="error">
<div class="label">Message: </div>
<div class="value">
<span id="lblOrderError"><Fault xmlns="http://schemas.microsoft.com/dynamics/2008/01/documents/Fault">
<Code />
<Reason>
<Text xml:lang="EN-US">User is not authorized for this Endpoint.</Text>
</Reason>
</Fault></span></div>
</div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"757708942b1d4af892b199f3590d85f5"}
</script>
<script type="text/javascript" src="http://localhost:63737/17a3dfffdc8f48ad9496d260bd296120/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
The error is clearly caused by your AJAX call return HTML instead of JSON.
In the success handler you have $("#dialog").html(r.d);. Here you try to parse the output of the call (r) to an object (r.d forces this), which fails for obvious reasons.
You should return JSON from your AJAX method, possibly using an HTTP handler or WebAPI.
<%# 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome</title>
<script type="text/javascript">
$(document).ready(function()
{
if()==null)
{
}
}
);
</script>
</head>
<center>
<%# include file="Head.jsp" %>
</center>
<body>
<div id="tempDiv">
<h1>Message : ${message}</h1>
<h1>Author : ${author}</h1>
</div>
<a href='<c:url value="/j_spring_security_logout" />' > Logout</a>
<div align="center">
<table class="table1">
<tr>
<td align="center" width="800" height="400"><font size="10">
Welcome </font></td>
</tr>
</table>
</div>
</body>
</html>
How to hide div tag when $message value not come.
i want to hide my div tag. in jsp page. when user click on home page.
i tried here javascript code but did not get any answer to how to user jsp element in javascript.
or any code which usefull to hide div tag in my case do suggest. thank u....
Try this
<c:if test="${empty message}">
</c:if>
<c:if test="${not empty message}">
<div id="tempDiv">
<h1>Message : ${message}</h1>
<h1>Author : ${author}</h1>
</div>
</c:if>
You need to check if the variable is empty and depending on that print out on the html page...hope it works
or another way
<c:choose>
<c:when test="${empty message}">
</c:when>
<c:otherwise>
<div id="tempDiv">
<h1>Message : ${message}</h1>
<h1>Author : ${author}</h1>
</div>
</c:otherwise>
</c:choose>
I'm trying to display set of data using "jq grid". For that I used below code, But it's showing only empty rows without data.Can anyone figure-out what is wrong in this code ?
I'm getting data by using ajax.So the "response" will get a data like this
{ID:"id1", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}!{ID:"id3", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}
After get data, split it and adding to an array.Then trying to display it.
This is .JSP file
<%# 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">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="grid/css/ui.jqgrid.css" />
<script src="grid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Scheduled SMS</title>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
datatype: "local",
colNames:['ID','Message', 'Date','Time','status'],
colModel :[
{name:'ID', index:'ID', width:60},
{name:'Message', index:'Message', width:200},
{name:'Date', index:'Date', width:90, align:'right'},
{name:'Time', index:'Time', width:90, align:'right'},
{name:'status', index:'status', width:80, align:'right'}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
viewrecords: true,
gridview: true,
caption: 'Single SMS'
});
$.ajax({
type : "GET",
url : "ScheduledClass",
data : {
type : "getSingleScheduledMsg"
}
})
.success(function(response,status){
tableResult = response;
var tableData = [];
tableData=tableResult.split("!");
for(var i=0;i<tableData.length;i++)
jQuery("#list").jqGrid('addRowData',i+1,tableData[i]);
})
.error(
function() {//error !!!!!
});
});
</script>
</head>
<body>
<div id="wrapper" style="height: 100%;">
<div id="content_box" style="width: 600px;">
<div class="ui-widget">
<div class="ui-widget-header">Edit Scheduled SMS</div>
<div>
<div class="ui-widget-content">
<div style="padding: 10px 10px 10px 10px;">
<Form name="EditScheduledSMS" method="post"
id="EditScheduledSMS style="display: inline;">
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
......//closing tags...........
The final picture is like this:
tableData[i] should be an object you have it as a string, if you convert your substrings to json strings you can try JSON.parse to change it into an object.
Also if your using ajax to populate the grid, why use local as the datatype, jqgrid already uses ajax to populate the grid if you specify a url and a different data type.