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.
Related
I'm working on a standalone application and I'm trying to pass a string which is an output of change event, to the spring controller using the code below
HTML CODE
<!DOCTYPE HTML>
<html xmnls:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>ADD NEW BILL</title>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$("#Mandy_Name").autocomplete({
source: "autocomplete",
minLength: 3
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#Mandy_Name").change(function(){
var changed = $(this).val();
console.log(changed);
$.ajax({
type : "POST",
dataType : 'json',
url : "mandyname",
data: {name:changed},
success: function(data) {
console.log(data);
return false;
}
});
});
});
</script>
</head>
<body>
<div class="container">
<hr>
<p class="h4 mb-4">SAVE NEW PURCHASE BILL</p>
<form action="#" th:action="#{/savePurchase}"
th:object="${purchase}" method="post">
<!-- add a hidden field to handle update -->
<!-- <input type="hidden" th:field="*{idPurchaseDetails}"> -->
<input type="hidden" th:field="*{ID}">
MANDY NAME : <input id="Mandy_Name" type="text" th:field="*{mandyName}"
class="form-control mb-4 col-4" placeholder="Mandy Name">
GSTIN : <input type="text" th:field="*{gstin}"
class="form-control mb-4 col-4" value = gst() placeholder="GSTIN">
<button type="submit" class="btn btn-info col-2">SAVE</button>
</form>
<br><br>
<a th:href="#{/purchaselist}">BACK TO PURCHASE LIST</a>
</div>
</body>
</html>
controller code
#RequestMapping(value = "mandyName", method = RequestMethod.POST)
public ModelAndView getSearchResultViaAjax(#RequestBody Purchase purchase, HttpServletRequest request,
HttpServletResponse response)
{
ModelAndView mv = new ModelAndView();
String name = purchase.getMandyName();
System.out.println(name);
return mv;
}
I'm getting an error "Failed to load resource: the server responded with a status of 404 ()" in the browser console.
Help me to pass the string "changed" to the controller.
I'm using these dependencies
jquery from "org.webjars" ,
spring-boot-starter-actuator ,
spring-boot-starter-data-jpa ,
spring-boot-starter-web ,
spring-boot-starter-data-rest ,
spring-boot-starter-thymeleaf ,
spring-boot-devtools ,
spring-boot-starter-json ,
mysql-connector-java ,
spring-boot-starter-test ,
junit-vintage-engine ,
spring-boot-maven-plugin
Should I be using any other dependencies ??
The HTTP Status 404 means that the URL provided, cannot be found on the server.
I see that you make the Ajax call with an incorrect URL. Change it to the correct one depending on your Spring App and port.
Normally it should be under: http://localhost:8080/mandyName. But this you have to check and examine.
Sample JS code:
$(document).ready(function(){
$("#Mandy_Name").change(function(){
var changed = $(this).val();
console.log(changed);
$.ajax({
type : "POST",
dataType : 'json',
url : "http://localhost:8080/mandyName", // ~~ HERE ~~
data: {name:changed},
success: function(data) {
console.log(data);
return false;
}
});
});
});
I am new in PHP and JavaScript, i need to create a pie chart using JSON data which will be get from the URL. The JSON data is :
[
{"Domain":"Artificial Intelligence","Count":"46"},
{"Domain":"Data Architecture","Count":"21"},
{"Domain":"Data Science","Count":"50"},
]
The code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js">
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn- na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<?php
# Reading JSN Data from URLS
$jsn_data =
file_get_contents("http://localhost:9080/Badges/reporting/badge_json.php");
<div id="chart"></div>
<script type="text/javascript">
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: result,
dataValue: "count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
});
<script>
</body>
s</html>
But this code does not work. please tell me how do this ?
dataLabel: "Badge_SubDomain" doesn't exist in your data source.
Maybe try something like ...
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: result,
dataValue: "count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
});
Fix these:
JSON property Count is a string, not an integer
The code is broken, it needs to be fixed
The variable result is not defined anywhere in the <script> tag
The JavaScript snippet is inside <?php/> tag, move it outside
here's the fixed code:
index.php:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
$.ajax({type:"GET", url: "badge_json.php", success: function(data) {
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: data,
dataValue: "Count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
}});
</script>
</body>
</html>
and badge_json.php:
<?php
header('Content-type: application/json');
// your data goes here
$data = array(
['Domain' => 'Artificial Intelligence', 'Count' => 46],
['Domain' => 'Data Architecture', 'Count' => 21],
['Domain' => 'Data Science', 'Count' => 50]
);
echo json_encode($data);
?>
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 .
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.
I have a JSP page which opens up a popup using JS.
The popup opens the following JSP page.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/ArchiveSearch/resources/css/messageDetail.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Message detail</title>
</head>
<body>
<div class="wrapper">
<h1>Message Details</h1>
<div class="messageMeta1">
<div><span class="label">Sender:</span> <c:out value="${messageid}" /></div>
<div><span class="label">Receiver:</span></div>
<div><span class="label">Subject:</span></div>
<div><span class="label">Attachments:</span></div>
</div>
<div class="messageMeta2">
<div><span class="label">Case ID:</span></div>
<div><span class="label">Date:</span>${messagedate}</div>
</div>
<div class="messageContent">
</div>
</div>
</body>
</html>
My problem is that when JS opens the webpage the values that are passed from the servlet don't show up on the JSP page. But when I check HTML reponse under Firebug the HTML is rendered correctly. My question is how do I get the Servlet in the popup window correctly?
JS:
$('#searchResults tbody tr').live('dblclick', function () {
var aData = table.fnGetData( this,0 );
$.ajax({
url: "MessageDetail",
type: "POST",
data: "messageid=" + aData,
succes: function(data) {
}
});
window.open(myjsppage.jsp, "_blank", "width=600,height=600");
});
Popup window has know knowledge of the request made before, how can I fix this?
EDIT
I tried something like this:
succes: function(data) {
gData = data;
}
});
var popup = window.open("messageDetail.jsp", "_blank", "width=600,height=600");
popup.document.write(gData);
});
I think I am on the right way, but i'm not completely there yet. Undefined is printed in the popup now, which means the variable isn't filled.
It's not a good way of doing this, but if you want your code to work you must use it like this:
success: function(data) {
gData = data;
var popup = window.open("messageDetail.jsp", "_blank", "width=600,height=600");
popup.document.write(gData);
}
});
});
Put your open code inside success method.
Also you wrote success with one 's', please fix it.